{"id":482,"date":"2016-06-26T04:15:44","date_gmt":"2016-06-25T20:15:44","guid":{"rendered":"http:\/\/www.cgdev.net\/blog\/?p=482"},"modified":"2024-05-24T00:44:59","modified_gmt":"2024-05-23T16:44:59","slug":"import-json-3d-models-and-animations-in-webgl-with-three-js","status":"publish","type":"post","link":"https:\/\/www.cgdev.net\/blog\/482.html","title":{"rendered":"Import Json 3D Models and Animations in WebGL with Three.js"},"content":{"rendered":"<p>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:<\/p>\n<h3>1. Export Models from 3ds Max<\/h3>\n<p>By using the <a href=\"\/json\/download.php\" target=\"_blank\" rel=\"noopener\">JD Exporter<\/a> 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.<\/p>\n<p><a href=\"\/json\/download.php\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignleft\" src=\"\/json\/images\/jde.gif\" alt=\"jde\" \/><\/a><\/p>\n<div class=\"clear\">\u3000<\/div>\n<h3>2. Load Model and Animation<\/h3>\n<p>Download the <a href=\"\/json\/download.php#jdloader\" target=\"_blank\" rel=\"noopener\">Json 3D Loader for Threejs<\/a>, include it in your html and create a loader:<\/p>\n<pre lang=\"a_c\"  escaped=\"true\">&lt;script src=\"three.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"JDLoader.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\nlet meshes = [], mixer;\r\nlet clock = new THREE.Clock; \r\nconst draco = new DRACOLoader();\r\ndraco.setDecoderPath('.\/build\/lib\/draco\/');\r\ndraco.setDecoderConfig({ type: 'js' });\r\n\r\nlet loader = new JDLoader();\r\nloader.setDRACOLoader(draco);\r\nloader.setPath('.\/');\r\n\/\/ ... the rest of your init code\r\n&lt;\/script&gt;<\/pre>\n<p>Now to load models into your scene, the class THREE.JDLoader will do everything for us, all you have to do is\u00a0specify the model file path and define the callback function which will be called when the model is loaded. The callback function has one data parameter that contains scene_root object, mixer and boundingSphere. <\/p>\n<pre lang=\"a_c\"  escaped=\"true\">\r\nloader.load(\"spline.jd\", function (data) {\r\n    if (data.scene_root)\r\n        scene.add(data.scene_root);\r\n\r\n    if (data.mixer)\r\n        mixer = data.mixer;\r\n});\r\n<\/pre>\n<p>Finally we must call its update function in the animation loop:<\/p>\n<pre lang=\"a_c\"  escaped=\"true\">function animate()\r\n{\r\n    let delta = clock.getDelta();\r\n    if (mixer) \r\n       mixer.update(delta);\r\n    \/\/ ... the rest of your code\r\n}<\/pre>\n<p>And that&#8217;s it. You can add code to blend between multiple animations by using the AnimationMixer class.<\/p>\n<h3>3. Full Example<\/h3>\n<p><a target=\"_blank\" href=\"\/json\/demo\/anim.html\">Spline Animations<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 JD Exporter you would be able to export assets from 3ds Max easily. The exporter supports many useful [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,10,29],"tags":[16,28],"class_list":["post-482","post","type-post","status-publish","format-standard","hentry","category-max","category-script","category-webgl","tag-animation","tag-json"],"_links":{"self":[{"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/comments?post=482"}],"version-history":[{"count":0,"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cgdev.net\/blog\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}