THREE.JS下3D模型OBJ转二进制压缩大小及加载

最近在研究用three.js创建3D场景,有个地形模型,obj格式的,原始大小6.9mb。加载的时候偏慢,遂考虑压缩模型的方式,找了一圈,发现threejs已经提供了一个工具,使用python执行就能把obj文件转成二进制文件。我使用过后得到的文件大小降为3.3mb,太爽了(再加一句,转成json文件是6.7mb)。

完整的命令方式在这里
https://github.com/mrdoob/three.js/blob/master/utils/converters/obj/convert_obj_three.py

具体使用方法可以百度,网上有很多帖子,就不再赘述了。
加载的时候使用THREE.BinaryLoader方法来加载模型,接受两个参数(geometry,materials),分别是模型和材质。materials还是个数组,用于接收多种材质的。代码如下:

var loader = new THREE.BinaryLoader();
loader.load(url, function( geometry,materials ) {
      ........
}

转换没遇到问题,在贴图的时候遇到问题,因为我的模型还有个贴图,当我加载完成把模型放入场景后发现贴图被拉伸了,变成了这个样子


Paste_Image.png

后来咨询了做模型的同事,说是uv轴重复了多遍的结果。让我想起了css里background属性的repeat。(太感谢这位同事了,一句话点醒了我)。于是我就到获取到的material里寻找这个贴图的相关属性,发现了wrapS和wrapT这两个,把他们设置为1。于是就天下太平了。

Paste_Image.png

希望对你有所帮助。
祝爸爸妈妈身体健康~

推荐阅读更多精彩内容