如何在three.js中使用gltf模型投射阴影？答案

【问题标题】：How to cast a shadow with a gltf model in three.js?如何在three.js中使用gltf模型投射阴影？
【发布时间】：2018-09-26 21:41:07
【问题描述】：

嘿，我是三个 js 的新手，想知道如何使用 gltf 模型投射阴影？我可以看到这是可能的，因为它正在工作here 我假设我的代码结构不正确-

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/

干杯！

【问题讨论】：

标签： three.js gltf

【解决方案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

【讨论】：

非常感谢！这是更新后的fiddle 供感兴趣的人使用
如果上述方法不适合您，请将 instanceof 替换为 node.isMesh
@Jorre 已更新。谢谢！
我还必须设置node.receiveShadow = true。

【解决方案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 );

【讨论】：