Problems to access the model animations

Questions
, ,
1

I found an awesome model on Sketchfab: PBR Velociraptor (Animated) - Download Free 3D model by Ferocious Industries (@ferociousindustries.matthias) [8f1744a] - Sketchfab

I saw in ‘More Information’ that the model has 26 animations. However, when I load it using GLTFLoader and console.log(model.animations), I see an empty array.

I tried using both .gltf and .glb formats. The model loads fine. Am I doing something wrong?
I noticed in the comments of the model that people are talking about the animations in Blender.

The code:

import { GLTFLoader } from 'three/examples/jsm/Addons.js';
import { gsapAnimations } from './animations';


export function models(scene) {
  let loader, velociraptor

  loader = new GLTFLoader()
  loader.load('/velociraptor_animated.glb',function ( gltf ) {

    velociraptor = gltf.scene;
    console.log(velociraptor.animations)
    velociraptor.rotation.y = -2
    scene.add(velociraptor);
    gsapAnimations(velociraptor);
  
  }, undefined, function ( error ) {
  
    console.error( error );
  
  } );

  return velociraptor;
}
2

I found the animations, but I can’t play them:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { gsapAnimations } from './animations';

export function models(scene) {
  let loader, velociraptor, animations, walkAnimation;

  loader = new GLTFLoader();
  loader.load('/velociraptor_animated.glb', function (gltf) {
    velociraptor = gltf.scene;
    animations = gltf.animations;
    velociraptor.rotation.y = -1.75;
    console.log(animations);

    gsapAnimations(velociraptor);

    scene.add(velociraptor);

    const mixer = new THREE.AnimationMixer(velociraptor);

    animations.forEach((clip) => {
      if (clip.name === "Walk") {
        walkAnimation = clip;
      }
    });

    if (walkAnimation !== null) {
      const action = mixer.clipAction(walkAnimation);
      console.log(action)

      action.timeScale = 2.0;
      action.play();

      console.log('Walking animation')
    } else {
      console.error('Animation "Walk" not found.');
    }

  }, undefined, function (error) {
    console.error(error);
  });

  return velociraptor;
}

I don’t know what I’m doing wrong :frowning:

3

I solved! I was forgetting to update the frames :sweat_smile:

2 Likes