Hello there!
I have a scene. In this scene, I turned off all the lights to see if it was causing this issue… It appears to be.
Here is the problem I am having. I am setting scene background color like so:
scene = new THREE.Scene();
scene.background = new THREE.Color( 0X999999 );
Then I set up some geometry to act as my “ground” or “floor”, like so:
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 60, 60 ));
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
mesh.material = new THREE.MeshStandardMaterial( { color: 0x999999 } )
scene.add( mesh );
So as you’d expect, the ground is black. Lets add some ambient light. Around .55 intensity the ground is pretty close to the background color to create that seamless impression
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.55 ); // soft white light
scene.add( ambientLight );
Right, so far so good. But wait, we want to cast some shadows from our models on to this ground of ours
// Shadow casting light
const dirLight = new THREE.DirectionalLight( 0x999999, .55 );
dirLight.position.set( 3, 25, 10 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 30;
dirLight.shadow.camera.bottom = - 30;
dirLight.shadow.camera.left = - 60;
dirLight.shadow.camera.right = 60;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 2540;
dirLight.shadow.mapSize.width = 1540
dirLight.shadow.mapSize.height = 1540
scene.add( dirLight );
And here is where it all goes wrong! The reflection of the directional light off the ground is causing the whole ground mesh to brighten. It looks like a big square in the middle of nowhere.
So what am I actually trying to do here?
I would like a “ground” that you can cast shadows upon
I would like a “background” that exactly matches this ground.
The impression should be of a single color seamless room or box.
Anybody have any suggestions? I tried to make the dirlight color to the same color as the background too.