技能 编程开发 Three.js程序化动画

Three.js程序化动画

v20260922
threejs-procedural-animation
在 Three.js 中构建高级程序化动画,用于发射运动、重力转向、分级、对接、旋转对齐、弹簧跟随、碎片剥离与四元数控制,并保证帧率无关的响应。
获取技能
485 次下载
概览

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.
  3. Derive target position/orientation from that frame.
  4. Use analytic kinematics for authored travel and springs for responsive convergence.
  5. Preserve world transforms when detaching children from a hierarchy.
  6. Separate translation, alignment, spin, and secondary debris state.
  7. 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.

信息
Category 编程开发
Name threejs-procedural-animation
版本 v20260922
大小 5.3KB
更新时间 2026-09-30
语言