Exporting models with Max – Metropolia / Ulla Sederlöf

Here you can find all of the loaders provided in GitHub:https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

Here are the examples I am using as an reference:http://threejs.org/examples/

This guide covers how the models can be exported from MAX. Blender is a bit easier and a lot of online tutorials are provided, hence the need for a MAX tutorial

The following formats / model loaders are covered:1. COLLADA 2. Obj 3. JSON 4. Converting Obj -> JSON with Python5. ObjectLoader (multiple models)6. Three.js Online Editor

1. loader / collada / loader / collada / keyframe loader / collada / skinning

Support for animation: YES, morph, skin and keyframe

COLLADA (*.dae) – The Digital Asset Exchange Formathttp://en.wikipedia.org/wiki/COLLADA

Loader:https ://raw.github.com/mrdoob/three.js/master/examples/js/loaders/ColladaLoader.js

Loader example:http://threejs.org/examples/#webgl_loader_colladahttp://mrdoob.github.io/three.js/examples/#webgl_animation_skinning

Exporter:https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools

How to export?Autodesk Collada Exporter (native, no install, but not so good) OR OpenCollada Exporter - Recommended

1. Get OpenCollada from the exporter link.

2. Save the plugin to your “3ds Max 2014/Plugins” folder. Start your max.

3. You should now see the exporter whe you go to: Export -> OpenCOLLADA(*.DAE)

4. Export:

5. Use the loaders and look at the examples: “var loader = new THREE.ColladaLoader(); …”

6. Check the examples how to access your animation data. This varies depending are you using morph targets, skinning or keyframing with your models.

Problems – Missing textures:

- Check and correct path to textures if needed in the COLLADA file- Multi/Sub-Object Materials don’t always work that well.. try something else.- Make sure the objects, materials and textures in the scene do not contain any spaces or weird characters

Problems – Other:- If your model is too small/big, scale it. Check my example of the alien - Hesus.

BONED/RIGGED MESH

If you want a boned / rigged mesh you need the openCollada exporter. The built in Autodesk Collada Exporter doesn’t work.

READ: http://www.packtpub.com/article/mesh-animation

Here is my example of a model with skinned animation: - 3ds Max Model using Physique Modifier- Standard Material - Unwrap UVW with one Diffuse map and one Bumpmap- Mesh loaded with the colladaLoader- Animation accessed with morphtargets

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_collada_hesus.html

2. loader / obj loader / obj / mtl

Animation: NO, OBJ is not an animation format

OBJ (*.obj) – http://en.wikipedia.org/wiki/Wavefront_.obj_file

Loader:https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js

Material Loader:https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/OBJMTLLoader.js

Loader examples:http://threejs.org/examples/webgl_loader_obj.htmlhttp://threejs.org/examples/webgl_loader_obj_mtl.html

How to export?3ds max -> Export -> OBJ

1. Export:

2. Use the loaders and look at the examples: “var loader = new THREE.OBJMTLLoader();…”

3. If you don’t care about the material, look at the first obj loaderexample.

4. If you want the export also the materials, please check the webgl_loader_obj_mtl example and check that you have also downloaded the OBJMTLLoader.js file.

NOTE!!!

- After you have exported the materials, first check where the exporter placed the materials. Then YOU MUST edit your file.mtl file paths to the material folder! —> change the path and check the material names!! – look at the XXXXX.mtl file

Here is my example Hesus – no material:- Hesus exported to OBJ format – no materials in obj- Loaded with OBJLoader- Texture added in three

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_obj_hesus.html

Here is my example Hesus – with material:- Hesus exported to OBJ format with materials- Loaded with OBJMTLLoader

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_obj_mtl_hesus.html

3. loader / json / (max)

Animation: NO, but can be done with Blender threeJSExporter

