Animating 3D Model that comes with animation

Questions
1

I am new to threejs and am having trouble figuring out how to add a 3d model’s animation to my code.

I am using Angular 6+ with npm installed threejs and have successfully added my gltf model to my test website and have also added OrbitControls, so I can move the object around.

This is the model:

How would I add the animation that comes with the model?

1 Like
2

When using GLTFLoader, animations are stored in the gltf object. You can access and playback them like so:

const loader = new GLTFLoader();
loader.load( 'myModel.glb', ( gltf ) => {

    const model = gltf.scene;
    const animations = gltf.animations;

    mixer = new THREE.AnimationMixer( model );

    const action = mixer.clipAction( animations[ 0 ] ); // play the first animation
    action.play();

} );

It’s then necessary to update the instance of AnimationMixer in your animation loop via:

const delta = clock.getDelta();
mixer.update( delta );
3 Likes
3

Ok great thanks, I have it animating at this point, however, it seems that the animation doesn’t seem to be working as intended. It’s a little hard to describe what the animation looks like,Is there a place where I can show my code or a video of what it looks like?

I’m not sure if I set the model size correctly based off what the animation looks like. Here’s a screenshot of what the model looks like during a part of its animation. It looks part of the world is stuck inside of the world.

image
image745×855 477 KB

This is my .ts file:

export class PanelTwoComponent implements OnInit {




  constructor() { }

  ngOnInit() {
    let scene, camera, renderer;
    const worldContainer = document.getElementById('world');
    const clock = new THREE.Clock();

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    // camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);
    camera = new THREE.PerspectiveCamera(.1, 1 / 1, .1, 6000);
    camera.rotation.y = 45 / 180 * Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;




    const control = new OrbitControls(camera, worldContainer);


    renderer = new THREE.WebGLRenderer({ antialias: true });


    renderer.setSize(worldContainer.clientWidth, worldContainer.clientHeight);
    scene.background = new THREE.Color(0x000000);


    document.getElementById('world').appendChild(renderer.domElement);
    let loader = new GLTFLoader();

    loader.load('./../../../assets/3d/scene.gltf', function (gltf) {


      console.log(gltf);

      //The Model
      let world = gltf.scene.children[0];
      //The Models Animation
      const animation = gltf.animations[0];

      const mixer = new THREE.AnimationMixer(world);
      const action = mixer.clipAction(animation);

      action.play();

      // world.scale.set(10, 10, 10);
      scene.add(gltf.scene);

      animate();

      function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate);

        const delta = clock.getDelta();
        // console.log(delta);


        mixer.update(delta);




      }
    });

  }
}
4

I see the same animation when using the following three.js based gltf viewer and the Babylon.js sandbox. So it seems the asset is not exported correctly from Sketchfab.

5

Ah bummer, I guess I have to use a new model then.

6

The sketchfab glTF converter is a bit hit and miss. You could try downloading the original .osgb file and converting it with another tool - maybe this one?

3 Likes