GLTFLoader improves model loading efficiency

background

three.js loads some 3D models with texture images in the 3D scene. The input is .obj files and corresponding texture images. Three.js loaders OBJLoader and MTLLoader are used. The code is as follows:

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);
});

question

There is a performance problem, so we consider converting the .obj file format to a .gltf file, and the following points need to be noted:

1. There is a line in the .obj file that is an index to the .mtl file. Make sure the path and file name are correct

   mtllib 左边窗帘材质测试.mtl

2. The .mtl file contains the corresponding relationship between the specified node 3D Node and the material material, and the path and name of the texture image must be correct

map_Kd textures/2046725.5b4fa11fd8869-004.jpg

solution

Install obj2gltf third-party package

npm install -g obj2gltf

Format conversion via the command line

obj2gltf -i model.obj -o model.gltf