WEB 3D技术 three.js draco解压器解决压缩后的gltf/glb报错 Error: THREE.GLTFLoader: No DRACOLoader instance pravid-Toy模板网

这篇具有很好参考价值的文章主要介绍了WEB 3D技术 three.js draco解压器解决压缩后的gltf/glb报错 Error: THREE.GLTFLoader: No DRACOLoader instance pravid。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

通常我们 glb/gltf里面都是非常大的场景
有些工具它会因为过大做了压缩导致我们开始是用不了的
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
我们可以官网搜索 draco
如下图选择

这是个解压工具用在我们各种的3D建模软件中
大部分是通用的

我们先在代码中导入工具

//导入draco解码察
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

我们在项目根目录中找到 node_modules下的 three
然后在其中打开 examples 下面有一个 jsm
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
在下面找到 libs
下面的 draco 就是我们要的东西

将这个包复制到我们自己的静态资源目录下

然后我们编写代码如下

// 实例化加载器g1tf
const gltfLoader = new GLTFLoader();
// 实例化加较器draco
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/draco/");
gltfLoader.setDRACOLoader(dracoloader);
gltfLoader.load(
    "gltf/glb路径",
    (gltf) =>{
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.frustumCulled = false;
                child.castShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
        });
        scene.add(gltf.scene);
    }
)

主要就是 DRACOLoader 创建一个解压器
然后 setDecoderPath 指明draco解压工具的路径

然后 GLTFLoader 构建的对象我们这里叫 gltfLoader 用setDRACOLoader 指定解压方式 dracoloader
这样资源就可以加载出来了文章来源地址https://www.toymoban.com/news/detail-853084.html

到了这里，关于WEB 3D技术 three.js draco解压器解决压缩后的gltf/glb报错 Error: THREE.GLTFLoader: No DRACOLoader instance pravid的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！