Models, animation & picking

 DCC tool (Blender, Maya…)
      │ export glTF 2.0 (.glb)
      ▼
 optimize: gltf-transform / gltfpack
      │ dedupe, prune, weld, simplify, resize textures,
      │ Draco or Meshopt geometry, KTX2 / WebP textures
      ▼
 GLTFLoader (+ DRACOLoader, KTX2Loader, MeshoptDecoder)
      │ gltf.scene: Group   gltf.animations: AnimationClip[]
      ▼
 scene.add(gltf.scene); AnimationMixer(gltf.scene)

import { GLTFLoader } from
  "three/addons/loaders/GLTFLoader.js";
import type { GLTF } from
  "three/addons/loaders/GLTFLoader.js";
 
const loader = new GLTFLoader();
const gltf: GLTF = await loader.loadAsync(
  "/models/robot.glb",
  (e) => console.log(`${e.loaded} / ${e.total} bytes`),
);
scene.add(gltf.scene);

import { DRACOLoader } from
  "three/addons/loaders/DRACOLoader.js";
import { KTX2Loader } from
  "three/addons/loaders/KTX2Loader.js";
import { MeshoptDecoder } from
  "three/addons/libs/meshopt_decoder.module.js";
 
const draco = new DRACOLoader()
  .setDecoderPath("/draco/");     // copied from libs/draco
const ktx2 = new KTX2Loader()
  .setTranscoderPath("/basis/")   // copied from libs/basis
  .detectSupport(renderer);       // needs the renderer
 
const loader = new GLTFLoader()
  .setDRACOLoader(draco)
  .setKTX2Loader(ktx2)
  .setMeshoptDecoder(MeshoptDecoder);

# glTF Transform: one-shot web optimization
npx @gltf-transform/cli optimize in.glb out.glb \
  --compress meshopt --texture-compress webp
npx @gltf-transform/cli optimize in.glb out.glb \
  --compress draco --texture-compress ktx2
npx @gltf-transform/cli inspect out.glb   # size report
 
# gltfpack (meshoptimizer): fast, Meshopt-based
gltfpack -i in.glb -o out.glb -cc -tc

import { LoadingManager } from "three";
 
const manager = new LoadingManager();
manager.onStart = (url, loaded, total) => {};
manager.onProgress = (url, loaded, total) => {
  bar.style.width = `${(loaded / total) * 100}%`;
};
manager.onLoad = () => overlay.remove();
manager.onError = (url) => console.error("failed", url);
 
const gltfLoader = new GLTFLoader(manager);
const texLoader = new TextureLoader(manager);

const root = gltf.scene;
const wheel = root.getObjectByName("Wheel_FL"); // DFS
const meshes: Mesh[] = [];
root.traverse((o) => {
  if ((o as Mesh).isMesh) {
    const m = o as Mesh;
    m.castShadow = m.receiveShadow = true;
    meshes.push(m);
  }
});

 AnimationClip  = named set of KeyframeTracks ("Walk", 1.2 s)
   KeyframeTrack  = property path + times[] + values[]
        │
 mixer.clipAction(clip) ─► AnimationAction  (play state, weight,
        │                                    timeScale, loop, fades)
 AnimationMixer(root) ── mixer.update(dt) each frame
        │   blends all running actions per property
        ▼
 root's objects: position / quaternion / scale / morph weights

const mixer = new AnimationMixer(gltf.scene);
const clip = AnimationClip.findByName(
  gltf.animations, "Idle",
)!;
const idle = mixer.clipAction(clip);
idle.play();
 
renderer.setAnimationLoop((t) => {
  timer.update(t);
  mixer.update(timer.getDelta()); // seconds
  renderer.render(scene, camera);
});

// cross-fade idle → walk over 0.3 s
function to(next: AnimationAction, from: AnimationAction) {
  next.reset().setEffectiveWeight(1).play();
  from.crossFadeTo(next, 0.3, true);
}
 
// one-shot "jump" that holds the last frame
jump.setLoop(LoopOnce, 1);
jump.clampWhenFinished = true;
mixer.addEventListener("finished", (e) => {
  if (e.action === jump) to(idle, jump);
});

const face = root.getObjectByName("Face") as Mesh;
const i = face.morphTargetDictionary!["smile"];
face.morphTargetInfluences![i] = 0.8;
 
// procedural look-at on top of the animation: after
// mixer.update(), before render
const head = skeleton.getBoneByName("Head")!;
head.rotation.y += yawOffset;

const times = [0, 0.5, 1];
const y = new VectorKeyframeTrack(".position",
  times, [0, 0, 0,   0, 1, 0,   0, 0, 0]);
const fade = new NumberKeyframeTrack(".material.opacity",
  times, [1, 0.3, 1]);
const q0 = new Quaternion();
const q1 = new Quaternion().setFromAxisAngle(
  new Vector3(0, 1, 0), Math.PI);
const spin = new QuaternionKeyframeTrack(".quaternion",
  [0, 1], [...q0.toArray(), ...q1.toArray()]);
 
const clip = new AnimationClip("bob", -1, [y, fade, spin]);
// -1: duration computed from the tracks
new AnimationMixer(mesh).clipAction(clip).play();

 pointer (clientX, clientY)  ── rect ──►  NDC  x,y ∈ [-1, 1]  (y up)
                                            │ setFromCamera
                                            ▼
                         ray from camera through the pixel
                                            │ intersectObjects
                                            ▼
               Intersection[] sorted by distance (nearest first)

const raycaster = new Raycaster();
const ndc = new Vector2();
 
function pick(e: PointerEvent): Intersection | undefined {
  const r = canvas.getBoundingClientRect();
  ndc.x = ((e.clientX - r.left) / r.width) * 2 - 1;
  ndc.y = -((e.clientY - r.top) / r.height) * 2 + 1;
  raycaster.setFromCamera(ndc, camera);
  // recursive = true by default
  return raycaster.intersectObjects(pickables)[0];
}

