共计 794 个字符,预计需要花费 2 分钟才能阅读完成。
在开发准备阶段建模同学都会提供一个
车模
, 从前段考量一般来说超过 100kb 都算是大文件了,这个模型一般是obj
+mtl
文件,这两个一般都会超过 MB。推动精简的话都非常都难。
精简方案
- 删减模型的
顶点
和面片
- 模型压缩
第一种专业性比较强,我们是搞不定的,那么就可以从第二种思路为出发点。通过万能的搜索引擎搜索我们可以找到被誉为 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
正文完
发表至: javascript
2019-10-17