three.js 性能优化之gltf转化与压缩

项目背景

在vue中利用three.js,搭建3D智慧配电房监测系统，其中发现设计师给的模型太大了最大的一个模型有6MB之大，以至于后面模型加载的时候页面速度变得超级的慢，所以需要将模型进行优化，将其变小；

模型优化

设计师给我的模型类型是obj的，还带有素材mtl。通过百度发现浏览器对gltf格式的模型支持是比较友好的。所以现将ob模型转化成gltf格式的。

安装插件

首先安装obj2gltf；该插件的作用是把obj格式转为gltf格式。下面开始安装，建议全局安装，这样下次在其他文件夹或者目录下都可以用命令行来实现格式转换。

cnpm i -g obj2gltf

接着安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。减少大小，更快的加载。

cnpm i -g gltf-pipeline

执行命令

格式转化

首先对obj进行模型转化，将其变成gltf模型；输入命令：（参数：-i 是输入路径，-o 是输出路径，其他参数可参考插件官方文档，根据自己的需要添加即可,输入输出的路径一定要正确，不然会报找不到directory之类的错误);注意：在这个过程中，obj和mtl名字最好对应，而且最好放在统一目录下面，要不然命令会报错，说找不到xx.mtl文件。

obj2gltf  -i ./static/models/obj/11-6.obj -o ./static/models/new/11-6.gltf -u

将文件转换好格式，你会得到对应的gltf文件。

 

模型压缩

执行下面命令行，通过DRACO压缩算法对gltf模型进行压缩；（-d 就是draco算法）

gltf-pipeline  -i ./static/models/new/11-6.gltf -o ./static/models/new/11-6_mini.gltf -d

引入外部gltf模型

调用解析器

因为three.js中基本上包含了所有three的资源，所以就直接引用gltf和压缩算法的解析器；

	import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
	import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

具体代码

				//加载模型
        let loader = new GLTFLoader();
        let dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("/static/models/draco/");//加载draco算法，这样才能解析压缩后的gltf模型格式，具体的draco算法文件，直接可以three依赖文件中找到，赋值到static目录下面就好了
        loader.setDRACOLoader(dracoLoader);
        loader.load("/static/models/new/1p_mini.gltf",//引入压缩的gltf模型
          function(obj) { // 这个obj就是解析后的模型，可添加到scene内。
            obj.scene.position.set(-27.5, 0, -2);//设置物体的位置
            obj.scene.scale.set(0.00065, 0.00065, 0.00065);//设置物体的大小
            that.scene.add(obj.scene);// 在场景中添加物体
          },
          // called while loading is progressing
          function(xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          // called when loading has errors
          function(error) {
            console.log("An error happened");
          }
        );

引入draco算法文件

遇到的问题：

1. Chrome 加载gltf模型时控制台报错：DevTools was disconnected from the page以及RangeError: WebAssembly.Memory(): could not allocate memory；解决方案：将浏览器升级到最新版本；
2. 将obj模型转化gltf过程中，如果报错说没有找到xx.mtl文件时；解决方案：确定mtl和obj文件是否相同，其次mtl和obj文件放在同一录下面。
3. 如果需要转化的模型太多或者需要压缩的模型太多了，可以使用Windows bat脚本批处理。新建一个txt文本，输入下图代码，将后缀改成.bat将文件放到项目根目录文件,双击就可以执行11条压缩命令了。

@echo offt,
 for  %%I in (1,2,3,4,5,6,7,8,9,10,11) do call gltf-pipeline -i ./static/models/new/3-%%I.gltf -o ./static/models/new/3-%%I_mini.gltf -d
pause

参考资料

1. Three.js 开发之加载外部GLTF模型和压缩（一）