three

Render deterministic Three.js scenes synchronized to HyperFrames hf-seek events.

118|12|Updated May 5, 2026

Search Tags:#deterministic #webgl #scene #three.js #renderer #hyperframes

Ready to run

npx skills add https://github.com/alecs5am/ralphy --skill three-alecs5am

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: three
Source: https://github.com/alecs5am/ralphy/tree/main/.agents/skills/three
Command: npx skills add https://github.com/alecs5am/ralphy --skill three-alecs5am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Integrates Three.js with HyperFrames to render deterministic, frame-accurate scenes.

Core Features & Use Cases

Deterministic scene creation and rendering synchronized to hf-seek events.
Provides a runtime adapter that publishes hf-seek and allows driving Scene, Camera, and Renderer from time-based cues.
Use cases include deterministic product spins, shader-driven visuals, and canvas renders aligned to HyperFrames playback.

Quick Start

Create a basic Three.js scene and render it in response to hf-seek events in your HyperFrames composition.

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 frame-accurately with HyperFrames?▼

To render deterministic Three.js scenes frame-accurately, you integrate a runtime adapter that synchronizes scene, camera, and renderer setup with HyperFrames time. This ensures canvas layers and animation timelines respond predictably to hf-seek events without runtime fetches.

Why do my Three.js animations break when seeking through a HyperFrames timeline?▼

Three.js animations break on seek when assets are not preloaded or scene setup is asynchronous. You must preload assets and drive camera motion and rendering strictly from HyperFrames time via hf-seek events to avoid fetches at seek time.

What is a deterministic WebGL renderer for HyperFrames scenes?▼

A deterministic WebGL renderer for HyperFrames scenes is a runtime adapter that publishes hf-seek events to drive Three.js scene rendering. It ensures shader-driven visuals and camera motion remain perfectly aligned to the playback timeline at any frame.

Can I use Three.js with HyperFrames for deterministic product spins and canvas layers?▼

Yes, you can use Three.js with HyperFrames for deterministic product spins and canvas layers. The integration requires synchronous setup of your scene, camera, and renderer, alongside asset preloading, to render strictly from HyperFrames time.

What are the limitations of using Three.js for deterministic scene rendering in HyperFrames?▼

The main limitation of deterministic scene rendering in HyperFrames is the strict requirement for synchronous setup and asset preloading. Any asynchronous fetches at seek time will break frame accuracy, limiting dynamic asset loading during playback.

Do I need to preload assets for Three.js HyperFrames scene rendering?▼

Yes, you must preload assets for Three.js HyperFrames scene rendering. Preloading is required to avoid fetches at seek time, ensuring the scene, camera, and renderer can operate synchronously and render strictly from HyperFrames time.