GLTFLoader提高模型加载效率

背景

three.js在3D场景scene中加载一些带纹理图片的3D模型，输入是.obj文件和对应的纹理图片，在使用了three.js的加载器OBJLoader和MTLLoader，代码如下所示：

const mtlLoader = new MTLLoader();
const objLoader = new OBJLoader();
mtlLoader.load('models/' + filename + '.mtl', materials => {
    materials.preload();
    objLoader.setMaterials(materials);
    objLoader.load('models/' + filename + '.obj', onLoad);
});

问题

存在性能问题，因此我们考虑将.obj文件格式转换成.gltf文件，需要注意以下几点：

1. .obj文件里有一行是对.mtl文件的索引，要保证路径和文件名称都是正确的

   mtllib 左边窗帘材质测试.mtl

2. .mtl文件里面有指定节点3D Node和材质Material之间的对应关系，纹理图片的路径和名称得是正确的

map_Kd textures/2046725.5b4fa11fd8869-004.jpg

解决方案

安装obj2gltf 第三方包

npm install -g obj2gltf

通过命令行进行格式转换

obj2gltf -i model.obj -o model.gltf