CODEWITHSUNDEEP
three.jsgltf
Steve Hamlyn
Steve Hamlyn

Reputation: 113

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!

Upvotes: 11

Views: 12791

Answers (2)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 32

Александр Даев
Александр Даев

Reputation: 11

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

Upvotes: -1

Related Questions