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

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

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

Save User Settings( preservation ).

gltf Plug-in loading

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

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 );
    } );