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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在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/

干杯!

答案

您需要在每个子网格上设置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

另一答案
            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 );

以上是关于如何在three.js中使用gltf模型投射阴影?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 GLTF 模型动态覆盖纹理 - Three.js

vue中加载three.js的gltf模型

Three.js 完全冻结 Chrome,GLTF 模型中的巨大纹理

GLTF 模型在three.js 中旋转时变形

使用Three.js 心得系列一 如何创建三维网格三使用Three.js 心得系列三 Three.js 如何加载GlTF文件

Three.js导入gltf模型和动画