Animate Actions from Blender

Questions
1

I have exported a Model (.glb) from Blender. It displays three Cubes. Loaded it with GLTFLoader and want to animate the three actions (one for each cube), which I also have access to through console.log(clips). The Model displays fine but does not animate. Maybe someone can see where im going wrong.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/js/controls/OrbitControls.js';

export default class Myscene {
    constructor() {
        this.scene;
        this.camera;
        this.renderer;
    }

    initialize() {
        // object reference
        var myscene = this;

        // Load 3D Scene
        myscene.scene = new THREE.Scene();
        myscene.scene.background = new THREE.Color( 0xf8fafc );

        myscene.renderer = new THREE.WebGLRenderer();
        myscene.renderer.setPixelRatio( window.devicePixelRatio );
        myscene.renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(myscene.renderer.domElement);

        // Load Camera Perspektive
        myscene.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        myscene.camera.position.set( 50, 0, 0 );

        // Load the Orbitcontroller
        var controls = new THREE.OrbitControls( myscene.camera, myscene.renderer.domElement );
        controls.enablePan = false;
        controls.enableZoom = false;

        // Load ambient Light (illuminates every object equally)
        var ambientLight = new THREE.AmbientLight( 0x404040 );
        myscene.scene.add( ambientLight );

        // Add directional light and put into group so it moves with the camera
        var dirLight = new THREE.DirectionalLight(0xffffff, 1, 100);
        dirLight.position.set(20, 15, 20);
        myscene.lightHolder = new THREE.Group();
        myscene.lightHolder.add(dirLight);
        myscene.scene.add(myscene.lightHolder);

        // load the mesh, position it and get animations
        var loader = new GLTFLoader();
        loader.load( 'models/cubes.glb', function ( gltf ) {

            const scene = gltf.scene;
            const clips = gltf.animations;
            const mixer = new THREE.AnimationMixer( scene );

            var action = mixer.clipAction( clips[ 0 ] );
            action.play();

            scene.scale.set( 1, 1, 1 );
            scene.position.x = 0;				    //Position (x = right+ left-)
            scene.position.y = 7;				    //Position (y = up+, down-)
            scene.position.z = 0;				    //Position (z = front +, back-)

            myscene.scene.add(scene);

            function animate() {
                requestAnimationFrame( animate );

                myscene.lightHolder.quaternion.copy(myscene.camera.quaternion);

                myscene.renderer.render( myscene.scene, myscene.camera );
            }

            animate();

        }, undefined, function ( error ) {

            console.error( error );

        } );
    }
}

Maybe it’s worth mentioning, that the model works, also animated, on gltf test sites.
Another issue is, that panning is still working for whatever reason.

2

You should update the mixer in your animation loop.

See https://threejs.org/docs/#api/en/animation/AnimationMixer.update

1 Like
3

Yea that solved it, thank you. Any Idea about the panning not getting restricted by controls.enablePan = false;?

ps: for anyone interested later on: I added mixer.update(0.01); to animate().