多个场景中的three.js透明对象不起作用答案

【问题标题】：three.js transparent objects in multiple scenes not working多个场景中的three.js透明对象不起作用
【发布时间】：2022-09-27 17:32:53
【问题描述】：

我使用多个场景作为选择性照明的解决方法。现在，我在使用透明对象时遇到了困难。

为简单起见，我创建了一个 jsfiddle 插图：

[1]: https://jsfiddle.net/curisiro/w9ke75ma/2/

我有两个在不同场景中的透明方块。问题是我可以看到红色方块后面的蓝色方块（图 1），但我看不到蓝色方块后面的红色方块（图 2）。

对于材质，通过使用其他效果，depthTest 和 depthWrite 必须默认设置为 true。

你有解决这个问题的方法吗？

标签： three.js transparent renderer

【解决方案1】：

编辑：如果你坚持使用两个场景，你可以通过清除渲染之间的深度来解决这个问题：

function render() {
  requestAnimationFrame(render);
  
  this.renderer.clear();
  renderer.render(scene, camera);
  renderer.clearDepth();            // <--- Like this
  renderer.render(scene1, camera);
}

或者，只需渲染到同一场景：

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshStandardMaterial({color: 0x0000ff, transparent: true, opacity: 0.4});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

let geometry1 = new THREE.BoxGeometry(1, 1, 1);
let material1 = new THREE.MeshStandardMaterial({color: 0xff0000, transparent: true, opacity: 0.4});
let mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.position.z = 2;
scene.add(mesh1);

（见forked fiddle）。在这种情况下，您可以通过其他方式处理选择性照明（可能是图层或自定义材质，具体取决于您的需要）。

【讨论】：

嗨 Berthur，谢谢您的回复。正如我所提到的，在我的应用程序中，我必须使用两个场景作为选择性照明的解决方法。我遇到了这个问题。
@kient 哦，我明白了，错过了。查看我编辑的答案