When you use 3ds Max to create models with animations, and you need a rapid workflow to load them in WebGL with Three.js, I recommend the following steps:

1. Export Models from 3ds Max

By using the Json Exporter you would be able to export assets from 3ds Max to the Json 3D Format easily. The exporter supports many useful features such as procedural textures, skin and physique modifiers, multiple animation clips, uv transform and much more.

jde

2. Load Model and Animation

Download the Json 3D Loader for Threejs, include it in your html and create a loader:

<script src="three.js"></script>
<script src="JDLoader.min.js"></script>
<script>
var meshes = [];
var mixers = [];
var clock = new THREE.Clock; 
var loader = new THREE.JDLoader();
// ... the rest of your init code
</script>

Now to load models into your scene, the class THREE.JDLoader will do everything for us, all you have to do is specify the model file path and define the callback function which will be called when the model is loaded. The callback function has one object parameter that contains materials, jd_materials, objects and boundingSphere. The data.materials is a Three.js MeshPhongMaterial array while the data.jd_materials is the raw Json3D material array. You should parse the data.jd_materials if you need to create your own material such as ShaderMaterial.

loader.load("anim.jd", 
            function (data)
            {                            
                for (var i = 0; i < data.objects.length; ++i)
                {
                    if (data.objects[i].type == "Mesh" || data.objects[i].type == "SkinnedMesh")
                    {
                        var mesh = null;
                        var matArray = createMaterials(data);
                        if (data.objects[i].type == "SkinnedMesh")
                        {
                            mesh = new THREE.SkinnedMesh(data.objects[i].geometry, matArray);
                        }
                        else // Mesh
                        {
                            mesh = new THREE.Mesh(data.objects[i].geometry, matArray);
                        }
                        meshes.push(mesh);
                        scene.add(mesh);

                        //Now we need THREE.AnimationMixer to play the animation.
                        if (mesh && mesh.geometry.animations)
                        {
                            var mixer = new THREE.AnimationMixer(mesh);
                            mixers.push(mixer);
                            var action = mixer.clipAction( mesh.geometry.animations[0] );
                            action.play();
                        }
                    }
                    else if (data.objects[i].type == "Line")
                    {
                        var jd_color = data.objects[i].jd_object.color;
                        var color1 = new THREE.Color( jd_color[0] / 255, jd_color[1] / 255, 
                                                      jd_color[2] / 255 );
                        var material = new THREE.LineBasicMaterial({ color: color1}); 
                        var line = new THREE.Line(data.objects[i].geometry, material);
                        scene.add(line);

                        if (line.geometry.animations)
                        {                                        
                            var mixer = new THREE.AnimationMixer(line);
                            mixers.push(mixer);                                        
                            var action = mixer.clipAction(line.geometry.animations[0]);
                            action.play();
                        }
                    }
                }        
            });

Finally we must call its update function in the animation loop:

function animate()
{
   var delta = clock.getDelta();
   for (var i = 0; i < mixers.length; ++i)
      mixers[i].update(delta); 
  // ... the rest of your code
}

And that's it. You can add code to blend between multiple animations by using the AnimationMixer class.

3. Full Example

Spline Shape, Mesh and SkinnedMesh Animations

4. TODO:

(1) Vertex Animation Texture
(2) Morph Target
(3) Lightmap
(4) Custom Shader Example: provide the original materials ( data.jd_materials ) to help creating custom shader materials.

Comments

  1. nash says:

    Hi, I try follow your tutorial and I use the localhost to preview the result, but the result always blank. any step that I miss to complete, or any other setting not correct? hope u can help me to solve this problem

  2. Alin says:

    See the full example code

  3. M says:

    What type of model imports does this code handle? Only the max 3d exports or are there different types as well this can handle?

    I am trying to find a good loader that can handle multiple types in three.js any advice?

  4. Somebody Someone says:

    THIS IS AWESOME!!!!!!!! Thanks for your work!

  5. Cyrus says:

    Hi, I had try on the example code. loading a JD file which is got multi material and multi animations. but somehow it didn’t show on the scene. i sure that JD data is loaded as i saw the object data by using console.log. it seems can’t draw the object out. Any idea?

    Thanks

  6. Tony says:

    This looks like an amazing piece of code, sadly I can’t seem to get it to work either (using 3d studio max 2017) and the latest build of three.js

    Furthermore, in what way is the *.jd different from the *.js 3d-file format you get from other exporters?

  7. vvsr says:

    everything works fine but textures,they are completely messed up,what did i do wrong?

  8. Ali says:

    Thank for the code it’s work.
    But for texture in 3d max when i change Tiling i can’t see the changes in the Three.js.
    am i missing something?
    Thanks

  9. Sergio says:

    Hallo! thanks for your Post. I have a question: how can i use the animationMixer to play diferent animations? Thx.Sergio

  10. Sampsa says:

    Nice tutorial and I got it working. Now I’m just thinking how can I get animation not to loop or play play backwards, because I have door animation that opens and I want to close it also.

    Or can I somehow use another animation to close it? How Can I play different animations?

    Thanks: Sampsa

  11. Glenn says:

    Holy crap this actually works, first time I tried. Perfect materials, perfect animation. Took fbx from motionbuilder into 3ds 2016, out with your exporter. Great work !!!

  12. Dee says:

    Great job! Big help and to echo everyone else, it actually worked first try!

  13. vladlen says:

    Show please a piece of code for using “data.jd_materials”. Thank you.

  14. Jim says:

    Your Contact Us form is not working. If you can do paid consulting on exporting from 3ds max to three.js, please contact me. Thanks!

  15. pom says:

    Hello,
    Thanks for this great article.
    Is the JDLoader script on Github ?

  16. pom says:

    How to solve UV texture not repeated :

    Unminify and add this line:
    c.wrapS = c.wrapT = THREE.RepeatWrapping;

    Following this one :
    v.setCrossOrigin(d.crossOrigin), c = v.load(b + m.maps[n].file)

  17. Patrick says:

    TO EVERYONE:

    I wrangled with this for a while in my own THREE App setup, I wasn’t seeing the model render unless I changed the material and turned on wireframe, so to get it working I had to use the three.min.js file on the web page for demo, it seems to be the only one that works with the JDLoader file.

  18. Alexander says:

    Hallo!
    I have this error:
    “JDLoader.min.js:1 Uncaught TypeError: THREE.FileLoader is not a constructor
    at THREE.JDLoader.load (JDLoader.min.js:1)
    at initMesh (main.js:48)
    at init (main.js:311)
    at main.js:319”

    Can you help me?

  19. monad says:

    How can I set the limitation of max Zoom and min Zoom?

  20. xu says:

    Hello! I have a scene , my model contains two UVs information, one is a DiffuseTexture, the other is a LightmapTexture. The question is, I can only Export the Diffuse Texture, but I can’t export the Lightmap Texture to ThreeJS. So I want to know how to export Json Model’s LightmapTexture, or how to add the Lightmap Texture to a JD file.Thanks!

  21. StenpKing says:

    Hello,Could you mind get your jsloader source file to me?please,is very nice skill i want to learn it.

  22. gxl says:

    Thanks for this great article.
    I have this error:
    Cannot read property ‘extractUrlBase’ of undefined.
    Can you help me?

  23. ali Tan Ucer says:

    Hi, I think there is a bug on 3dsmax plugin. The Editable Spline objects are exported as Mesh.

  24. Donali says:

    Hi.I try to Load My .jd Model into three.js but nothing happen and dont shows the model.
    may i send you my model’s file?

    Leave a Reply

    Your email address will not be published. Required fields are marked *