GLTF animation is not working in Three js

Question

I'm struggling to get an animation to play together with my GLTF 3D model. Most similar issues that I've seen on Stack Overflow are relating to the mixer not being updated. Which is not the problem in my case.

This is my fiddle: https://jsfiddle.net/rixi/djqz1nb5/11/

import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js";

import { GLTFLoader } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js";

import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js";


let clock, controls, scene, camera, renderer, mixer, container, model;


initScene();
animate();

function initScene() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  clock = new THREE.Clock();
  renderer = new THREE.WebGLRenderer();
  controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  container = document.getElementById("container");

  container.appendChild(renderer.domElement);
  renderer.setSize(window.innerWidth, window.innerHeight);
}

scene.background = new THREE.Color("#f8edeb");

// LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);

//HELPERS 
const axesHelper = new THREE.AxesHelper(5);
let gridHelper = new THREE.GridHelper(30, 30);

scene.add(light, axesHelper, gridHelper);

//GLTF START

const GLTFloader = new GLTFLoader();

GLTFloader.load("https://richardlundquist.github.io/library/alice_TEST2.glb", function (gltf) {
  model = gltf;

  mixer = new THREE.AnimationMixer(gltf.scene);

  mixer.clipAction(gltf.animations[0]).play(); 


  scene.add(model.scene);
});


camera.position.set(0, 20, 50);


function animate() {
  requestAnimationFrame(animate);

  let delta = clock.getDelta();

  if (mixer) {
    mixer.update(clock.getDelta());
  }

  renderer.render(scene, camera);

 
}

There is no error in the console. The animation is listed in the array and plays as it should in Don McCurdy's GLTF viewer (https://gltf-viewer.donmccurdy.com/)

But for some reason it will not play in my three js setup. Any clues? I would be extremely grateful for any help or hints on how to solve the issue.

Answer 1

I found two critical errors here.

1. At the top of your code, you pull in Three r122 with GLTFLoader r132. These need to be the same revision. Try setting them all to r132.

2. You call getDelta() twice here:

  let delta = clock.getDelta();

  if (mixer) {
    mixer.update(clock.getDelta());
  }

The second call to getDelta() comes immediately after the first, so always returns zero delta time. Thus, the animation never moves forward.