javascript - three.js:根据摄像机 Angular 以错误的顺序渲染透明对象

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。您可以尝试更改它们，但可能会产生不需要的副作用，具体取决于您的用例。

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

three.js r.70