Webgl项目中,如果涉及到较大的模型(obj,fbx,json等),几十兆,几百兆大小时,加载时间也会让人不爽,而JSON格式的模型可以有效减少模型大小,加快加载速度。
第一种方法 threejs脚本
Threejs官网中有插件,支持obj和fbx格式的模型转成Json格式,插件的github地址是https://github.com/mrdoob/three.js/tree/dev/utils/converters,你需要threemaster.zip下载到电脑,从解压中去找工具,zip的下载地址
https://codeload.github.com/mrdoob/three.js/zip/master。
使用方法:
1、安装node环境 此处不再陈述 教程链接https://www.runoob.com/nodejs/nodejs-install-setup.html
2、把你需要转格式的obj或fbx文件放到three.js-master\utils\converters下,按着shift单机鼠标右键,选择在此处打开命令窗口,在出现的命令窗口中输入 :obj格式转换:node obj2three.js objname(你的obj文件的名字).obj ,fbx:node fbx2three.js fbxname(你的fbx文件的名字).fbx 回车在当前目录生成相应的Json 文件
fbx模型不可以带贴图,带贴图转的话会报错,Blob is not defined 此方法出现的错误目前我还未解决
别急我们还有第二种方法
第二种方法:Blender导出
Blender下载地址:https://www.blender.org/download/ 按需下载即可
导出插件下载:链接:https://pan.baidu.com/s/1k9KAo9pRfV-aAeasDl9I7A
提取码:niri
拿走不谢!!!!
其中io_three是json导出插件,有gltf的是导出gltf格式的插件
插件安装教程:
1、 安装插件
加下载的插件解压,将io_scene_gltf2,io_three两个文件夹,将它们放到你的blender安装目录下,Blender\2.79\scripts\addons
2 、加载插件
启动 Blender , File -> User Preferences -> Add-ons -> 查询 Three, 勾选 Import-Export: Three.js Format
Save User Settings(保存).
gltf插件加载
点击保存后即可进行导出,你可以用3dmax新建一个cube,自己加上贴图,然后带贴图导出最基本的3ds格式,然后在blender中导入这个3ds文件,然后 点文件--导出--threejs-json即可进行导出
好了模型导出完了,接下来我们加载就行啦:
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("../model/eee.json", function ( obj ) {
console.log(obj);
scope.obj=obj;
obj.scale.set(3,3,3);
scene.add( obj );
} );