三.js透明球体故障

Question

我有一个透明球体和一个聚光灯，仅此而已。我的球体显示视觉故障，如条纹。

见：http://jsfiddle.net/blwoodley/tvcogqkg/3/

（请注意，网格不是显示错误所必需的。我只是将它放在那里以表明透明度正常工作）。

关于如何摆脱这些故障有什么想法吗？它们似乎取决于相机和聚光灯的相对位置。

使用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);
}

Answer 1

删除属性side: THREE.DoubleSide。由于您正在绘制球体，因此不需要它。