three.js：透明对象渲染顺序错误，具体取决于摄像机角度

Question

我在 three.js 中看到透明对象渲染不一致的问题，我无法完全弄清楚那里发生了什么以及导致问题的原因。

可在此处找到演示该问题的简化测试用例：http://jsfiddle.net/fgu0fzro/3/。

重要的位：

renderer.setClearColor(0xffffff);

camera = new THREE.PerspectiveCamera(50, aspectRatio, 1, 1000000);
camera.position.set( 4600, 4800, -10000);

cameraControl = new THREE.OrbitControls( camera, renderer.domElement );

var plane = new THREE.Mesh(
    new THREE.PlaneGeometry(100000,100000),
    new THREE.MeshLambertMaterial({
        color: 0x2B79DE, transparent:true, opacity:.75
    })
);

var cube = new THREE.Mesh(
  new THREE.BoxGeometry(1000,1000,1000),
  new THREE.MeshLambertMaterial({
      color: 0xF33856, transparent: true, opacity: .2
  })
);

plane.rotation.x = -Math.PI/2;    
cube.position.set(3000, 1000, 2000);

scene.add(camera);
scene.add(plane);
scene.add(cube);

所以立方体在平面上方，我希望通过透明立方体看到平面。相反，它被渲染得好像飞机根本不存在一样。现在，如果您将相机稍微向左移动，问题就会消失，一切都会按应有的方式呈现。

现在，我已经发现这个问题与 three.js 的对象排序有关（如果我设置 renderer.sortObjects = false; 并按正确的顺序添加对象，它会起作用），但是我仍然不太明白那里到底发生了什么，我想知道是否有任何方法可以在不禁用其他有用的对象排序的情况下解决这个问题。

three.js r70

Answer 1

three.js 中透明对象的 Alpha 混合与顺序无关——换句话说，对象的渲染顺序会影响结果。

此外，material.depthTest 和 material.DepthWrite 值会影响结果。默认情况下，它们都是 true。您可以尝试更改它们，但根据您的用例，可能会产生不需要的副作用。

在您的特定情况下，我将有两个场景并实施两个渲染通道。第一个场景将包含飞机，第二个场景将包含其余对象。参见 this answer。

three.js r.70

three.js：透明对象渲染顺序错误，具体取决于摄像机角度

three.js: Transparent Objects rendering in wrong order depending on camera-angle

javascript

transparency

three.js