Three.js - 在另一个顶部的几何

Question

在Three.js中，网格总是呈现在场景的顶部，即使它的位置在所有对象后面吗？我正在使用网格实现套索选择，并且需要在场景的其余部分上渲染选择框。

Answer 1

是的。

首先做到这一点：

renderer.autoClear = false; 

然后创建一个包含只是要在最前面的对象第二场景。然后，在你渲染循环：

renderer.clear();      // clear buffers 
renderer.render(scene, camera);  // render scene 1 
renderer.clearDepth();    // clear depth buffer 
renderer.render(scene2, camera); // render scene 2 

---

编辑：另一个解决方案是只有一个场景，但使用这种模式：

mesh.renderOrder = 999; 
mesh.onBeforeRender = function(renderer) { renderer.clearDepth(); }; 

如果网具有单一材料，它会呈现“顶部”。

three.js所r.85

Answer 2

如果你想渲染只有一个正面目，您还可以通过该对象的材料设置depthTest到false管理：

var onTopMaterial = new THREE.MeshStandardMaterial({ 
    color: 'red', 
    depthTest: false 
}); 

mesh.material = onTopMaterial; 

检查一个示范开始在this fiddle

---

注：请确保您有renderer.sortObjects设置为默认值true值。