[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M714TDP6FTN2ZYA8A5ZC8KTW":3,"skill-same:01M714TDP6FTN2ZYA8A5ZC8KTW":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":14,"repositoryHtmlUrl":44,"repositoryHomepageUrl":6,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":46,"install":47,"resources":60},"01M714TDP6FTN2ZYA8A5ZC8KTW","threejs-animation",null,"Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fthreejs-animation\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"Animation","threejs","threejs animation","when","gltf","animations","morph","mixing","unknown","procedural","targets","three","objects","community","motion","use","js","2026-11-10 10:12:30",false,"---\nname: threejs-animation\ndescription: Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.\nrisk: unknown\nsource: community\n---\n\n# Three.js Animation\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Simple procedural animation\nconst clock = new THREE.Clock();\n\nfunction animate() {\n  const delta = clock.getDelta();\n  const elapsed = clock.getElapsedTime();\n\n  mesh.rotation.y += delta;\n  mesh.position.y = Math.sin(elapsed) * 0.5;\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Animation System Overview\n\nThree.js animation system has three main components:\n\n1. **AnimationClip** - Container for keyframe data\n2. **AnimationMixer** - Plays animations on a root object\n3. **AnimationAction** - Controls playback of a clip\n\n## AnimationClip\n\nStores keyframe animation data.\n\n```javascript\n\u002F\u002F Create animation clip\nconst times = [0, 1, 2]; \u002F\u002F Keyframe times (seconds)\nconst values = [0, 1, 0]; \u002F\u002F Values at each keyframe\n\nconst track = new THREE.NumberKeyframeTrack(\n  \".position[y]\", \u002F\u002F Property path\n  times,\n  values,\n);\n\nconst clip = new THREE.AnimationClip(\"bounce\", 2, [track]);\n```\n\n### KeyframeTrack Types\n\n```javascript\n\u002F\u002F Number track (single value)\nnew THREE.NumberKeyframeTrack(\".opacity\", times, [1, 0]);\nnew THREE.NumberKeyframeTrack(\".material.opacity\", times, [1, 0]);\n\n\u002F\u002F Vector track (position, scale)\nnew THREE.VectorKeyframeTrack(\".position\", times, [\n  0,\n  0,\n  0, \u002F\u002F t=0\n  1,\n  2,\n  0, \u002F\u002F t=1\n  0,\n  0,\n  0, \u002F\u002F t=2\n]);\n\n\u002F\u002F Quaternion track (rotation)\nconst q1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));\nconst q2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0));\nnew THREE.QuaternionKeyframeTrack(\n  \".quaternion\",\n  [0, 1],\n  [q1.x, q1.y, q1.z, q1.w, q2.x, q2.y, q2.z, q2.w],\n);\n\n\u002F\u002F Color track\nnew THREE.ColorKeyframeTrack(\".material.color\", times, [\n  1,\n  0,\n  0, \u002F\u002F red\n  0,\n  1,\n  0, \u002F\u002F green\n  0,\n  0,\n  1, \u002F\u002F blue\n]);\n\n\u002F\u002F Boolean track\nnew THREE.BooleanKeyframeTrack(\".visible\", [0, 0.5, 1], [true, false, true]);\n\n\u002F\u002F String track (for morph targets)\nnew THREE.StringKeyframeTrack(\n  \".morphTargetInfluences[smile]\",\n  [0, 1],\n  [\"0\", \"1\"],\n);\n```\n\n### Interpolation Modes\n\n```javascript\nconst track = new THREE.VectorKeyframeTrack(\".position\", times, values);\n\n\u002F\u002F Interpolation\ntrack.setInterpolation(THREE.InterpolateLinear); \u002F\u002F Default\ntrack.setInterpolation(THREE.InterpolateSmooth); \u002F\u002F Cubic spline\ntrack.setInterpolation(THREE.InterpolateDiscrete); \u002F\u002F Step function\n```\n\n## AnimationMixer\n\nPlays animations on an object and its descendants.\n\n```javascript\nconst mixer = new THREE.AnimationMixer(model);\n\n\u002F\u002F Create action from clip\nconst action = mixer.clipAction(clip);\naction.play();\n\n\u002F\u002F Update in animation loop\nfunction animate() {\n  const delta = clock.getDelta();\n  mixer.update(delta); \u002F\u002F Required!\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\n```\n\n### Mixer Events\n\n```javascript\nmixer.addEventListener(\"finished\", (e) => {\n  console.log(\"Animation finished:\", e.action.getClip().name);\n});\n\nmixer.addEventListener(\"loop\", (e) => {\n  console.log(\"Animation looped:\", e.action.getClip().name);\n});\n```\n\n## AnimationAction\n\nControls playback of an animation clip.\n\n```javascript\nconst action = mixer.clipAction(clip);\n\n\u002F\u002F Playback control\naction.play();\naction.stop();\naction.reset();\naction.halt(fadeOutDuration);\n\n\u002F\u002F Playback state\naction.isRunning();\naction.isScheduled();\n\n\u002F\u002F Time control\naction.time = 0.5; \u002F\u002F Current time\naction.timeScale = 1; \u002F\u002F Playback speed (negative = reverse)\naction.paused = false;\n\n\u002F\u002F Weight (for blending)\naction.weight = 1; \u002F\u002F 0-1, contribution to final pose\naction.setEffectiveWeight(1);\n\n\u002F\u002F Loop modes\naction.loop = THREE.LoopRepeat; \u002F\u002F Default: loop forever\naction.loop = THREE.LoopOnce; \u002F\u002F Play once and stop\naction.loop = THREE.LoopPingPong; \u002F\u002F Alternate forward\u002Fbackward\naction.repetitions = 3; \u002F\u002F Number of loops (Infinity default)\n\n\u002F\u002F Clamping\naction.clampWhenFinished = true; \u002F\u002F Hold last frame when done\n\n\u002F\u002F Blending\naction.blendMode = THREE.NormalAnimationBlendMode;\naction.blendMode = THREE.AdditiveAnimationBlendMode;\n```\n\n### Fade In\u002FOut\n\n```javascript\n\u002F\u002F Fade in\naction.reset().fadeIn(0.5).play();\n\n\u002F\u002F Fade out\naction.fadeOut(0.5);\n\n\u002F\u002F Crossfade between animations\nconst action1 = mixer.clipAction(clip1);\nconst action2 = mixer.clipAction(clip2);\n\naction1.play();\n\n\u002F\u002F Later, crossfade to action2\naction1.crossFadeTo(action2, 0.5, true);\naction2.play();\n```\n\n## Loading GLTF Animations\n\nMost common source of skeletal animations.\n\n```javascript\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js\";\n\nconst loader = new GLTFLoader();\nloader.load(\"model.glb\", (gltf) => {\n  const model = gltf.scene;\n  scene.add(model);\n\n  \u002F\u002F Create mixer\n  const mixer = new THREE.AnimationMixer(model);\n\n  \u002F\u002F Get all clips\n  const clips = gltf.animations;\n  console.log(\n    \"Available animations:\",\n    clips.map((c) => c.name),\n  );\n\n  \u002F\u002F Play first animation\n  if (clips.length > 0) {\n    const action = mixer.clipAction(clips[0]);\n    action.play();\n  }\n\n  \u002F\u002F Play specific animation by name\n  const walkClip = THREE.AnimationClip.findByName(clips, \"Walk\");\n  if (walkClip) {\n    mixer.clipAction(walkClip).play();\n  }\n\n  \u002F\u002F Store mixer for update loop\n  window.mixer = mixer;\n});\n\n\u002F\u002F Animation loop\nfunction animate() {\n  const delta = clock.getDelta();\n  if (window.mixer) window.mixer.update(delta);\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\n```\n\n## Skeletal Animation\n\n### Skeleton and Bones\n\n```javascript\n\u002F\u002F Access skeleton from skinned mesh\nconst skinnedMesh = model.getObjectByProperty(\"type\", \"SkinnedMesh\");\nconst skeleton = skinnedMesh.skeleton;\n\n\u002F\u002F Access bones\nskeleton.bones.forEach((bone) => {\n  console.log(bone.name, bone.position, bone.rotation);\n});\n\n\u002F\u002F Find specific bone by name\nconst headBone = skeleton.bones.find((b) => b.name === \"Head\");\nif (headBone) headBone.rotation.y = Math.PI \u002F 4; \u002F\u002F Turn head\n\n\u002F\u002F Skeleton helper\nconst helper = new THREE.SkeletonHelper(model);\nscene.add(helper);\n```\n\n### Programmatic Bone Animation\n\n```javascript\nfunction animate() {\n  const time = clock.getElapsedTime();\n\n  \u002F\u002F Animate bone\n  const headBone = skeleton.bones.find((b) => b.name === \"Head\");\n  if (headBone) {\n    headBone.rotation.y = Math.sin(time) * 0.3;\n  }\n\n  \u002F\u002F Update mixer if also playing clips\n  mixer.update(clock.getDelta());\n}\n```\n\n### Bone Attachments\n\n```javascript\n\u002F\u002F Attach object to bone\nconst weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);\nconst handBone = skeleton.bones.find((b) => b.name === \"RightHand\");\nif (handBone) handBone.add(weapon);\n\n\u002F\u002F Offset attachment\nweapon.position.set(0, 0, 0.5);\nweapon.rotation.set(0, Math.PI \u002F 2, 0);\n```\n\n## Morph Targets\n\nBlend between different mesh shapes.\n\n```javascript\n\u002F\u002F Morph targets are stored in geometry\nconst geometry = mesh.geometry;\nconsole.log(\"Morph attributes:\", Object.keys(geometry.morphAttributes));\n\n\u002F\u002F Access morph target influences\nmesh.morphTargetInfluences; \u002F\u002F Array of weights\nmesh.morphTargetDictionary; \u002F\u002F Name -> index mapping\n\n\u002F\u002F Set morph target by index\nmesh.morphTargetInfluences[0] = 0.5;\n\n\u002F\u002F Set by name\nconst smileIndex = mesh.morphTargetDictionary[\"smile\"];\nmesh.morphTargetInfluences[smileIndex] = 1;\n```\n\n### Animating Morph Targets\n\n```javascript\n\u002F\u002F Procedural\nfunction animate() {\n  const t = clock.getElapsedTime();\n  mesh.morphTargetInfluences[0] = (Math.sin(t) + 1) \u002F 2;\n}\n\n\u002F\u002F With keyframe animation\nconst track = new THREE.NumberKeyframeTrack(\n  \".morphTargetInfluences[smile]\",\n  [0, 0.5, 1],\n  [0, 1, 0],\n);\nconst clip = new THREE.AnimationClip(\"smile\", 1, [track]);\nmixer.clipAction(clip).play();\n```\n\n## Animation Blending\n\nMix multiple animations together.\n\n```javascript\n\u002F\u002F Setup actions\nconst idleAction = mixer.clipAction(idleClip);\nconst walkAction = mixer.clipAction(walkClip);\nconst runAction = mixer.clipAction(runClip);\n\n\u002F\u002F Play all with different weights\nidleAction.play();\nwalkAction.play();\nrunAction.play();\n\n\u002F\u002F Set initial weights\nidleAction.setEffectiveWeight(1);\nwalkAction.setEffectiveWeight(0);\nrunAction.setEffectiveWeight(0);\n\n\u002F\u002F Blend based on speed\nfunction updateAnimations(speed) {\n  if (speed \u003C 0.1) {\n    idleAction.setEffectiveWeight(1);\n    walkAction.setEffectiveWeight(0);\n    runAction.setEffectiveWeight(0);\n  } else if (speed \u003C 5) {\n    const t = speed \u002F 5;\n    idleAction.setEffectiveWeight(1 - t);\n    walkAction.setEffectiveWeight(t);\n    runAction.setEffectiveWeight(0);\n  } else {\n    const t = Math.min((speed - 5) \u002F 5, 1);\n    idleAction.setEffectiveWeight(0);\n    walkAction.setEffectiveWeight(1 - t);\n    runAction.setEffectiveWeight(t);\n  }\n}\n```\n\n### Additive Blending\n\n```javascript\n\u002F\u002F Base pose\nconst baseAction = mixer.clipAction(baseClip);\nbaseAction.play();\n\n\u002F\u002F Additive layer (e.g., breathing)\nconst additiveAction = mixer.clipAction(additiveClip);\nadditiveAction.blendMode = THREE.AdditiveAnimationBlendMode;\nadditiveAction.play();\n\n\u002F\u002F Convert clip to additive\nTHREE.AnimationUtils.makeClipAdditive(additiveClip);\n```\n\n## Animation Utilities\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Find clip by name\nconst clip = THREE.AnimationClip.findByName(clips, \"Walk\");\n\n\u002F\u002F Create subclip\nconst subclip = THREE.AnimationUtils.subclip(clip, \"subclip\", 0, 30, 30);\n\n\u002F\u002F Convert to additive\nTHREE.AnimationUtils.makeClipAdditive(clip);\nTHREE.AnimationUtils.makeClipAdditive(clip, 0, referenceClip);\n\n\u002F\u002F Clone clip\nconst clone = clip.clone();\n\n\u002F\u002F Get clip duration\nclip.duration;\n\n\u002F\u002F Optimize clip (remove redundant keyframes)\nclip.optimize();\n\n\u002F\u002F Reset clip to first frame\nclip.resetDuration();\n```\n\n## Procedural Animation Patterns\n\n### Smooth Damping\n\n```javascript\n\u002F\u002F Smooth follow\u002Flerp\nconst target = new THREE.Vector3();\nconst current = new THREE.Vector3();\nconst velocity = new THREE.Vector3();\n\nfunction smoothDamp(current, target, velocity, smoothTime, deltaTime) {\n  const omega = 2 \u002F smoothTime;\n  const x = omega * deltaTime;\n  const exp = 1 \u002F (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n  const change = current.clone().sub(target);\n  const temp = velocity\n    .clone()\n    .add(change.clone().multiplyScalar(omega))\n    .multiplyScalar(deltaTime);\n  velocity.sub(temp.clone().multiplyScalar(omega)).multiplyScalar(exp);\n  return target.clone().add(change.add(temp).multiplyScalar(exp));\n}\n\nfunction animate() {\n  current.copy(smoothDamp(current, target, velocity, 0.3, delta));\n  mesh.position.copy(current);\n}\n```\n\n### Spring Physics\n\n```javascript\nclass Spring {\n  constructor(stiffness = 100, damping = 10) {\n    this.stiffness = stiffness;\n    this.damping = damping;\n    this.position = 0;\n    this.velocity = 0;\n    this.target = 0;\n  }\n\n  update(dt) {\n    const force = -this.stiffness * (this.position - this.target);\n    const dampingForce = -this.damping * this.velocity;\n    this.velocity += (force + dampingForce) * dt;\n    this.position += this.velocity * dt;\n    return this.position;\n  }\n}\n\nconst spring = new Spring(100, 10);\nspring.target = 1;\n\nfunction animate() {\n  mesh.position.y = spring.update(delta);\n}\n```\n\n### Oscillation\n\n```javascript\nfunction animate() {\n  const t = clock.getElapsedTime();\n\n  \u002F\u002F Sine wave\n  mesh.position.y = Math.sin(t * 2) * 0.5;\n\n  \u002F\u002F Bouncing\n  mesh.position.y = Math.abs(Math.sin(t * 3)) * 2;\n\n  \u002F\u002F Circular motion\n  mesh.position.x = Math.cos(t) * 2;\n  mesh.position.z = Math.sin(t) * 2;\n\n  \u002F\u002F Figure 8\n  mesh.position.x = Math.sin(t) * 2;\n  mesh.position.z = Math.sin(t * 2) * 1;\n}\n```\n\n## Performance Tips\n\n1. **Share clips**: Same AnimationClip can be used on multiple mixers\n2. **Optimize clips**: Call `clip.optimize()` to remove redundant keyframes\n3. **Disable when off-screen**: Stop mixer updates for invisible objects\n4. **Use LOD for animations**: Simpler rigs for distant characters\n5. **Limit active mixers**: Each mixer.update() has a cost\n\n```javascript\n\u002F\u002F Pause animation when not visible\nmesh.onBeforeRender = () => {\n  action.paused = false;\n};\n\nmesh.onAfterRender = () => {\n  \u002F\u002F Check if will be visible next frame\n  if (!isInFrustum(mesh)) {\n    action.paused = true;\n  }\n};\n\n\u002F\u002F Cache clips\nconst clipCache = new Map();\nfunction getClip(name) {\n  if (!clipCache.has(name)) {\n    clipCache.set(name, loadClip(name));\n  }\n  return clipCache.get(name);\n}\n```\n\n## See Also\n\n- `threejs-loaders` - Loading animated GLTF models\n- `threejs-fundamentals` - Clock and animation loop\n- `threejs-shaders` - Vertex animation in shaders\n","# Three.js Animation\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Simple procedural animation\nconst clock = new THREE.Clock();\n\nfunction animate() {\n  const delta = clock.getDelta();\n  const elapsed = clock.getElapsedTime();\n\n  mesh.rotation.y += delta;\n  mesh.position.y = Math.sin(elapsed) * 0.5;\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Animation System Overview\n\nThree.js animation system has three main components:\n\n1. **AnimationClip** - Container for keyframe data\n2. **AnimationMixer** - Plays animations on a root object\n3. **AnimationAction** - Controls playback of a clip\n\n## AnimationClip\n\nStores keyframe animation data.\n\n```javascript\n\u002F\u002F Create animation clip\nconst times = [0, 1, 2]; \u002F\u002F Keyframe times (seconds)\nconst values = [0, 1, 0]; \u002F\u002F Values at each keyframe\n\nconst track = new THREE.NumberKeyframeTrack(\n  \".position[y]\", \u002F\u002F Property path\n  times,\n  values,\n);\n\nconst clip = new THREE.AnimationClip(\"bounce\", 2, [track]);\n```\n\n### KeyframeTrack Types\n\n```javascript\n\u002F\u002F Number track (single value)\nnew THREE.NumberKeyframeTrack(\".opacity\", times, [1, 0]);\nnew THREE.NumberKeyframeTrack(\".material.opacity\", times, [1, 0]);\n\n\u002F\u002F Vector track (position, scale)\nnew THREE.VectorKeyframeTrack(\".position\", times, [\n  0,\n  0,\n  0, \u002F\u002F t=0\n  1,\n  2,\n  0, \u002F\u002F t=1\n  0,\n  0,\n  0, \u002F\u002F t=2\n]);\n\n\u002F\u002F Quaternion track (rotation)\nconst q1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));\nconst q2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0));\nnew THREE.QuaternionKeyframeTrack(\n  \".quaternion\",\n  [0, 1],\n  [q1.x, q1.y, q1.z, q1.w, q2.x, q2.y, q2.z, q2.w],\n);\n\n\u002F\u002F Color track\nnew THREE.ColorKeyframeTrack(\".material.color\", times, [\n  1,\n  0,\n  0, \u002F\u002F red\n  0,\n  1,\n  0, \u002F\u002F green\n  0,\n  0,\n  1, \u002F\u002F blue\n]);\n\n\u002F\u002F Boolean track\nnew THREE.BooleanKeyframeTrack(\".visible\", [0, 0.5, 1], [true, false, true]);\n\n\u002F\u002F String track (for morph targets)\nnew THREE.StringKeyframeTrack(\n  \".morphTargetInfluences[smile]\",\n  [0, 1],\n  [\"0\", \"1\"],\n);\n```\n\n### Interpolation Modes\n\n```javascript\nconst track = new THREE.VectorKeyframeTrack(\".position\", times, values);\n\n\u002F\u002F Interpolation\ntrack.setInterpolation(THREE.InterpolateLinear); \u002F\u002F Default\ntrack.setInterpolation(THREE.InterpolateSmooth); \u002F\u002F Cubic spline\ntrack.setInterpolation(THREE.InterpolateDiscrete); \u002F\u002F Step function\n```\n\n## AnimationMixer\n\nPlays animations on an object and its descendants.\n\n```javascript\nconst mixer = new THREE.AnimationMixer(model);\n\n\u002F\u002F Create action from clip\nconst action = mixer.clipAction(clip);\naction.play();\n\n\u002F\u002F Update in animation loop\nfunction animate() {\n  const delta = clock.getDelta();\n  mixer.update(delta); \u002F\u002F Required!\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\n```\n\n### Mixer Events\n\n```javascript\nmixer.addEventListener(\"finished\", (e) => {\n  console.log(\"Animation finished:\", e.action.getClip().name);\n});\n\nmixer.addEventListener(\"loop\", (e) => {\n  console.log(\"Animation looped:\", e.action.getClip().name);\n});\n```\n\n## AnimationAction\n\nControls playback of an animation clip.\n\n```javascript\nconst action = mixer.clipAction(clip);\n\n\u002F\u002F Playback control\naction.play();\naction.stop();\naction.reset();\naction.halt(fadeOutDuration);\n\n\u002F\u002F Playback state\naction.isRunning();\naction.isScheduled();\n\n\u002F\u002F Time control\naction.time = 0.5; \u002F\u002F Current time\naction.timeScale = 1; \u002F\u002F Playback speed (negative = reverse)\naction.paused = false;\n\n\u002F\u002F Weight (for blending)\naction.weight = 1; \u002F\u002F 0-1, contribution to final pose\naction.setEffectiveWeight(1);\n\n\u002F\u002F Loop modes\naction.loop = THREE.LoopRepeat; \u002F\u002F Default: loop forever\naction.loop = THREE.LoopOnce; \u002F\u002F Play once and stop\naction.loop = THREE.LoopPingPong; \u002F\u002F Alternate forward\u002Fbackward\naction.repetitions = 3; \u002F\u002F Number of loops (Infinity default)\n\n\u002F\u002F Clamping\naction.clampWhenFinished = true; \u002F\u002F Hold last frame when done\n\n\u002F\u002F Blending\naction.blendMode = THREE.NormalAnimationBlendMode;\naction.blendMode = THREE.AdditiveAnimationBlendMode;\n```\n\n### Fade In\u002FOut\n\n```javascript\n\u002F\u002F Fade in\naction.reset().fadeIn(0.5).play();\n\n\u002F\u002F Fade out\naction.fadeOut(0.5);\n\n\u002F\u002F Crossfade between animations\nconst action1 = mixer.clipAction(clip1);\nconst action2 = mixer.clipAction(clip2);\n\naction1.play();\n\n\u002F\u002F Later, crossfade to action2\naction1.crossFadeTo(action2, 0.5, true);\naction2.play();\n```\n\n## Loading GLTF Animations\n\nMost common source of skeletal animations.\n\n```javascript\nimport { GLTFLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js\";\n\nconst loader = new GLTFLoader();\nloader.load(\"model.glb\", (gltf) => {\n  const model = gltf.scene;\n  scene.add(model);\n\n  \u002F\u002F Create mixer\n  const mixer = new THREE.AnimationMixer(model);\n\n  \u002F\u002F Get all clips\n  const clips = gltf.animations;\n  console.log(\n    \"Available animations:\",\n    clips.map((c) => c.name),\n  );\n\n  \u002F\u002F Play first animation\n  if (clips.length > 0) {\n    const action = mixer.clipAction(clips[0]);\n    action.play();\n  }\n\n  \u002F\u002F Play specific animation by name\n  const walkClip = THREE.AnimationClip.findByName(clips, \"Walk\");\n  if (walkClip) {\n    mixer.clipAction(walkClip).play();\n  }\n\n  \u002F\u002F Store mixer for update loop\n  window.mixer = mixer;\n});\n\n\u002F\u002F Animation loop\nfunction animate() {\n  const delta = clock.getDelta();\n  if (window.mixer) window.mixer.update(delta);\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\n```\n\n## Skeletal Animation\n\n### Skeleton and Bones\n\n```javascript\n\u002F\u002F Access skeleton from skinned mesh\nconst skinnedMesh = model.getObjectByProperty(\"type\", \"SkinnedMesh\");\nconst skeleton = skinnedMesh.skeleton;\n\n\u002F\u002F Access bones\nskeleton.bones.forEach((bone) => {\n  console.log(bone.name, bone.position, bone.rotation);\n});\n\n\u002F\u002F Find specific bone by name\nconst headBone = skeleton.bones.find((b) => b.name === \"Head\");\nif (headBone) headBone.rotation.y = Math.PI \u002F 4; \u002F\u002F Turn head\n\n\u002F\u002F Skeleton helper\nconst helper = new THREE.SkeletonHelper(model);\nscene.add(helper);\n```\n\n### Programmatic Bone Animation\n\n```javascript\nfunction animate() {\n  const time = clock.getElapsedTime();\n\n  \u002F\u002F Animate bone\n  const headBone = skeleton.bones.find((b) => b.name === \"Head\");\n  if (headBone) {\n    headBone.rotation.y = Math.sin(time) * 0.3;\n  }\n\n  \u002F\u002F Update mixer if also playing clips\n  mixer.update(clock.getDelta());\n}\n```\n\n### Bone Attachments\n\n```javascript\n\u002F\u002F Attach object to bone\nconst weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);\nconst handBone = skeleton.bones.find((b) => b.name === \"RightHand\");\nif (handBone) handBone.add(weapon);\n\n\u002F\u002F Offset attachment\nweapon.position.set(0, 0, 0.5);\nweapon.rotation.set(0, Math.PI \u002F 2, 0);\n```\n\n## Morph Targets\n\nBlend between different mesh shapes.\n\n```javascript\n\u002F\u002F Morph targets are stored in geometry\nconst geometry = mesh.geometry;\nconsole.log(\"Morph attributes:\", Object.keys(geometry.morphAttributes));\n\n\u002F\u002F Access morph target influences\nmesh.morphTargetInfluences; \u002F\u002F Array of weights\nmesh.morphTargetDictionary; \u002F\u002F Name -> index mapping\n\n\u002F\u002F Set morph target by index\nmesh.morphTargetInfluences[0] = 0.5;\n\n\u002F\u002F Set by name\nconst smileIndex = mesh.morphTargetDictionary[\"smile\"];\nmesh.morphTargetInfluences[smileIndex] = 1;\n```\n\n### Animating Morph Targets\n\n```javascript\n\u002F\u002F Procedural\nfunction animate() {\n  const t = clock.getElapsedTime();\n  mesh.morphTargetInfluences[0] = (Math.sin(t) + 1) \u002F 2;\n}\n\n\u002F\u002F With keyframe animation\nconst track = new THREE.NumberKeyframeTrack(\n  \".morphTargetInfluences[smile]\",\n  [0, 0.5, 1],\n  [0, 1, 0],\n);\nconst clip = new THREE.AnimationClip(\"smile\", 1, [track]);\nmixer.clipAction(clip).play();\n```\n\n## Animation Blending\n\nMix multiple animations together.\n\n```javascript\n\u002F\u002F Setup actions\nconst idleAction = mixer.clipAction(idleClip);\nconst walkAction = mixer.clipAction(walkClip);\nconst runAction = mixer.clipAction(runClip);\n\n\u002F\u002F Play all with different weights\nidleAction.play();\nwalkAction.play();\nrunAction.play();\n\n\u002F\u002F Set initial weights\nidleAction.setEffectiveWeight(1);\nwalkAction.setEffectiveWeight(0);\nrunAction.setEffectiveWeight(0);\n\n\u002F\u002F Blend based on speed\nfunction updateAnimations(speed) {\n  if (speed \u003C 0.1) {\n    idleAction.setEffectiveWeight(1);\n    walkAction.setEffectiveWeight(0);\n    runAction.setEffectiveWeight(0);\n  } else if (speed \u003C 5) {\n    const t = speed \u002F 5;\n    idleAction.setEffectiveWeight(1 - t);\n    walkAction.setEffectiveWeight(t);\n    runAction.setEffectiveWeight(0);\n  } else {\n    const t = Math.min((speed - 5) \u002F 5, 1);\n    idleAction.setEffectiveWeight(0);\n    walkAction.setEffectiveWeight(1 - t);\n    runAction.setEffectiveWeight(t);\n  }\n}\n```\n\n### Additive Blending\n\n```javascript\n\u002F\u002F Base pose\nconst baseAction = mixer.clipAction(baseClip);\nbaseAction.play();\n\n\u002F\u002F Additive layer (e.g., breathing)\nconst additiveAction = mixer.clipAction(additiveClip);\nadditiveAction.blendMode = THREE.AdditiveAnimationBlendMode;\nadditiveAction.play();\n\n\u002F\u002F Convert clip to additive\nTHREE.AnimationUtils.makeClipAdditive(additiveClip);\n```\n\n## Animation Utilities\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Find clip by name\nconst clip = THREE.AnimationClip.findByName(clips, \"Walk\");\n\n\u002F\u002F Create subclip\nconst subclip = THREE.AnimationUtils.subclip(clip, \"subclip\", 0, 30, 30);\n\n\u002F\u002F Convert to additive\nTHREE.AnimationUtils.makeClipAdditive(clip);\nTHREE.AnimationUtils.makeClipAdditive(clip, 0, referenceClip);\n\n\u002F\u002F Clone clip\nconst clone = clip.clone();\n\n\u002F\u002F Get clip duration\nclip.duration;\n\n\u002F\u002F Optimize clip (remove redundant keyframes)\nclip.optimize();\n\n\u002F\u002F Reset clip to first frame\nclip.resetDuration();\n```\n\n## Procedural Animation Patterns\n\n### Smooth Damping\n\n```javascript\n\u002F\u002F Smooth follow\u002Flerp\nconst target = new THREE.Vector3();\nconst current = new THREE.Vector3();\nconst velocity = new THREE.Vector3();\n\nfunction smoothDamp(current, target, velocity, smoothTime, deltaTime) {\n  const omega = 2 \u002F smoothTime;\n  const x = omega * deltaTime;\n  const exp = 1 \u002F (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n  const change = current.clone().sub(target);\n  const temp = velocity\n    .clone()\n    .add(change.clone().multiplyScalar(omega))\n    .multiplyScalar(deltaTime);\n  velocity.sub(temp.clone().multiplyScalar(omega)).multiplyScalar(exp);\n  return target.clone().add(change.add(temp).multiplyScalar(exp));\n}\n\nfunction animate() {\n  current.copy(smoothDamp(current, target, velocity, 0.3, delta));\n  mesh.position.copy(current);\n}\n```\n\n### Spring Physics\n\n```javascript\nclass Spring {\n  constructor(stiffness = 100, damping = 10) {\n    this.stiffness = stiffness;\n    this.damping = damping;\n    this.position = 0;\n    this.velocity = 0;\n    this.target = 0;\n  }\n\n  update(dt) {\n    const force = -this.stiffness * (this.position - this.target);\n    const dampingForce = -this.damping * this.velocity;\n    this.velocity += (force + dampingForce) * dt;\n    this.position += this.velocity * dt;\n    return this.position;\n  }\n}\n\nconst spring = new Spring(100, 10);\nspring.target = 1;\n\nfunction animate() {\n  mesh.position.y = spring.update(delta);\n}\n```\n\n### Oscillation\n\n```javascript\nfunction animate() {\n  const t = clock.getElapsedTime();\n\n  \u002F\u002F Sine wave\n  mesh.position.y = Math.sin(t * 2) * 0.5;\n\n  \u002F\u002F Bouncing\n  mesh.position.y = Math.abs(Math.sin(t * 3)) * 2;\n\n  \u002F\u002F Circular motion\n  mesh.position.x = Math.cos(t) * 2;\n  mesh.position.z = Math.sin(t) * 2;\n\n  \u002F\u002F Figure 8\n  mesh.position.x = Math.sin(t) * 2;\n  mesh.position.z = Math.sin(t * 2) * 1;\n}\n```\n\n## Performance Tips\n\n1. **Share clips**: Same AnimationClip can be used on multiple mixers\n2. **Optimize clips**: Call `clip.optimize()` to remove redundant keyframes\n3. **Disable when off-screen**: Stop mixer updates for invisible objects\n4. **Use LOD for animations**: Simpler rigs for distant characters\n5. **Limit active mixers**: Each mixer.update() has a cost\n\n```javascript\n\u002F\u002F Pause animation when not visible\nmesh.onBeforeRender = () => {\n  action.paused = false;\n};\n\nmesh.onAfterRender = () => {\n  \u002F\u002F Check if will be visible next frame\n  if (!isInFrustum(mesh)) {\n    action.paused = true;\n  }\n};\n\n\u002F\u002F Cache clips\nconst clipCache = new Map();\nfunction getClip(name) {\n  if (!clipCache.has(name)) {\n    clipCache.set(name, loadClip(name));\n  }\n  return clipCache.get(name);\n}\n```\n\n## See Also\n\n- `threejs-loaders` - Loading animated GLTF models\n- `threejs-fundamentals` - Clock and animation loop\n- `threejs-shaders` - Vertex animation in shaders\n",{"name":5,"risk":27,"source":32,"description":7},"main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Fthreejs-animation","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill threejs-animation",{"tool":53,"command":54},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill threejs-animation",{"tool":56,"command":57},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill threejs-animation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fthreejs-animation\u002FSKILL.md",true,[],[62,86,111,121,134,153],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":73,"publishedAt":36},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[68],{"categoryNo":69,"categoryName":70,"taxonomyType":71,"taxonomyTypeDesc":72},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[74,75,76,77,78,79,80,81,82,83,84,85],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":36},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[93,94,95,96,97,98,76,99,100,101,102,22,103,104,105,106,107,108,109,110],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","brew","live","data","google","install","read","across","api",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":36},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[118,119,93,103,104,105,106,97,76,108,120,109,110,22,101,100,99,107,98,96],"trend radar","radar","pulse",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":36},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[128,129,130,131,132,133],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":145,"publishedAt":36},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[140],{"categoryNo":141,"categoryName":142,"taxonomyType":143,"taxonomyTypeDesc":144},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[136,82,146,147,148,85,103,149,150,151,95,152,107],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":36},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[155,160,161,162,107,163,150,164,165,166,167,168],"status","play","go","latest","github","discover","control","cmd","volume"]