three

Render Three.js scenes deterministically using HyperFrames time via hf-seek events.

1|Updated May 7, 2026

Search Tags:#graphics #rendering #deterministic #webgl #three.js #hf-seek

Ready to run

npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill three-wesleysimplicio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: three
Source: https://github.com/wesleysimplicio/simplicio-mapper/tree/main/.skills/three
Command: npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill three-wesleysimplicio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames users need reliable, repeatable rendering of Three.js scenes that align strictly with its time axis, avoiding drift from wall-clock progress.

Core Features & Use Cases

Deterministic rendering: drive rendering from HyperFrames time for predictable visuals.
HF integration: subscribes to hf-seek and updates scene accordingly.
Animation and camera control: supports AnimationMixer timelines, camera motion, and shader-driven visuals.
Asset preloading guidance: encourages preloading models/textures before seek to avoid stalls.

Quick Start

Initialize a Three.js scene within a canvas, set up a renderer, and render at the requested HyperFrames time using the hf-seek events.

Frequently Asked Questions about three

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

FAQPage Schema

How do I render deterministic Three.js scenes aligned to HyperFrames time?▼

Deterministic Three.js rendering aligns visuals to HyperFrames time by subscribing to the hf-seek event, updating scene objects, camera motion, and shader-driven visuals at the requested frame instead of relying on wall-clock progress.

Why does my Three.js animation drift out of sync in HyperFrames compositions?▼

Three.js animation drifts in HyperFrames when rendering relies on wall-clock time. Subscribing to the hf-seek event drives rendering from the HyperFrames time axis, ensuring repeatable and predictable frame playback without drift.

What do I need to set up before rendering Three.js scenes with hf-seek?▼

Before rendering Three.js scenes with hf-seek, you must implement a scene, camera, renderer, and preload all models and textures. Preloading assets prior to seek prevents playback stalls in deterministic HF-powered compositions.

Can I use AnimationMixer and shader-driven visuals with deterministic Three.js rendering?▼

Yes, deterministic Three.js rendering supports AnimationMixer timelines, camera motion, and shader-driven visuals. These are updated during the hf-seek event to maintain strict alignment with HyperFrames time for precise playback.

What are the limitations of using wall-clock time for Three.js rendering in HyperFrames?▼

Using wall-clock time for Three.js rendering in HyperFrames causes unreliable and non-repeatable visuals. Avoiding wall-clock progress and driving rendering exclusively through the hf-seek event ensures strict alignment with the HyperFrames time axis.