I developed an application where I dynamically created shelves. Everything is working fine except for the shadows. I'm not sure if the issue lies with the lighting or the objects themselves. Can anyone provide some assistance? Here is a snapshot showcasing the problem with my shadows
Below is the code for the lighting:
addLights(){
this.ambientLight = new AmbientLight( 0xffffff, 0.8 );
this.scene.add( this.ambientLight );
this.shadowLight = new THREE.SpotLight( 0xffffff , 0.1 );
this.shadowLight.position.set( 10 , 100 , 10 );
this.shadowLight.target = this.mainGroup;
this.shadowLight.castShadow = true;
this.shadowLight.shadow.mapSize.width = 4096;
this.shadowLight.shadow.mapSize.height = 4096;
this.shadowLight.shadow.camera.near = 1;//500;
this.shadowLight.shadow.camera.far = 1000;//4000;
this.shadowLight.shadow.camera.fov = 30;
this.shadowLight.shadow.bias = -0.01;
this.scene.add( this.shadowLight );
this.spotLight = new THREE.SpotLight( 0xffffff , 0.8 );
this.spotLight.position.set( 10 , 100 , 10 );
this.spotLight.target = this.mainGroup;
this.spotLight.castShadow = false;
this.scene.add( this.spotLight );
}
And for the white boxes:
makeBox(elemColor: any, coordinates: [ number, number, number ], size: [ number, number, number ] ) {
// Box
this.geometry = new BoxBufferGeometry(size[0], size[1], size[2]);
this.material = new MeshLambertMaterial({ shading:FlatShading , color: elemColor });
this.mesh = new Mesh(this.geometry, this.material);
this.mesh.material.side = DoubleSide;
this.mesh.position.x = coordinates[0];
this.mesh.position.y = coordinates[1];
this.mesh.position.z = coordinates[2];
this.mesh.receiveShadow = true;
this.mesh.castShadow = true;
return(this.mesh);
}
The other components are imported JSON Objects using ObjectLoader. They were created in Cheetah, Blender, and/or Clara.io and exported as ThreeJS.json
I hope the provided code is sufficient, let me know if you need more
Thank you for taking a look :)
EDIT // my renderer:
// RENDERER
this.renderer = new WebGLRenderer( { antialias: true } );
this.renderer.shadowMapType = THREE.PCFSoftShadowMap; // softer shadows
//this.renderer.physicallyCorrectLights = true;
this.renderer.setClearColor( this.scene.fog.color );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( this.renderer.domElement );
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.renderReverseSided = true;