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 Models

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, geometries 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("model.jd",       // your model file
            function (data)   // data: { materials, jd_materials, geometries, boundingSphere }
            {
               var multiMaterial = new THREE.MultiMaterial(data.materials);
               for (var i = 0; i < data.geometries.length; ++i)
               {
                  var mesh = new THREE.SkinnedMesh(data.geometries[i], multiMaterial);
                  meshes.push(mesh);
                  scene.add(mesh);
               }
            });

3. Load Animations

Now we need THREE.AnimationMixer to play the animation.

loader.load("model.jd",
            function (data)
            {
               var multiMaterial = new THREE.MultiMaterial(data.materials);
               for (var i = 0; i < data.geometries.length; ++i)
               {
                  var mesh = new THREE.SkinnedMesh(data.geometries[i], multiMaterial);
                  meshes.push(mesh);
                  scene.add(mesh);

                  if (mesh.geometry.animations)
                  {
                     var mixer = new THREE.AnimationMixer(mesh);
                     mixers.push(mixer);
                     mixer.clipAction(mesh.geometry.animations[0]).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.

4. Full Example

Basic Animation

5. Custom Shader Example

TODO: provide the original materials ( data.jd_materials ) to help creating custom shader materials.

13 comments on “Import Json 3D Models and Animations in WebGL with Three.js”

  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!

Leave a Reply

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