当前位置:网站首页>Three. JS introductory learning notes 18: how to export JSON files with Blender

Three. JS introductory learning notes 18: how to export JSON files with Blender

2022-07-07 15:49:00 Jiang Duoduo_ Mostly Harmless

Reference tutorial :
https://www.jianshu.com/p/f7b45d9b957b
Need to be in blender Install Export three.js Plug in for
blender need 2.79 Version is OK

 Insert picture description here

Method 1: hold js Put in web page

Reference tutorial
https://blog.csdn.net/cj9551/article/details/80307426
https://www.jianshu.com/p/f7b45d9b957b

Webgl In the project , If a larger model is involved (obj,fbx,json etc. ), Tens of megabytes , Hundreds of megahours , Loading time is also unpleasant , and JSON Format model can effectively reduce the size of the model , Speed up loading .

The first method threejs Script

Threejs There are plug-ins on the official website , Support obj and fbx Format of the model into Json Format , The plug-in github The address is https://github.com/mrdoob/three.js/tree/dev/utils/converters, You need threemaster.zip Download to computer , Find the tool from the decompression ,zip Download address

https://codeload.github.com/mrdoob/three.js/zip/master

Usage method :

1、 install node Environmental Science It is not stated here Tutorial links https://www.runoob.com/nodejs/nodejs-install-setup.html

2、 Transfer what you need to format obj or fbx Files in three.js-master\utils\converters Next , Press shift Single right mouse button , Select open the command window here , Enter :obj format conversion :node obj2three.js objname( Yours obj Name of file ).obj ,fbx:node fbx2three.js fbxname( Yours fbx Name of file ).fbx Press enter to generate the corresponding Json file

fbx Models cannot be mapped , If you turn with a map, you will report an error ,Blob is not defined The error in this method has not been solved yet

The second method :Blender export

Blender Download address :https://www.blender.org/download/ Download on demand

Export plug-in download :https://pan.baidu.com/s/1k9KAo9pRfV-aAeasDl9I7A
Extraction code :niri

among io_three yes json Export plug-ins , Yes gltf Is export gltf Format plugin

Plug in installation tutorial :

1、 Installing a plug-in

Add the downloaded plug-in and decompress , take io_scene_gltf2,io_three Two folders , Put them in your blender Installation directory ,Blender\2.79\scripts\addons

2 、 Add plug-ins

Reference tutorial
https://www.jianshu.com/p/f7b45d9b957b

start-up Blender , File -> User Preferences -> Add-ons -> Inquire about Three, Check Import-Export: Three.js Format
Now editing - In preferences

 Insert picture description here
Save User Settings( preservation ).
 Insert picture description here

gltf Plug-in loading
 Insert picture description here

Click Save to export , You can use it. 3dmax Create a new one cube, Add the map by yourself , Then export the most basic with mapping 3ds Format , And then in blender Import this 3ds file , then Point file – export –threejs-json You can export

image.pngimage.png

OK, the model is exported , Next, let's load it :

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 );
    } );
原网站

版权声明
本文为[Jiang Duoduo_ Mostly Harmless ]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202130610086888.html