# Maya files for JSONLoader

**URL:** <https://discourse.threejs.org/t/maya-files-for-jsonloader/1756>\
**Category:** Questions\
**Tags:** maya, exporter\
**Created:** [February 2, 2018, 4:34pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756 "2018-02-02T16:34:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 2, 2018, 4:34pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/1 "2018-02-02T16:34:39Z")

</div>

Hi there!

I’m quite new to three.js so maybe my problem has a simple solution. What I’m trying to do is use a JSONLoader and use geometry from Maya 2018. When I export models from Maya I’m using this plug-in →   
[https://github.com/mrdoob/three.js/tree/master/utils/exporters/maya](https://github.com/mrdoob/three.js/tree/master/utils/exporters/maya) which saves them to .json files. However, the JSONLoader seems to need .js files. I did try with .json file but it didn’t work. 😓  
I’m wondering if it is possible to export models from Maya to a .js format?

Just to note that in the past I’ve used .obj files that worked just fine, but for this project, I will need to animate my objects, so I believe this will not be an option.

Any help will be much appreciated. Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 2, 2018, 4:46pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/2 "2018-02-02T16:46:33Z")

</div>

The Maya JSON exporter will be removed with the next release. Export your models to `FBX` and use [FBXLoader](https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/FBXLoader.js) instead. This workflow also supports animations.

> <https://github.com/mrdoob/three.js/pull/13145>

---

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 3, 2018, 6:36pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/3 "2018-02-03T18:36:39Z")

</div>

Hi, thanks for the reply! Does the FBXLoader support morphTargets?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 3, 2018, 6:57pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/4 "2018-02-03T18:57:20Z")

</div>

Not sure about this. I think @looeee can help here.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 3, 2018, 10:10pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/5 "2018-02-03T22:10:32Z")

</div>

It’s not something I’ve tried yet. @may would you like to test this?  
If it’s not working we can add it to the loader.

---

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 4, 2018, 4:05pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/6 "2018-02-04T16:05:32Z")

</div>

@looeee I tried playing around with the FBX loader but maybe I’m too new to the whole concept of morphing and it didn’t work for me. What I tried doing is add a new material but soon found out that it won’t be as straightforward as the JSON one: [How to apply texture for .fbx model in three.js? - Stack Overflow](https://stackoverflow.com/questions/42610294/how-to-apply-texture-for-fbx-model-in-three-js) Which then confuses me how would I set the `mesh.material.morphTargets = true;` and this is where I had to stop.

The effect I’m trying to achieve is essentially: [three.js examples](https://threejs.org/examples/?q=morph#webgl_morphtargets_human) but instead of having the controls on the side, the morphing would be activated on click of a button.

An alternative I’m thinking about but am yet to test is export the maya files to .fbx and import that to blender, do the morphing there and export the files that way. The thing I’m worried about in that workflow is not to somehow corrupt the files over importing and re-exporting…

Anyways, thanks for following up on the topic 🙂

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 4, 2018, 10:51pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/7 "2018-02-04T22:51:35Z")

</div>

Yeah it’s best to keep the number of apps you are using to a minimum.

I’ll look into this when I have time, I’m a bit busy with other projects at the moment though.

But if you can create a simple test file (a cube that morphs into a bigger cube) and confirm that it works in other FBX viewers, such as FBX review, that would be a good start!

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 5, 2018, 9:23pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/8 "2018-02-05T21:23:08Z")

</div>

> [@may](#):
>
> An alternative I’m thinking about but am yet to test is export the maya files to .fbx and import that to blender, do the morphing there and export the files that way. The thing I’m worried about in that workflow is not to somehow corrupt the files over importing and re-exporting…

if you can get the morph targets loaded into Blender successfully, then using the [glTF blender exporter](https://github.com/KhronosGroup/glTF-Blender-Exporter/) with THREE.GLTFLoader is pretty well-tested against morph targets. Loading FBX in Blender can be dicey, though… Could also try one of these:

- [GitHub - facebookincubator/FBX2glTF: A command-line tool for the conversion of 3D model assets on the FBX file format to the glTF file format.](https://github.com/facebookincubator/FBX2glTF)
- [GitHub - iimachines/Maya2glTF: Maya to glTF 2.0 exporter](https://github.com/Ziriax/Maya2glTF) (haven’t tested this, i only have Maya LT which doesn’t support plugins)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 6, 2018, 6:35am UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/9 "2018-02-06T06:35:36Z")

</div>

> [@donmccurdy](#):
>
> [GitHub - facebookincubator/FBX2glTF: A command-line tool for the conversion of 3D model assets on the FBX file format to the glTF file format.](https://github.com/facebookincubator/FBX2glTF)

I tested this a bit and didn’t have great results, even with a static model and no animations. Still worth checking out though, maybe you will have better luck!

---

<div class="post-metadata">

**Author:** ![may](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@may](https://discourse.threejs.org/u/may)\
**Post date:** [February 21, 2018, 1:12pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/10 "2018-02-21T13:12:02Z")

</div>

Thank you all for your help and suggestions! 🙂

Here is a quick update on what happened with my morph target process:  
I have successfully managed to use fbx file exported from Maya and import objects and their morph targets in Blender. Then I used a JSON exporter and loaded the models in my three.js scene.

However, I had to reconsider the use of JSON loader (I might put the reason under a different topic). This encouraged me to go back to @donmccurdy 's reply and use the gltf loader (this and the fact that in the newest three.js r90 there are more examples of its use). I did that in the same way as the JSON - model and animate in Maya, then fbx export to Blender and finally Blender gltf export to the three.js scene. It might seem like a lengthy process but it is simple and it works for me - the morph targets work in the browser. I was thinking of trying the maya to gltf exporter but in the status I read: _Exports the position, rotation and scale of nodes, but no animation yet. Code for exporting blend-shape deltas exists, but is not fully working yet._

After that, I realised that I might use the morph targets technique to test if fbx loader morph targets will work (simply out of curiosity - I will keep on using gltf for my project for performance reasons). I did :` loader.load( ‘assets/models/fbx/sphere-morph-test.fbx’, function( fbx ) {

```
        fbx.scene.traverse( function ( node ) {

            if ( node.isMesh ) mesh = node;

        } );

        mesh.material.morphTargets = true;

        scene.add( fbx );

    }`

```

this would return an error saying that _Cannot read property ‘traverse’ of undefined_

I’m beginning to understand how morph targets work with three.js but I have more questions and to avoid confusion will post them under a different topic.

Thanks again!

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 21, 2018, 10:33pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/11 "2018-02-21T22:33:51Z")

</div>

> this would return an error saying that Cannot read property ‘traverse’ of undefined

The FBXLoader returns a different object than the GLTFLoader. Instead of

`fbx.scene.traverse(`

just do

`fbx.traverse(`

---

<div class="post-metadata">

**Author:** ![alekowel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alekowel/32/46219_2.png) [@alekowel](https://discourse.threejs.org/u/alekowel)\
**Post date:** [March 12, 2020, 5:18pm UTC](https://discourse.threejs.org/t/maya-files-for-jsonloader/1756/12 "2020-03-12T17:18:43Z")

</div>

Try Three.js fork Verge3D. It comes with superior Maya integration and visual scripting environment to create your apps in code-less manner.