How to use the AnimationClip function from three
Find comprehensive JavaScript three.AnimationClip code examples handpicked from public code repositorys.
three.AnimationClip is a class in the Three.js library used to define animations that can be played on 3D objects.
GitHub: alan-wu/ZincJS
114 115 116 117 118 119 120 121 122 123morphAttribute = this.geometry.morphAttributes.color ? this.geometry.morphAttributes.color : this.geometry.morphAttributes.normal; } if (morphAttribute) { this.animationClip = THREE.AnimationClip.CreateClipsFromMorphTargetSequences( morphAttribute, 10, true); if (this.animationClip && (this.animationClip[0] != undefined)) { this.clipAction = this.mixer.clipAction(this.animationClip[0]).setDuration( this.duration);
9
3
3
19 20 21 22 23 24 25 26 27 28}, 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); blindsUpAction = blindsMixerUp.clipAction(blindsUpClip); blindsUpAction.clampWhenFinished = true; blindsUpAction.loop = THREE.LoopOnce;
1901+ 3 other calls in file
How does three.AnimationClip work?
three.AnimationClip is a class in the Three.js library used to create and manipulate animation data for 3D objects by defining a sequence of keyframe data, including which properties of the object to animate, their target values, and the timing of the animation. The keyframe data can be exported and imported from various file formats, and the animation can be played back on the object using the three.AnimationMixer class.
2678 2679 2680 2681 2682 2683 2684 2685 2686 2687var name = animationDef.name !== undefined ? animationDef.name : "animation_" + animationIndex; return new THREE.AnimationClip(name, undefined, tracks); }); }; /**
378+ 14 other calls in file
3582 3583 3584 3585 3586 3587 3588 3589 3590 3591} } const name = animationDef.name ? animationDef.name : 'animation_' + animationIndex; return new THREE.AnimationClip( name, undefined, tracks ); } ); }
2100Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13// Create a new AnimationClip const clip = new THREE.AnimationClip("myClip", 10, [ // Define a new KeyframeTrack for the x position new THREE.KeyframeTrack("myObject.position.x", [0, 2, 5, 10], [0, 10, 5, 0]), // Define a new KeyframeTrack for the y position new THREE.KeyframeTrack("myObject.position.y", [0, 2, 5, 10], [0, 5, 10, 0]), // Define a new KeyframeTrack for the z position new THREE.KeyframeTrack("myObject.position.z", [0, 2, 5, 10], [0, 0, -5, 0]), ]); // Add the new animation clip to an animation mixer const mixer = new THREE.AnimationMixer(myObject); mixer.clipAction(clip).play();
In this example, we create a new AnimationClip called myClip with a duration of 10 seconds. We then define three KeyframeTrack objects for the x, y, and z position of an object called myObject. The KeyframeTrack objects define the values of the object's position at different points in time. Finally, we create a new AnimationMixer and add the AnimationClip to it, then play the animation.
2257 2258 2259 2260 2261 2262 2263 2264 2265 2266} tracks.push(track); } } const name = animationDef.name ? animationDef.name : 'animation_' + animationIndex; return new three.AnimationClip(name, undefined, tracks); }); } createNodeMesh(nodeIndex) { const json = this.json;
270
1016 1017 1018 1019 1020 1021 1022 1023 1024 1025const tracks = this.buildSkeletalAnimation(vmd, mesh).tracks; const tracks2 = this.buildMorphAnimation(vmd, mesh).tracks; for (let i = 0, il = tracks2.length; i < il; i += 1) { tracks.push(tracks2[i]); } return new three_1.AnimationClip('', -1, tracks); } /** * @param {Object} vmd - parsed VMD data * @param {SkinnedMesh} mesh - tracks will be fitting to mesh
130+ 19 other calls in file
GitHub: FabricLabs/verse
171 172 173 174 175 176 177 178 179 180endPosition.x, endPosition.y, endPosition.z, ]); const animationClip = new THREE.AnimationClip(null, 5, [track]); const animationAction = mesh.userData.mixer.clipAction(animationClip); animationAction.setLoop(THREE.LoopOnce); animationAction.play(); mesh.userData.clock = new THREE.Clock();
110+ 17 other calls in file
GitHub: VeinKowal/veins
2577 2578 2579 2580 2581 2582 2583 2584 2585 2586if (_ret === "continue") continue; } var name = animationDef.name ? animationDef.name : 'animation_' + animationIndex; return new _three.AnimationClip(name, undefined, tracks); }); } }, { key: "createNodeMesh",
010
2378 2379 2380 2381 2382 2383 2384 2385 2386 2387tracks = tracks.concat( generateTracks( rawTracks ) ); } ); return new THREE.AnimationClip( rawClip.name, - 1, tracks ); } function generateTracks( rawTracks ) {
001+ 177 other calls in file
2355 2356 2357 2358 2359 2360 2361 2362 2363 2364var self = this; rawClip.layer.forEach(function (rawTracks) { tracks = tracks.concat(self.generateTracks(rawTracks)); }); return new THREE.AnimationClip(rawClip.name, -1, tracks); }, generateTracks: function (rawTracks) { var tracks = [];
000
155 156 157 158 159 160 161 162 163 164var obj = new THREE.Mesh( sparrow_geom, sparrow ); obj.castShadow = true; obj.scale.multiplyScalar( 0.25 ); var mixer = Iconeezin.Runtime.Video.getAnimationMixer( obj ); var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'fly', sparrow_geom.morphTargets, 50 ); var action = mixer.clipAction( clip ).setDuration( 1 ); action.time = Math.random();
002+ 3 other calls in file
three.Vector3 is the most popular function in three (22341 examples)