Demo

This is what I came up with during my workflow experiment. (You'll need Chrome, Firefox or any recent&decent web browser)

Context

In order to learn more about the Three.js framework I decided to follow a complete modeling to rendering workflow, from 3ds Max to Three.js.

So I quickly started to model a Tron identity disk in Max, the reason being that it is quite a simple geometry yet having some specificities that will be usefull when playing with advanced rendering later, like glow and particles. The other reason being that I've been re-watching the movie just a few days ago.

Modelling

So I went on with a quick 2.5k poly mesh using a screenshot as blueprint. I've also decided to use smoothing groups to test the compatibility with Three.js on this point.

After that I did a quick UVW unwrap to start texturing the disk.

UVW unwrap

Diffuse preview

Once done, I applied a quick turboSmooth on the model before exporting to make the disk a bit rounder, increasing the polycount to about 10k, but since it's just a test scene it will be the only object displayed, so I'm not really worried about polycount optimisation just yet.

Export

Now this is the tricky part.

At first I tried using the Max exporter written by alteredq for Three.js.

But after a quick search and a few questions on the project's Github, I discovered that smoothing groups where not correctly exported unsing this technique, resulting in bad smooth shading when using the "use vertex normal" export option (Not checking this option would remove any face smoothing at all, while checking it would smooth the entire mesh, disregarding smoothing groups).

So 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.

To export the OBJ in max, use the following options :

And then convert your mesh using :

$ python convert_obj_three.py -i mesh.obj -o mesh.js

By default, smoothing groups will be kept, as long as you exported your OBJ correctly in Max.
Also note that you'll need Python 2.x and not Python 3.x to use the converter.

Import

Now to import you mesh.js into a Three.js scene, all you have to do is use their JSONLoader class.

var loader = new THREE.JSONLoader();

var createMesh = function( geometry ) 
{ 
	var zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
	zmesh.position.set( 0, 0, 0 );
	zmesh.scale.set( 3, 3, 3 );
	zmesh.overdraw = true;
	scene.add( zmesh );
};

loader.load( "mesh.js", createMesh );

To view the complete code, just open the demo's source code.

Recap

To sum up, the best workflow, from Max to Three.js is :

  • 1. Model in max
  • 2. Export mesh to OBJ in max
  • 3. Convert OBJ to JSON model using the python exporter
  • 4. Import your model using THREE.JSONLoader.