CastShadow and receiveShadow problem for imported 3d objects in three.js

Questions
, , , ,
1

Whenever I import a 3d object from 3dsMax or blender into three.js as GLTF files, I can’t see any shadows received or cast by the object. While loading, I set the castShadow and receiveShadow properties both to true, but, as seen in the picture, none of them work.

castShadow
castShadow861×549 13.9 KB

Here is the code I write to import the model:

let gltf = new GLTFLoader()
gltf.load("../src/box8.glb", (gltf) => {
    let loader = gltf.scene;
    loader.castShadow = true
    loader.receiveShadow = true
    loader.position.y =  1.5
    loader.position.z = 0
    loader.position.x = -0.05
    scene.add(loader)
})
2

You might have to traverse the children meshes of the scene and set their castShadow and receiveShadow. Something like:

gltf.scene.traverse ( function ( child )
{
    if ( child.isMesh )
    {
        child.castShadow = true;
        child.receiveShadow = true;
    }
});
3

You’ll also have to enable shadow Map on the renderer, set directionalLight.castShadow to true and setup the directional lights shadow camera to contain the objects needed to cast shadows, take a look at this example in the documentation for a better understanding of how shadows are typically achieved

4

and just to fix your next problem, because this will blow, that’s not a valid path. if this works at all it’s accidental, but it won’t run in production. you can’t leave /src and you can’t fetch any asset from within /src. assets are in /public. if you have /public/box8.glb the path is “/box8.glb”.

5

Thanks for your suggestion, it worked :ok_hand: