skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

three

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

Updated Mar 4, 2026
Search Tags:#webgl#three.js#deterministic rendering#3d video#hyperframes#hf-seek#animationmixer
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill three-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: three
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/three
Command: npx skills add https://github.com/gmolike/Claude-Template --skill three-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building Three.js or WebGL visuals inside HyperFrames compositions requires frame-accurate, deterministic rendering, but naive approaches using requestAnimationFrame or wall-clock time produce inconsistent frames during video rendering. ## Core Features & Use Cases - Deterministic Rendering: Render scenes from HyperFrames time via the hf-seek event instead of wall-clock time or animation loops. - AnimationMixer Seeking: Seek GLTF animation clips directly with mixer.setTime() for frame-exact authored animation. - Use Case: Create a product-spin video where a 3D model rotates based on composition time, with the camera and materials configured synchronously and all assets preloaded before seeking begins. ## Quick Start Ask the AI to create a Three.js scene for HyperFrames that renders a rotating mesh in response to hf-seek events using window.__hfThreeTime.

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 event and render from event.detail.time instead of using requestAnimationFrame or wall-clock time. The adapter sets window.__hfThreeTime and dispatches the event on each seek, so your renderAt(time) function produces the exact frame.

How to seek GLTF animation clips with Three.js AnimationMixer?▼

Call mixer.setTime(time) inside your render function so the clip jumps directly to the composition time. If multiple mixers exist, seek all of them from the same time value to keep animations synchronized.

Can I use requestAnimationFrame for Three.js in HyperFrames?▼

No. requestAnimationFrame and renderer.setAnimationLoop must not drive render-critical motion because they follow wall-clock time, not composition time. Use the hf-seek event as the single source of truth for rendering.

Why does my Three.js render look wrong in exported HyperFrames video?▼

Common causes are loading models or textures at seek time, using Date.now() or performance.now() for state, or device-pixel-ratio dependent output. Preload all assets, derive state purely from time, and pin renderer size and pixel ratio.

Does the HyperFrames three adapter support post-processing effects?▼

Post-processing passes that depend on previous frame history should be avoided unless you can reconstruct the full state from time alone. Deterministic rendering requires every frame to be computable independently from the seek time.

Related Skills

Explore More Design & Creative Skills→
het8802het8802
3

threejs-loaders

Load GLTF models, textures, and HDR environments in Three.js.

Community
Intermediate
hugotownhugotown

three

Create deterministic Three.js scenes that render from HyperFrames seek time.

Community
Intermediate
DarkArty07DarkArty07
3

p5js

Generate p5.js sketches with seeded randomness and multi-format export.

Community
Advanced
InverterNetworkInverterNetwork

blender-mcp

Control Blender 3D scenes and rendering via the Model Context Protocol.

Official
Advanced