Home

Index

How to use the AnimationMixer function from three

Find comprehensive JavaScript three.AnimationMixer code examples handpicked from public code repositorys.

three.AnimationMixer is a class in the three.js library that manages the playback of animations for 3D objects in a scene.

cactus.js

GitHub: alexa-samples/skill-sample-nodejs-web-api-my-cactus

58
59
60
61
62
63
64
65
66
67
this.cactusArmLarge = this.cactusBody.getObjectByName(CACTUS_LG_ARM_OBJ_NAME);
this.cactusArmSmall = this.cactusArmLarge.getObjectByName(CACTUS_SM_ARM_OBJ_NAME);
this.cactusFlower = this.cactusArmLarge.getObjectByName(CACTUS_FLOWER_OBJ_NAME);
this.pot = scene.getObjectByName("pot");

this.cactusMixer = new THREE.AnimationMixer(scene);
const cactusDanceClip = gltf.animations[0];
this.cactusDanceAction = this.cactusMixer.clipAction(cactusDanceClip);
this.cactusDanceAction.setLoop(THREE.LoopPingPong, 2);
this.cactusDanceAction.play();

pail.js

GitHub: kun432/skill-sample-nodejs-web-api-my-cactus

10
11
12
13
14
15
16
17
18
19
init(startInfo, debugLevel) {
    this.debugLevel = debugLevel;
    //TODO Make glowing if low number
},
load(gltf) {
    canMixer = new THREE.AnimationMixer(gltf.scene);
    const canClip = gltf.animations[0];
    waterCactusAction = canMixer.clipAction(canClip);
    waterCactusAction.clampWhenFinished = true;
    waterCactusAction.loop = THREE.LoopOnce;

How does three.AnimationMixer work?

three.AnimationMixer is a class in the three.js library that manages the playback of animations for 3D objects in a scene.

Animations are created using a tool such as Blender or Maya and then exported in a format such as glTF or FBX. These animations can include movement, rotation, scaling, and other transformations of 3D objects in the scene.

To use three.AnimationMixer, you first create an instance of the class and pass in the 3D object that you want to animate. You can then load the animation data using a loader such as GLTFLoader, and create an animation action using the clipAction method of the AnimationMixer instance.

You can then use the play method of the AnimationAction instance to start the animation, and the stop method to stop it. You can also use other methods and properties of the AnimationAction instance to control the playback of the animation, such as paused, time, and loop.

For example, here's a simple example of using three.AnimationMixer to play an animation on a 3D object:

javascript
const mixer = new THREE.AnimationMixer(object);
const loader = new THREE.GLTFLoader();

loader.load('model.gltf', gltf => {
  const animation = gltf.animations[0];
  const action = mixer.clipAction(animation);

  action.play();
});

In this example, we are using three.AnimationMixer to play an animation on a 3D object. We first create an instance of the AnimationMixer class and pass in the object that we want to animate.

We then use the GLTFLoader to load a glTF file that contains animation data, and get the first animation from the animations array. We then create an AnimationAction instance using the clipAction method of the mixer instance, and pass in the animation.

Finally, we call the play method of the action instance to start the animation.

This is just a simple example, and there are many other methods and properties available in three.AnimationMixer and AnimationAction for controlling the playback of animations. However, it demonstrates the basic steps involved in using three.AnimationMixer to play an animation on a 3D object in a three.js scene.

blinds.js

GitHub: soltrinox/skill-sample-nodejs-web-api-my-cactus

16
17
18
19
20
21
22
23
24
},
shouldClick(selectedObjSet) {
    return selectedObjSet.has(BLINDS_OBJ_NAME);
},
load(gltf) {
    blindsMixerUp = new THREE.AnimationMixer(gltf.scene);
    blindsMixerDown = new THREE.AnimationMixer(gltf.scene);
    let blindsUpClip = THREE.AnimationClip.findByName(gltf.animations, BLINDS_UP_ANIM);
    let blindsDownClip = THREE.AnimationClip.findByName(gltf.animations, BLINDS_DOWN_ANIM);

+ 3 other calls in file

spider.js

GitHub: kun432/skill-sample-nodejs-web-api-my-cactus

42
43
44
45
46
47
48
49
50
51
    // let spiderSquishClip = gltf.animations[0];
    // spiderSquishAction = spiderSquishMixer.clipAction(spiderSquishClip);
    // spiderSquishAction.setLoop(THREE.LoopOnce, 1);
},
loadWalk(gltf) {
    spiderMixer = new THREE.AnimationMixer(gltf.scene);
    const spiderClip = gltf.animations[0];

    spiderMoveAction = spiderMixer.clipAction(spiderClip);
    spiderMoveAction.setLoop(THREE.LoopOnce, 1).setEffectiveTimeScale(.2);

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.GLTFLoader();
let mixer;

loader.load("model.gltf", (gltf) => {
  const object = gltf.scene.children[0];
  mixer = new THREE.AnimationMixer(object);

  const animation = gltf.animations[0];
  const action = mixer.clipAction(animation);

  action.play();

  scene.add(object);
});

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  if (mixer) {
    mixer.update(0.01);
  }

  renderer.render(scene, camera);
}

