三个 Js：重叠的对象

Question

我的代码中有很多网格，我希望渲染器渲染应该在前面的对象，像这样 -->https://i-msdn.sec.s-msft.com/dynimg/IC72309.gif 我已经阅读了关于渲染深度但我不知道如何在代码中使用它。假设我有两个领域：

var shape1 = new THREE.SphereGeometry(50,10,8,10)
var cover1 = new THREE.MeshNormalMaterial();
var Sphere1 = new THREE.Mesh(shape1, cover1);
scene.add(Sphere1);
Sphere1.position.set(10,0,0);

var shape2 = new THREE.SphereGeometry(50,10,8,10)
var cover2 = new THREE.MeshNormalMaterial();
var Sphere2 = new THREE.Mesh(shape2, cover2);
scene.add(Sphere2);
Sphere2.position.set(-10,0,0);

现在我希望第一个球体与另一个球体重叠而不改变 z 轴。

我使用的站点是http://gamingjs.com/ice/，它应该是r52 版本。

Answer 1

您可以禁用材质的depthWrite，因此该对象将呈现在其他所有内容之上。

var cover1 = new THREE.MeshNormalMaterial({ depthWrite: false, depthTest: false });