Maya files for JSONLoader

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 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. :sweat:
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! :slight_smile:

The Maya JSON exporter will be removed with the next release. Export your models to FBX and use FBXLoader instead. This workflow also supports animations.

3 Likes

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

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

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.

2 Likes

@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 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 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 :slightly_smiling_face:

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!

if you can get the morph targets loaded into Blender successfully, then using the 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:

1 Like

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!

2 Likes

Thank you all for your help and suggestions! :slightly_smiling_face:

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!

3 Likes

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(

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