How can I load a 3d model in Aframejs? It currently works fine in threejs

Question

I have created a 3d animated model, which I managed to run in threejs.

var loader = new THREE.FBXLoader();
loader.load( 'model.fbx', function ( object ) {              
     object.mixer = new THREE.AnimationMixer( object );
     mixers.push( object.mixer );
     console.log(object.animations.length);
     var action = object.mixer.clipAction( object.animations[ 0 ] );
     action.play();
     object.traverse( function ( child ) { 
       if ( child.isMesh ) { 
          child.castShadow = true;
          child.receiveShadow = true; 
       } 
     });
     scene.add( object );
});

It works perfectly fine on threejs, but how can I use it in aframe, I am trying to create AR app. I am not getting enough documentation, in AFrame I can display obj model on marker but aframe-extras doesn't seem to work, but Threejs FBX loader works fine. I need help to display threejs scene on on marker scan.

Answer 1

I used FBX2glTF to convert model to glTF and worked fine for me. https://github.com/facebookincubator/FBX2glTF

Answer 2

Regarding the topic: 3D models in a-frame

Try using the three.js JSON, or glTF formats. Both formats are recommended by the a-frame team in the docs.

I remember Don McCurdy pointing out that the fbx models are complicated and hard to interpret, that's why JSON formats came to webGL.

While working with ar.js i remember having no problems using Three.js JSON models with multiple animations, as well as glTF static/one-animation models.

You can easily export you model to gltf using khronos, or kupomans exporters, and three.js JSON using this one.

Furthermore, the glTF models work with the core a-frame library, without any additions !

---

Regarding fbx's, i've never got them to work properly, so since the other ones are designed for webGL i'd try them out.