three.js透明球體故障

我有一個透明球體和一個射燈，就是這樣。我的球體顯示視覺故障，如條紋。three.js透明球體故障

看到：http://jsfiddle.net/blwoodley/tvcogqkg/3/

（注網格是沒有必要表現的bug我只是把它放在那裏表明透明度的工作，否則罰款。）。

關於如何擺脫這些毛刺的任何想法？它們似乎取決於相機和聚光燈的相對位置。

使用three.js，r71。

下面是從小提琴的代碼，因爲SO似乎想它：

var SCREEN_WIDTH = window.innerWidth - 100; 
var SCREEN_HEIGHT = window.innerHeight - 100; 

var camera, scene, _planeMesh; 
var canvasRenderer, webglRenderer; 

var container, mesh, geometry, plane; 

container = document.createElement('div'); 
document.body.appendChild(container); 
scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 100000); 
camera.position.set(380, 80, 100); 
var spotLight = new THREE.SpotLight(0xffffff); 
spotLight.position.set(180, 160, 0); 
var grid = new THREE.GridHelper(400, 40); 
grid.position.y = -20; 
scene.add(grid);  

scene.add(spotLight); 

camera.lookAt(scene.position); 
var material = new THREE.MeshPhongMaterial({ 
    color: 0xaaaa00, 
    emissive: 0xaa0000, 
    specular: 0xaa00aa, 
    shininess: 10, 
    side: THREE.DoubleSide, 
    shading: THREE.SmoothShading, 
    opacity: .8, transparent: true }); 
var size = 16.0; 
var sphereGeo = new THREE.SphereGeometry(size, 32, 16); 
var mesh = new THREE.Mesh(sphereGeo, material); 
scene.add(mesh); 

var mesh = new THREE.Mesh(sphereGeo, material); 
mesh.position.y = 40; 
scene.add(mesh); 

var mesh = new THREE.Mesh(sphereGeo, material); 
mesh.position.x = 60; 
scene.add(mesh); 

// RENDERER 
webglRenderer = new THREE.WebGLRenderer(); 
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
webglRenderer.domElement.style.position = "relative"; 

container.appendChild(webglRenderer.domElement); 
animate(); 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    webglRenderer.render(scene, camera); 
}

來源

2015-06-13 Bob Woodley

查看http://stackoverflow.com/questions/13221328/artifacts-when-rendering-both-sides-of-a-transparent-object-with-three-js/13236863#13236863 – WestLangley

刪除屬性side: THREE.DoubleSide。既然你畫的是球體，你不需要它。

來源

2015-06-13 03:59:36 gaitat

感謝您的快速響應！ –

three.js透明球體故障

回答

相關問題