Why are GridLines Showing Through Object?

Questions
1

I have created a simple Grid using PlaneGeometry (modified to show only the perimeter lines) and LineBasicMaterial (although other materials seem to work fine). I have drawn a simple box that is resting on the grid. For some reason, the distant grid lines are showing through the box as if the box was transparent. Here is a CodePen example

Does anyone know why this is happening? I have tried various versions of three.js and I have tried different cube and grid materials, but nothing seems to help.

Note that the Box has an xyz position of 0,0,0 and that the Grid is positioned below the Box.

Iā€™m sure that it is stupidly simple, but I have never run into this before.

2

Render order, or just flip those two lines:

initGrdMap(Grd4);
scene.add(new THREE.Mesh(new THREE.BoxGeometry(BoxSiz, BoxSiz, BoxSiz), new THREE.MeshPhongMaterial({color: "blue"})));
1 Like