threejs-animation

import * as THREE from "three";
 
// Simple procedural animation
const clock = new THREE.Clock();
 
function animate() {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();
 
  mesh.rotation.y += delta;
  mesh.position.y = Math.sin(elapsed) * 0.5;
 
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// Create animation clip
const times = [0, 1, 2]; // Keyframe times (seconds)
const values = [0, 1, 0]; // Values at each keyframe
 
const track = new THREE.NumberKeyframeTrack(
  ".position[y]", // Property path

// Number track (single value)
new THREE.NumberKeyframeTrack(".opacity", times, [1, 0]);
new THREE.NumberKeyframeTrack(".material.opacity", times, [1, 0]);
 
// Vector track (position, scale)

const track = new THREE.VectorKeyframeTrack(".position", times, values);
 
// Interpolation
track.setInterpolation(THREE.InterpolateLinear); // Default
track.setInterpolation(THREE.InterpolateSmooth); // Cubic spline
track.setInterpolation(THREE.InterpolateDiscrete); // Step function

const mixer = new THREE.AnimationMixer(model);
 
// Create action from clip
const action = mixer.clipAction(clip);
action.play();
 
// Update in animation loop
function animate() {
  const delta = clock.getDelta();
  mixer.update(delta); // Required!

mixer.addEventListener("finished", (e) => {
  console.log("Animation finished:", e.action.getClip().name);
});
 
mixer.addEventListener("loop", (e) => {
  console.log("Animation looped:", e.action.getClip().name);
});

const action = mixer.clipAction(clip);
 
// Playback control
action.play();
action.stop();
action.reset();
action.halt(fadeOutDuration);
 
// Playback state
action.isRunning();

// Fade in
action.reset().fadeIn(0.5).play();
 
// Fade out
action.fadeOut(0.5);
 
// Crossfade between animations
const action1 = mixer.clipAction(clip1);
const action2 = mixer.clipAction(clip2);
 
action1.play();

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
const loader = new GLTFLoader();
loader.load("model.glb", (gltf) => {
  const model = gltf.scene;
  scene.

// Access skeleton from skinned mesh
const skinnedMesh = model.getObjectByProperty("type", "SkinnedMesh");
const skeleton = skinnedMesh.skeleton;
 
// Access bones
skeleton.bones.forEach((bone) => {
  console.log(bone.name, bone.position, bone.rotation);
});
 
// Find specific bone by name

function animate() {
  const time = clock.getElapsedTime();
 
  // Animate bone
  const headBone = skeleton.bones.find((b) => b.name === "Head");
  if (headBone) {
    headBone.rotation.y = Math.sin(time) * 0.3;
  }

// Attach object to bone
const weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);
const handBone = skeleton.bones.find((b) => b.name === "RightHand");
if (handBone) handBone.add(weapon);
 
// Offset attachment
weapon.position.set(0, 0, 

// Morph targets are stored in geometry
const geometry = mesh.geometry;
console.log("Morph attributes:", Object.keys(geometry.morphAttributes));
 
// Access morph target influences
mesh.morphTargetInfluences; // Array of weights
mesh.morphTargetDictionary; // Name -> index mapping
 
// Set morph target by index
mesh.morphTargetInfluences[0] = 0.5;
 
// Set by name
const

// Procedural
function animate() {
  const t = clock.getElapsedTime();
  mesh.morphTargetInfluences[0] = (Math.sin(t) + 1) / 2;
}
 
// With keyframe animation
const track = new THREE.NumberKeyframeTrack(

// Setup actions
const idleAction = mixer.clipAction(idleClip);
const walkAction = mixer.clipAction(walkClip);
const runAction = mixer.clipAction(runClip);
 
// Play all with different weights
idleAction.play();
walkAction.

// Base pose
const baseAction = mixer.clipAction(baseClip);
baseAction.play();
 
// Additive layer (e.g., breathing)
const additiveAction = mixer.clipAction(additiveClip);
additiveAction.blendMode = THREE.AdditiveAnimationBlendMode;
additiveAction.play();
 
// Convert clip to additive
THREE.AnimationUtils.makeClipAdditive(additiveClip);

import * as THREE from "three";
 
// Find clip by name
const clip = THREE.AnimationClip.findByName(clips, "Walk");
 
// Create subclip
const subclip = THREE.AnimationUtils.subclip(clip, "subclip", 0, 30, 

// Smooth follow/lerp
const target = new THREE.Vector3();
const current = new THREE.Vector3();
const velocity = new THREE.Vector3();
 
function smoothDamp(

class Spring {
  constructor(stiffness = 100, damping = 10) {
    this.stiffness = stiffness;
    this.damping = damping;
    this.position = 0;
    this.velocity = 0;

function animate() {
  const t = clock.getElapsedTime();
 
  // Sine wave
  mesh.position.y = Math.sin(t * 2) * 0.5;
 
  // Bouncing
  mesh.position.y = Math.abs(Math.sin(t * 3)) *

// Pause animation when not visible
mesh.onBeforeRender = () => {
  action.paused = false;
};
 
mesh.onAfterRender = () => {
  // Check if will be visible next frame
  if (!isInFrustum(mesh)) {
    action.paused = true;
  }
};