ThreeJs DRACO压缩并加载gltf模型的爬坑记录

前端-阿辉

已于 2024-06-25 09:59:33 修改

阅读量6.6k

点赞数 6

分类专栏： Vuejs 前端 javascript threeJs 文章标签： javascript vue.js three.js

于 2021-10-27 14:45:55 首次发布

本文链接：https://blog.csdn.net/bigpatten/article/details/120991645

版权

Vuejs 同时被 3 个专栏收录

48 篇文章 4 订阅

订阅专栏

前端 javascript

32 篇文章 0 订阅

订阅专栏

threeJs

8 篇文章 1 订阅

订阅专栏

采用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)
  })
}