How to load a 3d model in aframejs? He currently works great in three

Question

I created a three-dimensional animated model that I managed to run three times.

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 fine on threejs, but how can I use it in aframe, I'm trying to create an AR application. I do not get enough documentation, in AFrame I can display the obj model on the marker, but aframe-extras does not work, but the Threejs FBX loader works fine. I need help to display a scene with three objects when scanning a marker.

Answer 1

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

Answer 2

Regarding the topic: 3D models in the frame

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

I remember how Don McCurdy pointed out that fbx models fbx complex and hard to interpret, so JSON formats appeared in webGL.

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

You can easily export your model to glTF using khronos or kupomans , and three.js JSON using this one .

In addition, glTF models work with the a-frame core library without any extras!

---

As for fbx's, I never made them work properly, since others are for webGL, I would try them.