Animation in THREE JS

There is a model with animation. After the introduction of a new system of animation, I did not get it to run. Maybe I’m wrong to set up export? I am attaching files:


var mixer = new THREE.AnimationMixer( player );
mixer.addAction( new THREE.AnimationAction( player.geometry.animations[0] ) );

mixer.update( 1000 );

5 thoughts on “Animation in THREE JS”

  1. New System works with animation clips (since r74 if im right).
    Heres a sample of my Blender exported JSON models.

    var mixer;
    var actions = {};
    var loader = new THREE.JSONLoader();
    loader.load( "webgl/models/model.json", function ( geometry, materials ) {
        model = new THREE.SkinnedMesh( geometry, materials, false );
        for(var x=0;x<materials.length();x++) materials[x].skinning = true;
        mixer = new THREE.AnimationMixer(model );
        actions.idle = mixer.clipAction(geometry.animations[0]);
        actions.idle.clampWhenFinished = true;;
        actions.walk = mixer.clipAction(geometry.animations[1]);
        actions.walk.clampWhenFinished = true;
        scene.add( model );

    Every exported Animation gets stored in the array geometry.animations.
    In my example i explicitly know which index is which animation but its also very easy to map it manually by name: (geometry.animations[x].name).

    In the animation loop you then have to update the mixer regularly
    if(typeof mixer != "undefined") mixer.update(delta);

    Got my infos from

    Also heres the regarding sourcecode for an animation action:

    The Export from Blender has A LOT of possible snares especially when
    using Skeletal mesh animations (!= morphs).

    • Scale values of all bones / Armature / mesh should be exactly “1” and
      never ever be touched again 🙂
      (Keyframes also should only have keying set LocRot)
    • “apply modifiers” button while export always caused me distortions
    • select only the mesh while exporting (not the armature or bones)

    my export settings:
    blender three js skeletal export options

    Hope that helps future explorers 🙂

  2. Did you catch that this:

    if(typeof mixer != "undefined") mixer.update(delta);

    should be this

    if(typeof mixer !== "undefined") mixer.update(delta);



Leave a Comment