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 or GLTF Exporter you would be able to export assets from 3ds Max 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)
        {
             var obj = data.createObject(i);
             scene.add(obj);
             if (obj.geometry.animations)
             {
                var mixer = new THREE.AnimationMixer(obj);
                mixers.push(mixer);
                var action = mixer.clipAction( obj.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) User defined data
(2) Morph Target (Done. In next version we will have both Morph Targets and Skinned Mesh in the same model!)
(3) Lightmap (Done)
(4) Vertex Animation Texture
(5) Custom Shader Materials
(6) Binary Format (Done. Now we can export single binary .glb for glTF format)

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?

  25. David Tully says:

    there is no JDLoader in three js. Any suggestions?

  26. cat3433 says:

    Hello ali.
    direct x/expoter
    Symmetry and skins that can be used with 3dsmax
    The behavior was bad.
    Is the specification of max changed?

  27. 随笔 says:

    3dmax导出时,坐标系刻度的值没有导出,是什么原因了?

  28. Sofia Thomas says:

    During my research and experience, I found that only two file formats could contain the animation (to be used in three.js): Json and Dae.

  29. Steven Devolder says:

    Is there a modular version of the JDLoader ?and of the the example script ?

  30. TomL says:

    Is there a 3dx 2022 max exporter ?

  31. RichardGes says:

    I’m not sure where you’re getting your info, but good topic. I needs to spend some time learning more or understanding more.
    Thanks for wonderful info I was looking for this info for my mission.

  32. Portableeuh says:

    from a printed book, reproduction

  33. lasixGes says:

    I am no sure where you’re getting your information, but great topic. I needs to spend some time learning more or understanding more.
    Thanks for great information I was looking for this information for my mission.

  34. propecia-Ges says:

    I’m not sure where you’re getting your information, but good topic. I needs to spend some time learning much more or understanding more.
    Thanks for excellent information I was looking for this info for my mission.

  35. pornodom.top says:

    As a Newbie, I am continuously exploring online for articles that can be of assistance to me.

  36. antibioticsGes says:

    I am not sure where you’re getting your information, but great topic.

  37. Alif says:

    I need A Blender Version!!!

    Leave a Reply to Alin Cancel reply

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