three中使用GLTF/GLB模型性能优化-GLB下载网(glbxz.com)gltf文件下载-glb格式下载-模型制作

最近更新：2024年5月17日

three中使用GLTF/GLB模型性能优化

17。

2023-10-11 小编已售22次关注17次

0.01金币年/月SVIP:0.008金币 该资源永久SVIP免费去升级

收藏 QQ咨询

特别声明：此网站模型都是glb模型下载，gltf文件下载，用于wed展示，有些可能有源文件fbx/obj/blend/3dmax，具体看正文说明，也可联系客服定做模型，网盘过期请用备用下载，提取码都是gltf，如模型加载不兼容，可用网站在线编辑功能，重新导出！GLB下载网(glbxz.com)gltf文件下载-glb格式下载-模型制作https://glbxz.com 充值金币

背景：前端页面应用three展示大量模型，要求优化页面运行稳定性，如果模型总量太大，会导致页面掉帧，严重会导致页面崩溃。

结果：大幅度压缩模型大小，最高压缩掉原来大小的95%

1. 需要插件 three、gltf-pipeline

csharp

复制代码

项目内应用时 npm i three   或者 yarn add three
npm i -g gltf-pipeline  或者 yarn global add gltf-pipeline

2. gltf/glb、压缩

css

复制代码

    a、glb转为gltf

        gltf-pipeline -i demol.glb -o demol.gltf
    
    b、gltf压缩

        gltf-pipeline -i demol.gltf -o modelDraco.gltf -d

3.项目中使用

typescript

复制代码

   a、从three的npm包中查找到draco文件，并放置到public文件夹下
        路径为 node_module/three/examples/js/libs/draco
    
   b、引入dracoLoader  GLTFloader

        import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"

        import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
   c、加载

        const loader = new GLTFLoader();
        let dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("./draco/gltf/"); // 设置public下的解码路径，注意最后面的/
        dracoLoader.setDecoderConfig({ type: "js" });
        dracoLoader.preload();
        loader.setDRACOLoader(dracoLoader);
        loader.load("./glb/trunk_endcar_d.gltf", (gltf) => {
          let model = gltf.scene;
        });