三个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 });