scottstts/threejs-awesome-graphics-agent-skills

threejs-procedural-animation

Build advanced procedural animation in Three.js.

Ver código-fonte
Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

Procedural Animation

Animate semantic state, not unrelated transform curves. Define phases, coordinate frames, velocities, and ownership before writing per-frame updates.

Build order

  1. Define the timeline phases and event boundaries.
  2. Choose the frame for each motion: world, subject local, orbital radial,

docking axis, or camera shot.

  1. Derive target position/orientation from that frame.
  2. Use analytic kinematics for authored travel and springs for responsive

convergence.

  1. Preserve world transforms when detaching children from a hierarchy.
  2. Separate translation, alignment, spin, and secondary debris state.
  3. Clamp integration delta and reset every state variable on replay/disposal.

Read references/procedural-motion-and-docking-systems.md for the launch, staging, docking, debris, spring, quaternion, and frame-rate-independent response implementations.

Non-negotiable rules

  • Use elapsed seconds and deltaSeconds; do not make motion frame-count based.
  • Derive orientation from direction/frame, then apply roll or spin as a

separate quaternion.

  • Decompose docking error into axial and radial components.
  • Switch from spring convergence to an exact terminal pose at the end of a

sequence.

  • When reparenting an animated object, capture world position, quaternion, and

scale before removal.

  • Use seeded randomness when motion must be reproducible.
  • Keep visual shake in a bounded envelope and separate it from trajectory.

Routing boundary

Use $threejs-camera-direction for shot composition and camera handoffs. Use $threejs-procedural-vfx when the deliverable is primarily plasma, sparks, or effect pooling rather than object transform motion.

do mesmo repositório

Mais Skills

Todos os Skills
scottstts
Comunidade

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.

instalações
2
GitHub Stars
911
Atualizado
15 de out.
scottstts
Comunidade

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.

instalações
2
GitHub Stars
911
Atualizado
15 de out.
scottstts
Comunidade

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

instalações
2
GitHub Stars
911
Atualizado
15 de out.
scottstts
Comunidade

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.

instalações
2
GitHub Stars
911
Atualizado
15 de out.