Getting started with WebGL-model export

The model used by WebGL is built in 3D modeling software, so how do these 3D models be exported for Three.js engine calls?

Three.js supports multiple formats of 3D files, such as Collada (. Dae) files, such as Three.js JSON-formatted files. SketchUp, CINEMA 4D These software natively support the export of model files to Collada format files, 3ds Max, Maya can install Opencollada plug-ins (https://github.com/KhronosGroup/ Opencollada/wiki/opencollada-tools) Allow yourself to export the Collada file, or you can use a third-party tool that can convert the model file to three.js JSON format (https://github.com/ Zfedoran/convert-to-threejs-json), which supports FBX (. fbx), Collada (. Dae), Wavefront/alias (. obj), 3D Studio Max (. 3ds) formats, But now it has some flaws, such as not supporting animation (animation), only support Lambert and Phong the two materials (material), as well as some small bugs, so it is not particularly recommended. Three.js official also provides blender, 3DS Max and Maya export plug-ins, the plug-in for Blender is the most perfect, such as 3DS Max, Maya is not exported animation, and Blender's plug-in can be exported, so here first The example of Blender under the Windows platform is to see how to export the model to three.js for use.

We first download Three.js's Blender Import and Export plugin (https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender), the official The Markdown file description should copy the plug-in to the%appdata%\blender foundation\blender\2.6x directory, but if the script folder cannot be found in that directory, copy the file to%program files%\ Blender foundation\blender\2.6x directory.

Then we click "File" on the Blender menu bar to select "User Preferences",

In the Blender User Settings panel (blender user Preferences), select the "Plugins (Addons)" option in the "categories (Categories)" category and the "Import – Export (Import-export)" Find the "import-export:three.js format" line and click "Save User Settings" to complete the installation of the Three.js plugin.

After the model is complete, click "File" on the menu bar to find "Export" select "Three.js (. js)", this time the interface becomes the export interface, in the bottom left corner of the page, the "Export three.js" category shows the elements to be exported , this time just choose the corresponding option according to your own needs.

We create the scene in the page, and then we can load out the model as we set up the camera and other information in the 3D software.

See the following code:

var scene = new three. Scene (),

Camera = new three. Perspectivecamera (Winwidth/winheight, 500, 100000),

Loader = new three. Jsonloader (),

Renderer

Loader.load ("Model.js", function (geometry, materials) {

var ground = new three. Mesh (geometry, new three. Meshfacematerial (materials));

Ground.castshadow = true;

Ground.receiveshadow = true;

Scene.add (ground);

});