scottstts/threejs-awesome-graphics-agent-skills

threejs-camera-direction

Direct advanced Three.js camera systems.

ソースを見る
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

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.

同じリポジトリから

関連する Skills

すべての Skills
scottstts
コミュニティ

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.

導入数
2
GitHub Stars
911
更新日
10月15日
scottstts
コミュニティ

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.

導入数
2
GitHub Stars
911
更新日
10月15日
scottstts
コミュニティ

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.

導入数
2
GitHub Stars
911
更新日
10月15日
scottstts
コミュニティ

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.

導入数
2
GitHub Stars
911
更新日
10月15日