如何在three.js中使用gltf模型生成阴影？

Question

嗨，我是三维库Three.js的新手，并想知道如何在GLTF模型上投射阴影？ 我可以看到它是可能的，因为在这里它正在工作。 我猜我没有正确地构建我的代码-

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;

这里是这个示例的地址：https://jsfiddle.net/steveham/ckpfwy24/87/

祝福！

- Steve Hamlyn

Answer 1

您需要在每个子网格上设置castShadow = true，如下所示：

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

- WestLangley

---

非常感谢！！这是更新的fiddle，供有兴趣的人参考。 - Steve Hamlyn

如果上述方法不起作用，请将instanceof替换为node.isMesh。 - Jorre

@Jorre 已更新。谢谢！ - WestLangley

我也需要设置 node.receiveShadow = true。 - powerbuoy

这很棒，但我不得不用 if ( node.type === 'Mesh' ) 替换 if ( node.isMesh )。我正在使用 NPM 版本 0.137.5。 - ChrisCrossCrash

Answer 2

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

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