Mesh moon behind the mesh earth

Hi, When the moon orbits in front of the earth , the moons itself gets invisible and it seems the ilusion it orbits behind the earth when in the reality the moon should appears in front of the earth… something is wrong.

Im using for both spheres MeshPhongMaterial and some scale

**planetMaterial = new THREE.MeshPhongMaterial({**

** map: planetTextureMapLoader,**
** normalMap: planetTextureNormalMapLoader,**
** specularMap: planetTextureSpecularMapLoader,**
** normalScale: new THREE.Vector2(6, 6),**
** specular: new THREE.Color(“gray”),**
** shininess: 5,**


** //map + bumpMap**
** planetMaterial = new THREE.MeshPhongMaterial({**
** map: planetTextureMapLoader,**
** bumpMap: planetTextureBumpMapLoader,**
** bumpScale: 0.002,**
** shininess: 5,**
** });**

image

Would you please help me ? thanks in advance

Can you share the full code?
I suspect the moon in moving within the camera’s near plane.

sure. Its my University project. the sandbox link is :

https://codesandbox.io/s/serverless-sunset-pm5vq

@amitlzkpa Please if you cant access tel me so I can change another settings. thx in advance.

The main code startts at app.js in js/ folder

You need to use the mouse or mousepad to drag near the Earth.
Type E to the camera focus on earth , so you can rotate to see the moon orbiting…

It worked fine.

The initial guess was incorrect. However I think the occlusion is happening because the the view range of the camera is too (distance between near clipping plane and far clipping plane).

When the cameras work on a normal scale, having a huge range doesn’t give enough precision for the depth buffers to correctly determine what is in front and what is behind leading to weird occlusions.

Your camera was setup in the range of 0.1 to 3e9.

By changing that to 3000 to 30000000 I saw less of the artifact.
image

Alternatively you could try using logarithmic scale for the camera depth buffer.

thanks a lot @amitlzkpa it worked like a charm. I changed near control camera property to 1000 instead of 0.1 and it fixed my problem. I will study logarithmic scale as well.

1 Like