在 H5 中引入 3D 模型往往存在资源太大，可以通过模型网格压缩，通过 glTF 配合 Draco 压缩的方式，可以在视觉效果近乎一致的情况下，让 3D 模型文件成倍缩小，我来为大家科普一下关于基于threejs的建模工具：格式的压缩文件在?下面希望有你要的答案，我们一起来看看吧!
基于threejs的建模工具：格式的压缩文件在
在 H5 中引入 3D 模型往往存在资源太大，可以通过模型网格压缩，通过 glTF 配合 Draco 压缩的方式，可以在视觉效果近乎一致的情况下，让 3D 模型文件成倍缩小
glTF 在线查看器： https://gltf-viewer.donmccurdy.com
一、通过 Draco 进行压缩Draco 是 Google 推出的一个用于 3D 模型压缩和解压缩的工具库，glTF 资源可通过、Draco 开发命令行工具 gltf-pipeline 进行编码压缩，gltf-pipeline 可通过 npm 的方式安装使用，使用方法如下：
#全局安装
npm install -g gltf-pipeline
#压缩 glb 文件 -b 表示输出 glb 格式， -d 表示压缩
gltf-pipeline -i model.glb -b -d
#压缩 glb 文件并将纹理图片分离出来
gltf-pipeline -i model.glb -b -d -t
更多参数查阅
gltf-pipeline -h
二、实际操作流程（vue cli3 结构为例）1、通过 blender 制作的模型导出 test.glb 文件，在 public 的文件夹内新建 models 文件夹，并放入 test.glb 文件，
通过命令行工具 gltf-pipeline -i test.glb -o test1.glb -d 则可以生成压缩后的 test1.glb 文件
2、把解码文件 node_modules>three>examples>js>libs 路径下的 draco 文件夹放到 public 文件夹下
3、代码实现
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {CSS3DRenderer, CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
initModel() {
let gltScene;
let gltfLoader = new GLTFLoader();
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("draco/gltf/"); // 设置public下的解码路径，注意最后面的/
dracoLoader.setDecoderConfig({ type: "js" });
dracoLoader.preload();
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load("models/mynewtest.glb", gltf => {
console.log(gltf);
gltf.scene.position.set(0, 0, 0);
this.scene.add(gltf.scene);
});
},
