Webgl項目中泳猬,如果涉及到較大的模型(obj批钠,fbx,json等)得封,幾十兆埋心,幾百兆大小時,加載時間也會讓人不爽忙上,而JSON格式的模型可以有效減少模型大小拷呆,加快加載速度。
第一種方法 threejs腳本
Threejs官網(wǎng)中有插件疫粥,支持obj和fbx格式的模型轉(zhuǎn)成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環(huán)境 此處不再陳述 教程鏈接https://www.runoob.com/nodejs/nodejs-install-setup.html
2娄蔼、把你需要轉(zhuǎn)格式的obj或fbx文件放到three.js-master\utils\converters下,按著shift單機鼠標(biāo)右鍵底哗,選擇在此處打開命令窗口岁诉,在出現(xiàn)的命令窗口中輸入 :obj格式轉(zhuǎn)換:node obj2three.js objname(你的obj文件的名字).obj ,fbx:node fbx2three.js fbxname(你的fbx文件的名字).fbx 回車在當(dāng)前目錄生成相應(yīng)的Json 文件
fbx模型不可以帶貼圖跋选,帶貼圖轉(zhuǎn)的話會報錯涕癣,Blob is not defined 此方法出現(xiàn)的錯誤目前我還未解決
別急我們還有第二種方法
第二種方法:Blender導(dǎo)出
Blender下載地址:https://www.blender.org/download/ 按需下載即可
導(dǎo)出插件下載:鏈接:https://pan.baidu.com/s/1k9KAo9pRfV-aAeasDl9I7A
提取碼:niri
拿走不謝!G氨辍W购!
其中io_three是json導(dǎo)出插件候生,有g(shù)ltf的是導(dǎo)出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插件加載
點擊保存后即可進行導(dǎo)出明肮,你可以用3dmax新建一個cube,自己加上貼圖缭付,然后帶貼圖導(dǎo)出最基本的3ds格式柿估,然后在blender中導(dǎo)入這個3ds文件,然后 點文件–導(dǎo)出–threejs-json即可進行導(dǎo)出
好了模型導(dǎo)出完了陷猫,接下來我們加載就行啦:
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 );
} );
小弟不才秫舌,如有疏漏,多多交流指導(dǎo)~~~~~~~