Threejs-in-autonomous-driving-2模型精简

在开发准备阶段建模同学都会提供一个 车模 , 从前段考量一般来说超过 100kb 都算是大文件了，这个模型一般是obj+mtl 文件，这两个一般都会超过 MB。推动精简的话都非常都难。

精简方案

1. 删减模型的 顶点 和面片
2. 模型压缩

第一种专业性比较强，我们是搞不定的，那么就可以从第二种思路为出发点。通过万能的搜索引擎搜索我们可以找到被誉为 3d 业界的 json 格式的 gltf。

gltf 简介。

这里推荐两个工具

• obj2gltf https://www.npmjs.com/package…
• gltf-pipeline https://www.npmjs.com/package…

obj2gltf 和 gltf-pipeline

利用 obj2gltf 和 gltf 这个工具可以把 obj+mtl 格式转为 gltf, gltf-pipeline 可以进一步把 gltf 转为 glb（binary）这样可以得到一个非常小的模型文件。

$user obj2gltf -i car_r.obj -o car.gltf

可以看到转换后得到一个非常小的文件，gltf-pipeline使用不在赘述。在 threejs 中可以使用 gltfloader 来使用 gltf 或者 glb 文件！

export
let gltfLoader = function (gltfSrc) {return new Promise((resolve, reject) => {new THREE.GLTFLoader()
            .load(gltfSrc,
                ({scene}) => resolve(scene),
                noop,
                error => reject({type: 'gltf'})
            );
    });
};

结语：通过对 glb 格式的模型的使用，我们发现相对于 obj 格式的模型。不论是加载速度还是解析渲染速度都有了质的飞跃。完全没有了 obj 带来的卡顿感觉。

---

• 我的 blog: neverland.github.io
• 我的 email enix@foxmail.com