three

Installation

Summary

Deterministic Three.js scene rendering synchronized to HyperFrames timeline events.

Renders scenes from explicit HyperFrames time via hf-seek events, not wall-clock time or requestAnimationFrame
Supports AnimationMixer timeline seeking for GLTF clips and authored animations
Requires synchronous scene, camera, renderer, and asset creation upfront; load models and textures before seeking begins
Use for product spins, camera motion, shader-driven visuals, particles with seeded data, and deterministic 3D compositions

SKILL.md

Three.js for HyperFrames

HyperFrames supports Three.js through its three runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.

Contract

Create the scene, camera, renderer, materials, and assets synchronously when possible.
Render from HyperFrames time, not wall-clock time.
Listen for the hf-seek event and render exactly that time.
Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.
Avoid requestAnimationFrame or renderer.setAnimationLoop as the source of truth for render-critical motion.

The adapter sets window.__hfThreeTime and dispatches new CustomEvent("hf-seek", { detail: { time } }) on each seek.