skills.rest
wesleysimplicio
wesleysimplicioCOMMUNITY
Explore all skills by this author →
𝕏@wesleysimplicGitHub

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
One-click install
npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill three-wesleysimplicio
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
MonichreMonichre

threejs-fundamentals

Bootstrap Three.js scenes with cameras, renderers, and animation loops.

Community
Basic
heygen-comheygen-com
40.2k

three

Render deterministic Three.js scenes synced to HyperFrames time via hf-seek events.

Official
Advanced
compozycompozy
182

three

Render deterministic Three.js/WebGL scenes from HyperFrames time using hf-seek events.

Official
Intermediate
boraoztuncboraoztunc
248

three

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

Community
Advanced