How to cast a shadow with a gltf model in three.js?

Question

Hey there i'm new to three js & was wondering how to cast a shadow with a gltf model? I can see it's possible as it's working here I assume i'm not structuring my code correctly-

var model = new THREE.GLTFLoader();
model.load('https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function(gltf) {scene.add(gltf.scene);});
model.castShadow = true;

Here's the fiddle https://jsfiddle.net/steveham/ckpfwy24/87/

Cheers!

WestLangley · Accepted Answer · 2020-02-19T16:44:20.770

30

You need to set castShadow = true on each child mesh, like so:

var loader = new THREE.GLTFLoader();

loader.load( 'https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function( gltf ) {

    gltf.scene.traverse( function( node ) {

        if ( node.isMesh ) { node.castShadow = true; }

    } );

    scene.add( gltf.scene );

} );

three.js r.113

edited Feb 19 '20 at 16:44

answered Apr 17 '18 at 04:21

WestLangley

102,557
10
276
276

Awesome thanks a lot!! here's the updated [fiddle](https://jsfiddle.net/steveham/yz7usqeh/33/) for anyone who's interested – Steve Hamlyn Apr 17 '18 at 10:01
replace `instanceof` with `node.isMesh` if the above doesn't work for you – Jorre Feb 19 '20 at 14:42
@Jorre Updated. Thanks! – WestLangley Feb 19 '20 at 16:44
5

I also had to set `node.receiveShadow = true`. – powerbuoy Nov 14 '20 at 14:52
This is great, but I had to replace `if ( node.isMesh )` with `if ( node.type === 'Mesh' ) `. I'm using the NPM version 0.137.5 – ChrisCrossCrash Feb 19 '22 at 09:25

score -1 · Answer 2 · answered Sep 19 '18 at 06:13

            var loader = new THREE.GLTFLoader();
            loader.load( 'file path/gltf.gltf', function ( gltf ) {

                gltf.scene.traverse( function ( node ) {

                    if ( node.isMesh || node.isLight ) node.castShadow = true;
                    if ( node.isMesh || node.isLight ) node.receiveShadow = true;

                } );

                gltf.scene.traverse( function ( child ) {

                    if ( child.isMesh ) {

                        child.material.envMap = envMap; //reflection of the world

                    }

                } );

                    scene.add( gltf.scene );

How to cast a shadow with a gltf model in three.js?

2 Answers2

Linked