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.
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();
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:
javascriptconst 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.
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
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.
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();
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中有很多非常酷炫的模型,也都可以通过以上技术来加入到项目中。
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
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
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 = [];
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;
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
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
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++) {
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
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
GitHub: Neticon/webgl-tests
![Neticon profile picture](/Neticon.png?size=40)
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
GitHub: Neticon/webgl-tests
![Neticon profile picture](/Neticon.png?size=40)
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
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
three.Vector3 is the most popular function in three (22341 examples)