const { calls, triangles } = renderer.info.render;
const { geometries, textures } = renderer.info.memory;
console.log({ calls, triangles, geometries, textures });

import type { WebGLRenderer } from "three";
import { GLTFLoader } from
  "three/addons/loaders/GLTFLoader.js";
import type { GLTF } from
  "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from
  "three/addons/loaders/DRACOLoader.js";
import { KTX2Loader } from
  "three/addons/loaders/KTX2Loader.js";
import { MeshoptDecoder } from
  "three/addons/libs/meshopt_decoder.module.js";
 
export function createModelLoader(r: WebGLRenderer) {
  const draco = new DRACOLoader().setDecoderPath("/draco/");
  const ktx2 = new KTX2Loader()
    .setTranscoderPath("/basis/").detectSupport(r);
  const loader = new GLTFLoader()
    .setDRACOLoader(draco).setKTX2Loader(ktx2)
    .setMeshoptDecoder(MeshoptDecoder);
  const cache = new Map<string, Promise<GLTF>>();
  return {
    load(url: string): Promise<GLTF> {
      let p = cache.get(url);
      if (!p) cache.set(url, (p = loader.loadAsync(url)));
      return p;
    },
    dispose(): void { draco.dispose(); ktx2.dispose(); },
  };
}

import { AnimationMixer, LoopRepeat } from "three";
import type { AnimationAction, Object3D, AnimationClip }
  from "three";
 
type State = "Idle" | "Walk" | "Run";
 
export class Character {
  readonly mixer: AnimationMixer;
  private actions = new Map<State, AnimationAction>();
  private current: AnimationAction;
 
  constructor(root: Object3D, clips: AnimationClip[]) {
    this.mixer = new AnimationMixer(root);
    for (const s of ["Idle", "Walk", "Run"] as const) {
      const clip = clips.find((c) => c.name === s);
      if (!clip) throw new Error(`missing clip ${s}`);
      const a = this.mixer.clipAction(clip);
      a.setLoop(LoopRepeat, Infinity);
      this.actions.set(s, a);
    }
    this.current = this.actions.get("Idle")!;
    this.current.play();
  }
 
  set(state: State, fade = 0.25): void {
    const next = this.actions.get(state)!;
    if (next === this.current) return;
    next.reset().play();
    next.syncWith(this.current); // keep foot phase
    this.current.crossFadeTo(next, fade, true);
    this.current = next;
  }
 
  update(dt: number): void { this.mixer.update(dt); }
}

import { Raycaster, Vector2 } from "three";
import type { Mesh, MeshStandardMaterial, Object3D }
  from "three";
 
const ray = new Raycaster();
const ndc = new Vector2();
let hovered: Mesh | null = null;
let down = { x: 0, y: 0 };
 
function hit(e: PointerEvent, targets: Object3D[]) {
  const r = canvas.getBoundingClientRect();
  ndc.set(((e.clientX - r.left) / r.width) * 2 - 1,
    -((e.clientY - r.top) / r.height) * 2 + 1);
  ray.setFromCamera(ndc, camera);
  return ray.intersectObjects(targets)[0];
}
 
canvas.addEventListener("pointermove", (e) => {
  const obj = (hit(e, pickables)?.object as Mesh) ?? null;
  if (obj === hovered) return;
  if (hovered) setGlow(hovered, 0);
  if (obj) setGlow(obj, 0.4);
  hovered = obj;
  canvas.style.cursor = obj ? "pointer" : "";
});
canvas.addEventListener("pointerdown", (e) => {
  down = { x: e.clientX, y: e.clientY };
});
canvas.addEventListener("click", (e) => {
  const moved = Math.hypot(e.clientX - down.x,
    e.clientY - down.y);
  if (moved > 4) return; // it was a drag
  const h = hit(e, pickables);
  if (h) select(h.object, h.point);
});
 
function setGlow(m: Mesh, v: number): void {
  const mat = m.material as MeshStandardMaterial;
  mat.emissive.setScalar(v); // clone shared mats first
}

import { Color, Matrix4 } from "three";
import type { InstancedMesh } from "three";
 
const red = new Color("red");
const zero = new Matrix4().makeScale(0, 0, 0);
 
function onPick(mesh: InstancedMesh, e: PointerEvent) {
  const h = hit(e, [mesh]); // from the previous recipe
  if (h?.instanceId === undefined) return;
  if (e.shiftKey) {
    mesh.setMatrixAt(h.instanceId, zero); // "delete"
    mesh.instanceMatrix.needsUpdate = true;
  } else {
    mesh.setColorAt(h.instanceId, red);
    mesh.instanceColor!.needsUpdate = true;
  }
}

import { AnimationMixer } from "three";
import type { AnimationClip } from "three";
import { clone } from "three/addons/utils/SkeletonUtils.js";
import type { GLTF } from
  "three/addons/loaders/GLTFLoader.js";
 
const mixers: AnimationMixer[] = [];
 
export function spawn(gltf: GLTF, n: number, clip: string) {
  const c: AnimationClip | undefined =
    gltf.animations.find((a) => a.name === clip);
  for (let i = 0; i < n; i++) {
    const unit = clone(gltf.scene);
    unit.position.set((i % 10) * 1.5, 0, Math.floor(i / 10));
    scene.add(unit);
    const mixer = new AnimationMixer(unit);
    if (c) {
      const a = mixer.clipAction(c);
      a.time = Math.random() * c.duration; // desync
      a.play();
    }
    mixers.push(mixer);
  }
}
// in the loop: for (const m of mixers) m.update(dt);