博客

采用DRACO压缩并加载gltf模型的用法，以VUE开发为例

首先，在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的

examples/js/libs/draco/gltf

下，如下图所示：

我们可以复制到自己项目的

public

目录下，

下面来安装

gltf-pipeline

；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。

npm i -g gltf-pipeline

用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件路径 -o 压缩后的文件路径 -d，如下图所示：

gltf-pipeline -i public/static/model/copyone.gltf -o public/static/model/copy.gltf -d

如上图所示，压缩效果还是很好的，注意模型压缩后不能再使用

GLTFLoader

加载模型，必须使用Draco解码，再使用

DRACOLoader

配合

GLTFLoader

加载器 加载压缩后的模型，下面开始写相关代码，我们以VUE项目为例：

以上相关内容完成后我们需要引入

DRACOLoader

加载器，

线上地址：http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/DRACOLoader.js

使用线上地址我们可以在项目的

public

下的

index.html

中引入

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/DRACOLoader.js"></script>

或者在项目的

main.js

中引入

import './static/js/DRACOLoader'

加载压缩后模型的相关代码，如下：

init() {
	// 实例化 gltf 加载器
	var loader = new THREE.GLTFLoader();
	var textureCube = new THREE.CubeTextureLoader()
	// 设置Draco解码库 解压路径，该路径就是解压文件所在的位置
    THREE.DRACOLoader.setDecoderPath('static/libs/wasm/');
    // 设置gltfloader解压loader
    loader.setDRACOLoader(new THREE.DRACOLoader());
    // 加载模型
    loader.load('static/model/copy.gltf', (obj) => {
    var mesh = obj.scene
    mesh.traverse(function(gltf) { // 为模型添加环境贴图反光效果
    	if (gltf.isMesh) {
            gltf.material.envMap = textureCube
       }
    })
    mesh.scale.set(0.06, 0.06, 0.06) // 模型大小缩放
    //  场景中添加模型文件
    this.scene.add(mesh)
  })
}

亲测有效，希望可以帮助到大家！！！