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

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.

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

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;
1 Like

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


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”.


Thanks for your suggestion, it worked :ok_hand:

1 Like