three.js:透明对象根据相机角度按错误顺序渲染

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

本文关键字：错误 顺序 相机 js 透明 对象 three      更新时间：2023-11-18

我在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

three.js中透明对象的Alpha混合不是顺序独立的——换句话说，对象的渲染顺序将影响结果。

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

在您的特定情况下，我将有两个场景并实现两个渲染过程。第一个场景包含平面，第二个场景包含其余对象。看看这个答案。

three.js r.70

相关文章：