Vue中three.js导入gltf模型文件时报错

Posted 2023-05-06

参考技术A 在vue项目中导入gltf/glb模型文件的时候出错了。

1、gltf模型文件被加密了
2、draco压缩了

而我加载的gltf文件不是加密的，所以第一个原因pass掉，那么就是draco压缩了。解决的方法是，在vue项目中，我们需要将draco文件夹复制一份到public目录下，不然在加载gltf/glb资源的时候就会报以上的错。

如何在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 );