How to implement animated 3D objects? (fbx or gtfl)

[hajop]

I need your help. I have done the webxr tutorial with enthusiasm. (https://codelabs.developers.google.com/codelabs/ar-with-webxr/#0)

Now I would like to display animated objects. With blender I animated the object in fbx format and loaded it into an html with the FBXLoader of the three.js library. That works!
Unfortunately I did not succeed to use the fbx object with the same FBXLoader in the AR example of the tutorial.

Is there an example for this? Is gtlf object better usable than fbx objects? What needs to be changed in the code so I can use the loader?

Thanks a lot!

three.js FBX Loader:

var loader = new THREE.FBXLoader();
loader.load( 'models/fbx/AR_Tutorial.fbx', function ( object ) {

	mixer = new THREE.AnimationMixer( object );
        var action = mixer.clipAction( object.animations[ 0 ] );
	action.play();

	object.traverse( function ( child ) {

		if ( child.isMesh ) {

		       child.castShadow = true;
		       child.receiveShadow = true;

		 }

		} );

		scene.add( object );

	  } );

[eweitz]

@hajop, this would probably be better suited as a Stack Overflow question (tagged with webxr) or an issue in https://github.com/googlecodelabs/ar-with-webxr.

[darktears]

It's clearly off-topic and a Three.JS question but here is a fix most likely since I'm not sure you posted on Stack Overflow. In your render function (the one called with the RAF) :

//Update the mixers for the 3D model animations.
if (this._mixers.length > 0) {
    const delta = this._clock.getDelta();
    for (let i = 0; i < this._mixers.length; i ++) {
        this._mixers[i].update(delta);
     }
}

Don't forget to save the mixers into an attribute somewhere.

Please contact me directly, do not reply here.