skills.rest
heygen-com
heygen-comOFFICIAL
Explore all skills by this author →
GitHub

three

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

40.2k|3.8k|Updated Mar 10, 2026
Search Tags:#webgl#three.js#scene-management#animation-mixer#hyperframes#deterministic-rendering#hf-seek
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill three
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: three
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/three
Command: npx skills add https://github.com/heygen-com/hyperframes --skill three

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js integration in HyperFrames enables deterministic rendering by driving the scene from HyperFrames time and reacting to hf-seek events, ensuring frame-accurate visuals without relying on wall-clock time.

Core Features & Use Cases

  • Deterministic rendering of Three.js scenes across frames using HyperFrames time.
  • Responding to hf-seek events to render the exact frame for playback or encoding.
  • Preloading models, textures, and shaders before render-critical seeking to avoid latency.

Quick Start

Build a deterministic Three.js scene using the HyperFrames three adapter and render at the requested time via the hf-seek event.

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 for frame-accurate video encoding?▼

Yes, by listening for hf-seek events, the scene updates to the exact time requested for that frame, bypassing wall-clock timing to produce deterministic offline rendering outputs.

Why does my Three.js animation drop frames during offline rendering?▼

Dropped frames occur when relying on wall-clock time. Syncing AnimationMixer timelines to HyperFrames time and handling hf-seek events allows exact frame rendering without timing drift.

How do I preload GLTF models before rendering a Three.js scene?▼

Preload GLTF models, textures, and shaders before render-critical seeking to avoid latency. This ensures all assets are fully loaded so HyperFrames can request exact frames without delays.

Does Three.js work with HyperFrames for camera motion and animation timelines?▼

Yes, Three.js integrates with HyperFrames by driving camera motion and AnimationMixer timelines from HyperFrames time, supporting 3D compositions requiring exact frame timing for rendered outputs.

What is deterministic rendering for Three.js scene management?▼

Deterministic rendering drives Three.js scene management from HyperFrames time, reacting to hf-seek events to render exact frames, bypassing wall-clock time for frame-accurate offline outputs.

Related Skills

Explore More Software Engineering Skills→
utsavm81098utsavm81098

threejs-loaders

Coordinate Three.js asset loading for GLTF, textures, and HDR environments.

Community
Intermediate
brittaniebuffiecsubrittaniebuffiecsu
1

hyperframes

Render HTML compositions to MP4/WebM videos with HyperFrames.

Community
Advanced
tadams95tadams95
1

threejs-animation

Manage Three.js animation clips, mixers, and actions with GLTFLoader.

Community
Intermediate
libz-renlab-ailibz-renlab-ai
13

three

Render Three.js WebGL scenes synchronized with HyperFrames hf-seek events.

Community
Intermediate