Three.js imported JSON model not receiving/casting shadows

Question

I've been trying to work with blender exported models in Three.js, and I'm at the point where I can import the model, and see how light affects the object itself. I can see a directionalLight I used highlighting what's facing it, but I cannot cast shadows at all.

Here's what I'm doing:

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();
} );

But even with what I believe is the whole setup that allows me to cast shadows done, I cannot get any shadow to be cast. Here's a screenshot:

Even though the light is coming from the right of the island, the mountains are not casting the shadows I expected them to.

I really appretiate any time you spend looking at this!

Massive thanks in advance, guys!

gaitat gaitat · Accepted Answer · 2015-08-06T19:14:28

What you are doing will only work if you know the data in your json file have the structure of one parent with all the rest being a child of that parent. (still why are you doing -1 in the for loop?)

What you should be doing (that works in all cases) is traverse the generated geometry tree:

islandMesh.traverse ( function (child) {
    if (child instanceof THREE.Mesh) {
        child.castShadow = true;
        child.receiveShadow = true;
    }
}

Edit

For the directional light that you are using you probably have to adjust the

light.shadowCameraNear, light.shadowCameraFar, light.shadowCameraLeft,
light.shadowCameraRight, light.shadowCameraTop, light.shadowCameraBottom

CameraNear the default might be OK but you can bring it back to 1 and CameraFar depending on how far the camera is from the far end of the scene.

Three.js imported JSON model not receiving/casting shadows

1 Answers