GLTF exported from Blender won't animate

Questions
, , ,
1

Hi, I just started playing around with Threejs, and after what seems like an eternity of scrubbing these forums, I can’t seem to find why my GLTF animation won’t play in my scene. To be clear, the model loads, but the animation doesn’t play. Animation plays perfectly in gltf viewer- https://gltf-viewer.donmccurdy.com/. How can I get this to work? Here is the code:

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'


const gltfLoader = new GLTFLoader()
gltfLoader.load( 'robot.gltf', function (gltf) {
  
    const model = gltf.scene;
    model.position.set( 0, -1.3, 0 );
    model.scale.set( 1, 1, 1 );
    scene.add(model);

    mixer = new THREE.AnimationMixer( gltf.scene );
    mixer.clipAction( gltf.animations[ 0 ] ).play();  

}, undefined, function ( e ) {

    console.error( e );

} );


// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Lights
const light1 = new THREE.PointLight(0xffffff, 2)
light1.position.set(2.5, 2.5, 2.5)
scene.add(light1)

const light2 = new THREE.PointLight(0xffffff, 2)
light1.position.set(5, 14, 3)
scene.add(light2)
light2.intensity = 15

// Sizes

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 3
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
    alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */

const clock = new THREE.Clock()
let lastElapsedTime = 0

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()
    const deltaTime = elapsedTime - lastElapsedTime
    lastElapsedTime = elapsedTime

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

Thank you.

2

you’re not updating the mixer in the animate loop


				const dt = clock.getDelta();

				mixer.update( dt );

refernce webgl_animation_keyframes

3

Hi jbanj,

Shouldn’t you call
mixer.update(deltaTime);
in your tick function?