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

时间:2018-04-17 03:20:08

标签: three.js gltf

嘿,我有三个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/

干杯!

2 个答案:

答案 0 :(得分:6)

您需要在每个子网格上设置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 instanceof THREE.Mesh ) { node.castShadow = true; }

    } );

    scene.add( gltf.scene );

} );

three.js r.91

答案 1 :(得分:-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 );