animate();

In this example, we are using three.AnimationMixer to play an animation on a 3D object. We first create a new three.js scene, camera, and renderer, and add the renderer's canvas element to the document. We then create a new GLTFLoader instance and use it to load a glTF file that contains our 3D model and animation data. Once the data is loaded, we extract the 3D object from the scene property of the GLTF instance and create a new AnimationMixer instance using the object. We then get the first animation from the animations array and create a new AnimationAction instance using the clipAction method of the mixer instance. We pass the animation to this method, and then call the play method of the action instance to start the animation. We add the object to the scene and set the camera position, and then create an animation loop using the requestAnimationFrame method. In the loop, we check if the mixer instance is defined and call the update method of the mixer instance to update the animation time. Finally, we render the scene using the renderer instance. This example demonstrates how three.AnimationMixer can be used to play an animation on a 3D object in a three.js scene.

cactus.js

GitHub: kun432/skill-sample-nodejs-web-api-my-cactus

61
62
63
64
65
66
67
68
69
70
cactusArmLarge = cactusBody.getObjectByName(CACTUS_LG_ARM_OBJ_NAME);
cactusArmSmall = cactusArmLarge.getObjectByName(CACTUS_SM_ARM_OBJ_NAME);
cactusFlower = cactusArmLarge.getObjectByName(CACTUS_FLOWER_OBJ_NAME);
pot = scene.getObjectByName("pot");

cactusMixer = new THREE.AnimationMixer(scene);
const cactusDanceClip = gltf.animations[0];
cactusDanceAction = cactusMixer.clipAction(cactusDanceClip);
cactusDanceAction.setLoop(THREE.LoopPingPong, 2);
cactusDanceAction.play();

README.md?plain=1

GitHub: haosong/3D-Online-FPS

