Rig

1// Camera parallax + object rotation rig, driven by the cursor with lag, idle Lissajous drift.
2import * as THREE from "three/webgpu";
3import { damp } from "../core/ease";
4import { input, heroFrame } from "../core/state";
5import { D } from "../dials/store";
6
7export class Rig {
8  yaw = 0;
9  pitch = 0; // smoothed object rotation (radians)
10  parYaw = 0;
11  parPitch = 0; // smoothed camera parallax (radians)
12  idleBlend = 0; // 0 = cursor control, 1 = idle drift
13  readonly lookAt = new THREE.Vector3();
14  private readonly base = new THREE.Vector3();
15  private readonly spherical = new THREE.Spherical();
16
17  update(camera: THREE.PerspectiveCamera, object: THREE.Object3D, t: number, dt: number) {
18    const framed = heroFrame.enabled && heroFrame.framing;
19    const c = D.camera;
20    const frame = framed ? heroFrame : c;
21    const idle = t - input.lastMoveT > c.idleDelay;
22    this.idleBlend = damp(this.idleBlend, idle ? 1 : 0, idle ? 1.5 : 0.6, dt);
23    const cx = input.inside ? input.x : 0,
24      cy = input.inside ? input.y : 0;
25    const w = (2 * Math.PI) / Math.max(1, c.idlePeriod);
26    const driftYaw = Math.sin(t * w) * c.idleAmplitude,
27      driftPitch = Math.sin(t * w * 1.37 + 1.1) * c.idleAmplitude * 0.5;
28    const targetYaw = THREE.MathUtils.degToRad(
29      frame.baseYaw + THREE.MathUtils.lerp(cx * frame.rotateYaw, driftYaw, this.idleBlend),
30    );
31    const targetPitch = THREE.MathUtils.degToRad(
32      frame.basePitch + THREE.MathUtils.lerp(-cy * frame.rotatePitch, driftPitch, this.idleBlend),
33    );
34    this.yaw = damp(this.yaw, targetYaw, c.rotationLag * 0.35, dt);
35    this.pitch = damp(this.pitch, targetPitch, c.rotationLag * 0.35, dt);
36    object.rotation.set(this.pitch, this.yaw, 0, "YXZ");
37
38    const pr = THREE.MathUtils.degToRad(frame.parallaxRange);
39    this.parYaw = damp(this.parYaw, -cx * pr, c.parallaxSmoothing * 0.35, dt);
40    this.parPitch = damp(this.parPitch, cy * pr * 0.6, c.parallaxSmoothing * 0.35, dt);
41    this.lookAt.set(framed ? heroFrame.lookAtX : 0, frame.lookAtY, 0);
42    if (heroFrame.cameraOverride) {
43      // Exported camera motion owns the view, while the existing rig above continues to animate the object.
44      heroFrame.cameraOverride(camera);
45      return;
46    }
47    const base = this.base.set(0, frame.height, frame.distance).sub(this.lookAt);
48    const sph = this.spherical.setFromVector3(base);
49    sph.theta += this.parYaw;
50    sph.phi = THREE.MathUtils.clamp(sph.phi + this.parPitch, 0.1, Math.PI - 0.1);
51    camera.position.setFromSpherical(sph).add(this.lookAt);
52    camera.lookAt(this.lookAt);
53    if (camera.fov !== frame.fov) {
54      camera.fov = frame.fov;
55      camera.updateProjectionMatrix();
56    }
57  }
58}