Fbx animations (copied from example, with same model) aren't working?

Questions
,
1

I’m trying to follow threejs.org/examples/webgl_loader_fbx and import an fbx with an animation.

Im using the same fbx as the example, and I am able to display the model. Just no animations. I do:

addModelToScene(position, string, materialName)
  {
    //var loader = new THREE.ObjectLoader();
    var localThis = this;

  //const texture = new THREE.TextureLoader().load( "./src/images/cartdiff.jpg");
  const texture = new THREE.TextureLoader().load( "./src/images/DeadEnds_globalmaterial.png");
  texture.encoding = THREE.sRGBEncoding;

  var material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughness: 0.5,
    metalness: 0.5,
    refractionRatio: 0.98,
    envMapIntensity: 1.0,
    map: texture,
    //normalMap: materials.normalMap,
    //roughnessMap: materials.roughnessMap,
    //metalnessMap: materials.metalnessMap,
    //envMap: me.reflectionCube,
    normalScale: new THREE.Vector2( 1, -1 )
});

    switch(materialName)
    {
      case 'globalMat':
      material = new THREE.MeshPhysicalMaterial({
          color: '#00ff00',
          metalness: .58,
          emissive: '#000000',
          roughness: .05,
        });
        model.material.needsUpdate = true;

        break;
      default:
      console.log("no material for custom model");
        break;
    }
    var geoFromScene = new THREE.Geometry();
    var FBXLoader = require('three-fbx-loader');
    var loader = new FBXLoader();
    loader.load( string, function ( object ) {
                        localThis.mixer = new THREE.AnimationMixer( object );
                        var action = localThis.mixer.clipAction( object.animations[ 0 ] );
                        action.play();

                        object.traverse( function ( child ) {
                            if ( child.isMesh ) {
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        } );

              object.position.set(5,5,-8)
              object.scale.set(0.1, 0.1, 0.1);
                        localThis.scene.add( object );


                    } );
    ```

Then in my animate() function which IS CALLED every frame, I do:

    animate() {

        this.draw();

        const resistance = 0.002;
        this.target.x = ( 1 - this.mouse.x ) * resistance;
        this.target.y = ( 1 - this.mouse.y ) * resistance;

        this.camera.rotation.x += 0.05 * ( this.target.y - this.camera.rotation.x );
        this.camera.rotation.y += 0.05 * ( this.target.x - this.camera.rotation.y );

        //anything glass
        this.sphere.visible = false;
            //this.refractSphereCamera.clear();
            //this.refractSphereCamera.updateCubeMap( this.renderer, this.scene );
          //this.refractSphereCamera.update();
          this.sphere.visible = true;

        this.renderer.render(this.scene, this.camera);

        requestAnimationFrame(this.animate.bind(this));
        console.log(this.mixer);
        this.mixer.update(this.clock.getDelta());
      }

Yet nothing. What is happening here? Have the model, just no animations. Console.log mixer DOES return the mixer.
2

Hi, Thomas
Please show me your full code.
I am not sure what is the wrong.
If localThis is a global variable, then you must call

function animate() {
    requestAnimationFrame(function() { animate(); }); // !Important
    .........
    if(localThis) {
        localThis.mixer.update(this.clock.getDelta());
    }
}

Regards

3

Hi niao, thanks. localThis is a local reference to this that I use in my loader.load function, because I can’t reference the global this directly. I’ll post more code above, but I really haven’t done anything the example hasn’t, other than the fact that Im working in node js

4

Questions:
Every time console.log(this.mixer); is printed continuously, right?
Please check it.

5

Yes, this.mixer is printed many times. I can copy that output if it would help

6

At animate()

var delta = this.clock.getDelta();
console.log(delta); // Check every time the value is changed?
this.mixer.update(delta);

7

Yup, did that too. It does print the delta

8

Sorry, You need to share your code file.
And please refer or compare with https://github.com/mrdoob/three.js/blob/7e0a78beb9317e580d7fa4da9b5b12be051c6feb/examples/webgl_loader_fbx.html

9

Niao, as I mentioned, I have copied my code VERBATIM from https://github.com/mrdoob/three.js/blob/7e0a78beb9317e580d7fa4da9b5b12be051c6feb/examples/webgl_loader_fbx.html

My code is at

10

Niao, sorry, just fixed the link

11

Can you please share your code so it is actually possible to execute it? AFAICS, you just shared your scripts and model files so it’s not possible to do any debugging.

12

/cc

13

Of course - this is the whole project folder. Just cd into an do npm run start https://drive.google.com/file/d/1g32wZ9lBNShjwd_USpwoj39WCAX4yTNv/view?usp=sharing