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透明球体故障

回答

相关问题