Three Js: Overlapped objects

Question

I have a lot of meshes in my code and I want that the renderer renders the object that should be infront, something like this -->https://i-msdn.sec.s-msft.com/dynimg/IC72309.gif I already read about the render Depth but I don't know how to use it in the code. Lets say I have two spheres:

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);

Now I want that the first Sphere overlapps the other one without changing the z-axes.

The site that I'm using is http://gamingjs.com/ice/ and it should be the version r52.

r.52 is 4 years old. Your link is using `CanvasRenderer`. See [this answer](http://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937) for how to achieve what you want using `WebGLRenderer` and a recent three.js version. — WestLangley, Dec 11 '16 at 18:22

score -1 · Answer 1 · answered Dec 13 '16 at 15:43

-1

You can disable depthWrite of the material, so the object will be rendered on top of everything else.

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

answered Dec 13 '16 at 15:43

Brakebein

2,197
1
16
21

Three Js: Overlapped objects

1 Answers1