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

32次阅读

共计 794 个字符,预计需要花费 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

正文完
 0