three.jsgltf

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


I'm new to Three.js and I 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!


Solution

  • 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