# Build Deterministic Three.js HyperFrames Scenes

Frame-accurate Three.js rendering is hard when scenes depend on wall-clock animation. This skill shows HyperFrames patterns that render from hf-seek time.

## Install

```bash
npx skillstore add heygen-com/three
```

## Metadata

- Status: approved
- Slug: heygen-com-three
- Skillstore revision: r1
- Version status: missing
- Tree hash: dbdc93492e7e7386bbde43aebd9ede84a39398b0c1a271437fc073cbce048fca
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/three/
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/heygen-com-three
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-three/manifest

## Capabilities

- Explains the HyperFrames three runtime adapter contract.
- Shows how to render a scene from hf-seek time.
- Provides a basic Three.js canvas setup pattern.
- Shows AnimationMixer seeking for GLTF clips.
- Lists validation commands for HyperFrames compositions.
- Identifies render patterns that break deterministic output.

## Use Cases

- Create Product Spins: Build repeatable Three.js object rotations that render the same frame for the same HyperFrames time.
- Validate WebGL Video Layers: Check WebGL canvas layers for deterministic sizing, timing, and frame output before rendering video.
- Adapt GLTF Animation Clips: Use AnimationMixer setTime patterns so authored clips follow HyperFrames seek events.

## Prompt Templates

### Create a Basic Scene

```
Use the three skill to create a simple HyperFrames Three.js scene that renders from hf-seek time.
```

### Fix Timing Drift

```
Review my Three.js HyperFrames scene and replace wall-clock animation with deterministic time-based rendering.
```

### Adapt GLTF Clips

```
Show how to drive multiple Three.js AnimationMixer instances from HyperFrames hf-seek events.
```

### Audit Render Readiness

```
Audit this HyperFrames Three.js composition for render-critical network loads, pixel ratio issues, and non-deterministic frame history.
```

## Limitations

- Does not include a complete production scene template.
- Does not provide asset loading code for GLTF or textures.
- Assumes users already know Three.js basics.
- Uses one CDN import in the example.

## Best Practices

- Load render-critical assets before validation or seeking begins.
- Use HyperFrames time as the only source for render-critical motion.
- Pin renderer dimensions and pixel ratio for video renders.

## Anti Patterns

- Using Date.now or performance.now to update render-critical state.
- Fetching remote models, textures, or HDRIs during seek events.
- Depending on previous frame history without reconstructing state from time.

## Security Audit

- Audited at: 2026-07-09T12:06:52.389\+00:00
- Summary: Most static findings are Markdown backticks, code fences, API names, or reference links that do not execute commands. The only confirmed issue is a sample Three.js import from a third-party CDN, which is a low-severity supply-chain dependency.

## Stats

- Views: 53
- Downloads: 9
- Favorites: 0
- Popularity score: 0