At the start of the project i had a simple floor with shadows. Than i tried to add a grid and changed the ground/floor to this.
// Ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.position.y = -1;
scene.add( ground );
const grid = new THREE.GridHelper( 1000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = false;
grid.position.y = -1;
scene.add( grid );
Than i realised that some of the models change the transparency depending on the angle you look on the model. So i tried identify the problem. In my opinion the transparency bug has something to do with the ground / grid. So i hope than someone can provide a good ground + grid solution to test. Because my ground + grid is far from good.
P.S. When i change the transparency of the grid i get this results:
grid.material.transparent = true;
Look good from far
grid.material.transparent = false;
Looks bad from far (white lines)
So i someone has a better solution for the ground / grid please share.