skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

three

Creates deterministic Three.js scenes driven by HyperFrames seek events.

1|Updated Aug 18, 2026
Search Tags:#webgl#three.js#deterministic rendering#3d animation#video composition#hyperframes#animationmixer
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill three-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: three
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/three
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill three-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Three.js scenes normally animate with wall-clock time and free-running render loops, which breaks frame-accurate video rendering in HyperFrames. This Skill provides the adapter contract and patterns to render every frame deterministically from HyperFrames time. ## Core Features & Use Cases - Deterministic Rendering: Renders scenes from the hf-seek event time instead of requestAnimationFrame, Date.now(), or clock deltas. - AnimationMixer Seeking: Seeks GLTF clip animations directly with mixer.setTime(time) for frame-exact playback. - Asset Loading Discipline: Ensures models, textures, and HDRIs load before render-critical seeking rather than at seek time. - Use Case: Build a product-spin video where a 3D model rotates exactly 0.7 radians per second of composition time, then validate it with npx hyperframes lint and npx hyperframes validate. ## Quick Start Use the three skill to create a HyperFrames composition with a rotating Three.js icosahedron that renders deterministically from 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 Three.js scenes deterministically in HyperFrames?▼

Listen for the hf-seek CustomEvent and render from event.detail.time instead of using requestAnimationFrame or renderer.setAnimationLoop. The adapter sets window.__hfThreeTime and dispatches hf-seek on each seek so every frame is reproducible.

How to seek GLTF animation clips to a specific time in Three.js?▼

Call mixer.setTime(time) on the AnimationMixer inside your renderAt function, then render the scene. If multiple mixers exist, seek all of them from the same time value.

Can I load GLTF models or textures during a HyperFrames seek?▼

No. Models, textures, and HDRIs must be loaded before render-critical seeking begins. Fetching assets at seek time breaks determinism and can cause missing or flickering frames.

Why does my Three.js animation look wrong in HyperFrames video output?▼

Common causes are using Date.now() or performance.now() for state updates, leaving motion in a free-running animation loop, or device-pixel-ratio dependent sizing. Pin the renderer size and pixel ratio and derive all state from the seek time.

What are the limitations of post-processing in HyperFrames Three.js scenes?▼

Post-processing passes that depend on previous frame history should be avoided unless you can reconstruct the full state from time alone. Frame-history effects break determinism because seeks can jump to arbitrary times.

Related Skills

Explore More Software Engineering Skills→
heygen-comheygen-com
40.2k

three

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

Official
Advanced
heygen-comheygen-com
40.2k

hyperframes-cli

Scaffold, lint, preview, and render HTML-based HyperFrames compositions.

Official
Intermediate
lens-studio-devslens-studio-devs
16

camera-and-rendering

Configure cameras, screen-space rendering, and RenderMeshVisual materials in Lens Studio scenes.

Official
Intermediate
EnztunEnztun

web-shader-extractor

Extract WebGL, CSS, and Canvas effects from web pages.

Community
Advanced