JSON (*.json/*.js): JavaScript Object Notationhttp://en.wikipedia.org/wiki/JSON

Loader:JSONLoader. Comes with the three.js no need to load separately.

Exporter:https:// github.com/mrdoob/three.js/blob/dev/utils/exporters/max/ThreeJSExporter.ms

NOTE! No animations can be exported with the max version of the exporter :/

Loader examples:http://threejs.org/examples/webgl_loader_json_blender

How to export?3ds max -> Run Max Script

1. Download the exporter and save it on your computer

2. MaxScript -> Run Script… -> ThreeJSExporter.ms

3. Look at the examples: “var loader = new THREE.JSONLoader();

Problem1 – Missing textures:- Usually the textures are missing when exporting with the threeJSExporter- Use the JSON exporter to export your geometry and uv mapping and handle loading

textures yourself, by hand- In the loader's callback, create your mesh using both the geometry and the material you

created. Check out my code as an example.

Problem 2 - Smoothing:- Smoothing groups are not exported well with the exporter - If you check the “use vertex normals” option smoothes the entire mesh- If you unceck it, no smoothing is provided at all- If these options are not for you, the you have to: first export to OBJ in max, and then

convert the OBJ to a Three.js JSON model using the python converter provided with Three. Check the next topic.

Problem 3 – No Animation:- No animation is provided with the max exporter- Try COLLADA- Use Blender- If this options are not for you, the you have to: first export all of the morph targets to

OBJ in max, and then convert the OBJ to a Three.js JSON model using the python converter provided with Three. Check the next topic.

Here is my example of a model exported with the threeJSExporter:

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_json_max.html

4. loader / json / objconverter

Animation: YES, Morph Targets

When exporting a mesh from Max to Three.js, the best workflow so far is to first export to OBJ in max, and then convert the OBJ to a Three.js JSON model using the python converter provided with Three.

Max > OBJ > ThreeJs

http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html

http://stackoverflow.com/questions/17000368/can-i-export-a-model-with-its-animation-from-max-to-json

Since OBJ is not an animation format, you have to export each morph target object individually as a .obj file and populate the morph targets with the python converter.

Loader:JSONLoader. Comes with the three.js no need to load separately.

Loader examples:http://threejs.org/examples/webgl_loader_json_objconverter.html

Converter:https:// github.com/mrdoob/three.js/blob/master/utils/converters/obj/ convert_obj_three.py

Install python interpreter if you are using Windows (Mac OS X has Python installed):http ://www.python.org/download /

To run it: path where python.exe is and the options

How to export?

1. Export the object as *.obj. If you have animations, export each morph target object individually as a *.obj file - also the unmorphed mesh!

2. Remember to check the material paths!!

3. To populate your morph targets, pass all of the files to the python converter script found in /utils/converters/obj:

python convert_obj_three.py -i unmorphedmesh.obj -m 'morphmesh1.obj morphmesh2.obj' -o compiledTargets.js

or with just one object:

python convert_obj_three.py -i yourMesh.obj -o yourMesh.js

4. Check AGAIN the material paths agaian from the populated yourMesh.js file. Change the paths or move the textures to the correct path for the materials to work is missing.

5. Look at the examples how to load the file: “var loader = new THREE.JSONLoader();

6. The easiest approach in using morph animation is to use a THREE.MorphAnimMesh class + store the mesh in a morph array and animate.

Here is my example Hesus – no animation:- Hesus exported to one OBJ file– converted to JSON- Loaded with JSONLoader- No Morphs, just single

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_objtojson_max.html

Here is my example Hesus – morphing:- Hesus exported to three OBJ files- Each of the files contain Hesus is a different pose (mouth open etc)- all converted to one JSON file- Morphtargets populated with python and saves as one JSON file- Morphs Animated using the MorhAnimMesh class

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_objtojson_max_animation.html

FINALLY, BOTH SKINNED ANIMATION AND MORPHS at the same time?????

It is currently impossible to have both a boned / rigged mesh and morph targets coming from 3ds max, with Blender it is possibile. Check:

http://threejs.org/examples/#webgl_animation_skinning_morph

5. loader / scene loader / scene / blender

What about loading a whole scene at once. Can it be done? Yes. SceneLoader takes a JSON file and asynchronously loads the assets in it:

http://threejs.org/examples/#webgl_loader_scene

http://threejs.org/examples/#webgl_loader_scene_blender

6. from three.js online editor to JSON format - ObjectLoader

Editor:http://threejs.org/editor/

Loader examples:http ://stuff.benjamin-thaut.de/web3d/threejs/import /

var sceneLoader = new THREE.ObjectLoader(); sceneLoader.load( './scene.js', function ( s ) { scene = s; init(); animate(); } );

How to use it?

1. Create the model using online editor or import the model there and edit it. Please use Chrome

2. File – Export Scene (or Geometry or Object)3. Save the generated file - filename.js – my example4. The generated file doesn’t store the textures 5. Load with THREE.ObjectLoader()

http://users.metropolia.fi/~ullamu/three/examples/webgl_loader_json_objectLoader.html