personal-blog😶‍🌫️

Three——glb模型压缩

web开发基于Vue3对three.js加载3d模型过程中，往往会出现模型太大导致前端加载时间过长，降低用户使用的体验，我们这里选取gltf-pipeline的DRACOLoader方式来解压模型。

首先需要全局安装

// npm安装
npm install -g gltf-pipeline

// yarn安装
yarn global add gltf-pipeline

常用的压缩命令

gltf-pipeline -i 13131312(4).glb -o 13131312zip.glb -d

我们可以看到，使用Draco压缩网络模型会比之前小了将近一半，这个是会根据纹理，面等一系列材质有关

在Vue3中使用

// 导入glb模型
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 压缩模型包
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

  const loader = new GLTFLoader(); //实时显示进度
  const dracoLoader = new DRACOLoader(); // 压缩glb文件
  dracoLoader.setDecoderPath("../../public/gltf/"); //设置解压库文件路径
  dracoLoader.setDecoderConfig({ type: "js" }); //使用js方式解压
  dracoLoader.preload(); //初始化_initDecoder 解码器
  loader.setDRACOLoader(dracoLoader);
  loader.load(props.path, (gltf)=> {
      gltf.scene.name = "3DSouthernWind";
      gltf.scene.traverse(function (child) {
        if (child.isMesh) {
          // 渲染色泽
          child.material.emissive = child.material.color;
          //  获取纹理贴图，可以设置为一个新的纹理贴图
          child.material.emissiveMap = child.material.map;
        }
      });
      // gltf.scene.position.y = 8;
      // 模型添加到场景
      scene.add(gltf.scene);
      render();
    },
  );

dracoLoader.setDecoderPath是用来设置解压库的文件路径，这个需要根据实际位置去获取路径中的js

props.path这个位置替换成压缩后的图片路径即可我这里是放在src的assets文件夹下 Vue3引入本地模型路径

const path = new URL(`../assets/SouthernWind.glb`, import.meta.url).href;

Vue2引入本地模型路径

const path = require(../assets/SouthernWind.glb)

Three——glb模型压缩 ​

Three——glb模型压缩