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 [email protected]