# Mesh moon behind the mesh earth

**URL:** https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127
**Category:** Questions
**Tags:** scale, mesh, animation, materials, geometry, shaders
**Created:** [June 11, 2020, 3:44pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127 "2020-06-11T15:44:35Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![alexandre\_pisani](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandre_pisani/32/11213_2.png) [@alexandre\_pisani](https://discourse.threejs.org/u/alexandre_pisani)
#### Post date: [June 11, 2020, 3:44pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127/1 "2020-06-11T15:44:35Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/0df573fe326894ec2efcb8ae2643c4d64083f227.jpeg)

Would you please help me ? thanks in advance

---

<div class="post-metadata">

### Author: ![amitlzkpa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amitlzkpa/32/1735_2.png) [@amitlzkpa](https://discourse.threejs.org/u/amitlzkpa)
#### Post date: [June 11, 2020, 3:57pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127/2 "2020-06-11T15:57:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![alexandre\_pisani](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandre_pisani/32/11213_2.png) [@alexandre\_pisani](https://discourse.threejs.org/u/alexandre_pisani)
#### Post date: [June 11, 2020, 4:45pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127/3 "2020-06-11T16:45:42Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![amitlzkpa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amitlzkpa/32/1735_2.png) [@amitlzkpa](https://discourse.threejs.org/u/amitlzkpa)
#### Post date: [June 11, 2020, 5:17pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127/4 "2020-06-11T17:17:23Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6012e9d165b5c54b4fa89f86a64387c31d176f87.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/eddd5c59595420ff6e0ddc9984845619217ec764.jpeg)

Alternatively you could try using [logarithmic scale for the camera depth buffer](https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html).

---

<div class="post-metadata">

### Author: ![alexandre\_pisani](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandre_pisani/32/11213_2.png) [@alexandre\_pisani](https://discourse.threejs.org/u/alexandre_pisani)
#### Post date: [June 11, 2020, 5:39pm UTC](https://discourse.threejs.org/t/mesh-moon-behind-the-mesh-earth/16127/5 "2020-06-11T17:39:41Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8b35d9a8f38cceb2fe8beddfc1210533f08ec198.jpeg)
