scottstts/threejs-awesome-graphics-agent-skills

threejs-camera-direction

Direct advanced Three.js camera systems.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

Camera Direction

Treat the camera as an authored visual system, not a passive viewport. Compose the subject, establish scale, choose a stable up frame, and make every mode handoff explicit.

Build order

  1. Define the design frame: subject size, screen occupancy, lens, near/far,

motion, and horizon/up convention.

  1. Build camera targets in semantic frames: ship, body surface, docking axis,

or scene-authored shot.

  1. Derive position and orientation independently, then combine them once.
  2. Add input orbit/look only inside declared yaw/pitch and spatial constraints.
  3. Add frame-rate-independent follow or a bounded spring where the reference

uses inertia.

  1. Snapshot and restore camera projection/state when a scene owns it.
  2. Test mode transitions, cuts, pointer-lock reacquisition, resize, and large

coordinates.

Read references/camera-rig-and-cinematic-systems.md for exact chase/side/orbit rigs, projection values, transition rules, floating-origin shot, pointer controls, and implementation limits.

Non-negotiable rules

  • Use subject dimensions to derive offsets; do not tune one fixed distance for

differently scaled assets.

  • For planetary motion, derive up from the dominant body rather than global Y.
  • Interpolate position with lerp and orientation with slerp.
  • During an explicit handoff, use one interpolation stage. Do not stack a

transition blend and a second follow smoother over the same interval.

  • Re-sync yaw/pitch from the camera when pointer lock is acquired.
  • Update the projection matrix whenever FOV, near, far, or aspect changes.
  • Keep stars or infinite backgrounds camera-relative when large translation

would create false parallax or precision loss.

  • Restore camera and input ownership on scene disposal.

Routing boundary

Use $threejs-procedural-animation for object motion timelines, springs, docking, staging, and debris. This skill owns how the scene is viewed and how camera modes hand off.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
scottstts
Społeczność

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-bloom

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-image-pipeline

Build a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO or bent normals; bloom; eye adaptation; tone mapping; 3D LUT grading; effect-local render targets; and pass diagnostics.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź