Help guide

3D scenes, cameras, and lights

Updated June 20, 2026

3D scenes, cameras, and lights

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

A reliable 3D scene starts with scale, camera, lights, and depth before procedural or interactive behavior is added.

Camera fields

  • Camera3D.type is perspective or orthographic.
  • Required camera field: position: [x, y, z].
  • Optional fields include rotation, fov, near, far, size, tonemap, exposureStops, and agxLook.

Light fields

  • Light3D.type supports ambient, directional, point, spot, and hemisphere.
  • Required light fields are id, type, name, color, and intensity.
  • Optional fields include position, castShadow, visible, angle, penumbra, distance, decay, and groundColor.

Verification

  • Check first-frame framing, resize framing, depth clipping, and interaction range.
  • Use stable scene units so camera distance, object positions, physics values, and procedural fields stay understandable.
  • Use debug snapshots and screenshot checks when lighting, depth, or cross-scene texture behavior changes.

Verified runnable example

This guide points to proof-backed sample coverage. The full ledger lives in Generated examples and proof log.

Canvas: Fill rule diagnostic

  • Source: faster-motion/demo/tests/canvas/fillrule-diagnostic/fillrule-diagnostic.fmtion
  • Expected output: A contained Canvas scene renders paired path cases so nonzero and evenodd fill handling can be compared visually.
  • Validation: Schema validation passed. Runtime proof reports zero blocking runtime issues and 10 rendered objects; the accepted metadata note is preserved in the proof ledger.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-mobile.png

Guide-specific sample target: Camera and light sample with perspective and orthographic variants, first-frame screenshot, and resize screenshot.

Faster Motion docs

Use this local map together with the left navigation. The source-backed content tree controls the main article order; this section keeps related pages one click away.

Start

DOM animation

Canvas animation

3D and procedural

Reference

Was this guide helpful?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy