three

Synchronize Three.js scenes with HyperFrames seek events for deterministic renders.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/cvenwu/AiFlow --skill three-cvenwu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: three
Source: https://github.com/cvenwu/AiFlow/tree/main/skills/three
Command: npx skills add https://github.com/cvenwu/AiFlow --skill three-cvenwu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js and HyperFrames require tight synchronization to produce deterministic renders across frames and time.

Core Features & Use Cases

  • Deterministic scene rendering by syncing Three.js with HyperFrames seek times.
  • Support for AnimationMixer timelines, camera motion, and shader-driven visuals.
  • Use cases include precise frame-accurate previews and production-ready 3D compositions.

Quick Start

Create a deterministic Three.js scene that responds to hf-seek events in a HyperFrames composition.

Frequently Asked Questions about three

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync Three.js scenes with HyperFrames for deterministic rendering?

To sync Three.js scenes with HyperFrames for deterministic rendering, you must enforce loading assets before seek operations and respond to hf-seek events without relying on wall-clock time. This ensures exact frame matching across animations.

Can I use AnimationMixer timelines in a deterministic Three.js composition?

Yes, AnimationMixer timelines are fully supported in a deterministic Three.js composition. The synchronization mechanism applies to AnimationMixer timelines, camera motion, and shader-driven visuals to produce frame-accurate previews.

Why does my Three.js animation drift when seeking through HyperFrames time?

Three.js animation drifts during HyperFrames seeks when using wall-clock time or unlinked asset loading. You must create scene, camera, and renderer synchronously and respond to hf-seek events to maintain exact frame matching.

Does this approach support frame-accurate camera motion and shader-driven visuals?

Yes, this approach supports frame-accurate camera motion and shader-driven visuals. It enforces synchronous creation of scene, camera, and renderer elements to ensure exact frame matching across all 3D compositions and textures.

What is the best way to handle texture and asset loading for deterministic Three.js renders?

The best way to handle texture and asset loading for deterministic Three.js renders is to enforce loading all assets before any seek operation. This prevents frame mismatching and ensures your 3D compositions remain perfectly synchronized.

Are there limitations when using wall-clock time for Three.js camera motion synchronization?

Using wall-clock time for Three.js camera motion synchronization breaks determinism. You must respond exclusively to hf-seek events and create scene, camera, and renderer synchronously to achieve exact frame matching across animations.