175
176
177
178
179
180
181
182
183
184
    }
    playerFactory = new THREE.SkinnedMesh(geometry, new THREE.MultiMaterial(materials));
    playerFactory.scale.set(2.5, 2.5, 2.5);
    playerFactory.position.set(0, 15, 0);
    playerFactory.skeleton.useVertexTexture = false;
    mixer = new THREE.AnimationMixer(playerFactory);
    mixer.clipAction(playerFactory.geometry.animations[0]).play();
});
```
由于时间所限，现在这个玩家只有两条腿，前后迈动。不过这已经可以完全的展现以上技术了。Three.js的社区及Example中有很多非常酷炫的模型，也都可以通过以上技术来加入到项目中。

BlendCharacter.js

GitHub: MozillaReality/puzzle-rain

57
58
59
60
61
62
63
64
65
66
var originalMaterial = materials[ 0 ];
originalMaterial.skinning = true;

THREE.SkinnedMesh.call(scope, geometry, originalMaterial);

var mixer = new THREE.AnimationMixer(scope);
scope.mixer = mixer;

// Create the animations
for ( var i = 0; i < geometry.animations.length; ++i) {

+ 3 other calls in file

zincObject.js

GitHub: alan-wu/ZincJS

103
104
105
106
107
108
109
110
111
112
113
  this.morph.material.side = THREE.DoubleSide;
}


ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour) {
  this.animationGroup = new THREE.AnimationObjectGroup(mesh);
  this.mixer = new THREE.AnimationMixer(this.animationGroup);
  this.geometry = mesh.geometry;
  this.clipAction = undefined;
  if (this.geometry && this.geometry.morphAttributes) {
    let morphAttribute = this.geometry.morphAttributes.position;

+ 14 other calls in file

Hand.js

GitHub: kenjiSpecial/portfolio-2017

34
35
36
37
38
39
40
41
42
mat.skinning = true;

this.mesh = new THREE.SkinnedMesh(this.geometry, mat);
this.mesh.rotation.y = Math.PI;
this.mesh.position.z = 2;
this.mixer = new THREE.AnimationMixer(this.mesh);
this.add(this.mesh);

this.animations = [];

Editor.js

GitHub: BaurTokenov/three-js-editor-2

106
107
108
109
110
111
112
113
114
115
this.geometries = {};
this.materials = {};
this.textures = {};
this.scripts = {};
this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object
this.mixer = new THREE.AnimationMixer(this.scene);
this.selected = null;
this.helpers = {};
this.cameras = {};
this.viewportCamera = this.camera;

browser.js

GitHub: FabricLabs/verse

161
162
163
164
165
166
167
168
169
170

  return group;
}

function createMoveAnimation (mesh, startPosition, endPosition) {
  mesh.userData.mixer = new THREE.AnimationMixer(mesh);
  const track = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [
    startPosition.x,
    startPosition.y,
    startPosition.z,

+ 17 other calls in file

GLTFAvatarViewer.js

GitHub: q-0z/ThreeJSAVATAR

357
358
359
360
361
362
363
364
365
366

if (!object.skinMixer) {
    var animations = gltf.animations;
    if ( animations && animations.length ) {
        // var mixer = new THREE.AnimationMixer( object );
        // var mixer = new THREE.AnimationMixer( optionalSceneRoot );
        var mixer = new THREE.AnimationMixer( object.attach_child || object );

        for ( var i = 0, len = animations.length; i < len; i ++ ) {
            var animation = animations[ i ];

+ 3 other calls in file

renderer.js

GitHub: akosblazsik/microbit-vrobot

97
98
99
100
101
102
103
104
105
106
var states = ['Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing'];
var emotes = ['Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp'];

gui = new dat.GUI();

mixer = new THREE.AnimationMixer(model);

actions = {};

for (var i = 0; i < animations.length; i++) {

index.js

GitHub: IoannisMorakis/LoadModels-FireworksParticle

183
184
185
186
187
188
189
190
191
192
//Models
// loadDraco('model/draco/alocasia_s.drc');
// loadGLTF('model/glb/Flamingo.glb', [-2, 2, 1], [0.01, 0.01, 0.01]);
loadGLTF('model/gltf/capoeira/Capoeira.gltf', [1, 0, 1], [0.01, 0.01, 0.01]).then(function(gltf){
	//console.log('termine gltf!');
	mixerCap = new THREE.AnimationMixer( gltf.scene );
	var action = mixerCap.clipAction( gltf.animations[ 0 ] );
	action.play();
	
}).catch(function (err) {

+ 6 other calls in file

viewer.js

GitHub: MichaelPolla/mip-viewer

364
365
366
367
368
369
370
371
372
373
  }

  this.clips = clips;
  if (!clips.length) return;

  this.mixer = new THREE.AnimationMixer(this.content);
}

playAllClips() {
  this.clips.forEach((clip) => {

+ 5 other calls in file

raptor_fbx.js

GitHub: Neticon/webgl-tests

43
44
45
46
47
48
49
50
51
52
  camera.position.z = bbox.max.z * 6
  camera.lookAt(object)
}
function onLoad(object) {
  console.log(object)
  mixer = new THREE.AnimationMixer(object)
  const clips = object.animations
  for (const clip of clips) {
    actions[clip.name] = mixer.clipAction(clip)
    //actions[clip.name].setDuration(0.0416666679084301)

+ 3 other calls in file

animation.js

GitHub: Neticon/webgl-tests

64
65
66
67
68
69
70
71
72
73
  camera.lookAt(object)
}
function onLoad(object) {
  console.log(object)
  let _scene = object.scene ? object.scene : object
  mixer = new THREE.AnimationMixer(_scene)
  const animations = object.animations
  for (const animation of animations || []) {
    actions[animation.name] = mixer.clipAction(animation)
    actions[animation.name].paused = true

+ 3 other calls in file

raptor_gltf.js

GitHub: Neticon/webgl-tests

41
42
43
44
45
46
47
48
49
50
  camera.position.z = bbox.max.z * 6
  camera.lookAt(object)
}
function onLoad(object) {
  console.log(object)
  mixer = new THREE.AnimationMixer(object.scene)
  const animations = object.animations
  for (const animation of animations) {
    actions[animation.name] = mixer.clipAction(animation)
    // actions[animation.name].getClip().optimize()

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About