Recently, I've been experimenting with blender exported models in Three.js. I have successfully imported a model and observed how light interacts with the object. While a directionalLight is illuminating the front-facing parts, I'm facing an issue with casting shadows.
Here's what I've set up:
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
(...)
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(30,10,-10);
directionalLight.castShadow = true;
directionalLight.shadowDarkness = 0.5;
directionalLight.shadowCameraVisible = true;
directionalLight.shadowBias = 0.1;
directionalLight.shadowMapWidth = 1024;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowCameraRight = 10;
directionalLight.shadowCameraLeft = -10;
directionalLight.shadowCameraTop = 10;
directionalLight.shadowCameraBottom = -10;
directionalLight.shadowCameraFar = 10;
directionalLight.shadowCameraNear = 10;
scene.add(directionalLight);
var loader = new THREE.ObjectLoader();
loader.load("island.json", function(geometry) {
islandMesh = geometry;
for(k in islandMesh.children-1){
islandMesh.children[k].castShadow = true;
islandMesh.children[k].receiveShadow = true;
}
islandMesh.castShadow = true;
islandMesh.receiveShadow = true;
scene.add(islandMesh);
render();
});
Despite setting up what I believe to be the necessary configurations for shadow casting, I am unable to see any shadows being cast. See the screenshot below:
https://i.stack.imgur.com/9pvxC.jpg
Even though the light source is positioned to the right of the island, the mountains are not casting the expected shadows.
Any help or insight on this matter would be greatly appreciated!
Thank you so much in advance!