Files
yawn/docs/guide/cameras.md
T
Ampandheaust ded70a3cb4 Add interactive tutorial playgrounds
Embed editable split-view examples throughout the guide, restore the full LFS-backed Sponza demo, batch glTF hydration, honor hierarchical transforms, and report transformed BVH picks with a live FPS counter.

Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
2026-08-20 09:21:21 +00:00

1.7 KiB

Cameras and controls

Every camera allocates a generic cameras slot and a transform node. Projection, lens, controller state, and transforms are direct SAB rows after construction.

Shared lens and projection controls

const camera = new Camera(scene, {
  fov: Math.PI / 3,
  near: 0.05,
  far: 2000,
  focalLength: 50,
  aperture: 2.8,
  focusDistance: 8,
});
await camera.ready;

camera.projection = "orthographic";
camera.orthoSize = 12;
camera.projection = "perspective";

fov, aspect, near, far, orthoSize, focalLength, aperture, focusDistance, and sensorWidth all write the camera's shared row.

Arc rotate

const orbit = new ArcRotateCamera(scene, {
  alpha: 0,
  beta: Math.PI / 3,
  radius: 6,
  target: mesh,
  controls: {
    element: canvas,
    pointer: true,      // left orbit, right pan, wheel zoom
    controller: true,  // sticks + triggers
  },
});
await orbit.ready;

Free spectator camera

const free = new FreeCamera(scene, {
  position: [0, 1, 5],
  controls: {
    element: canvas,
    keyboard: true,    // WASD + Space/Ctrl
    pointer: true,     // click for pointer lock, mouse to look
    controller: true,
    speed: 6,
  },
});
await free.ready;

Follow a character

const follow = new FollowCamera(scene, {
  target: player,
  distance: 5,
  height: 1.8,
  smoothing: 0.12,
});
await follow.ready;

follow.target = anotherPlayer;
follow.distance = 7;
follow.stop();
follow.start();

The input and follow loops never post camera updates to core: they read and mutate the same camera, position, and quaternion rows that any other worker can use.

<script setup> import Playground from "../.vitepress/Playground.vue"; </script>