# Three.js Scene Composition — guide skill for 3D scenes

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Plan, build and capture Three.js scenes for video: absolute-time frames, seeded motion, color-safe glTF, render QA.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [3D scenes](https://skills.varg.ai/browse/skills/3d-scenes.md)
- **Slug:** `calesthio-threejs-scene-composition`
- **Status:** live
- **Publisher:** Calesthio (community)
- **License:** MIT
- **Source:** https://github.com/calesthio/generative-media-skills/tree/main/skills/production/runtime-assembly/threejs-scene-composition
- **Works in:** Claude Code, Codex, Cursor, OpenClaw
- **Requires:** three.js (pin and record the installed revision), A frame-capture host such as HyperFrames, Remotion or a headless-browser render loop
- **Cost:** Free — instructions only
- **Adoption:** 110 installs, 216 GitHub stars (GitHub + skills.sh, 2026-10-26)

## What it does

A production guide for Three.js scenes that end up as rendered media, such as product orbits, title sequences and procedural worlds, not websites. Its core rule is deterministic capture: compute `time = frame / fps`, set `AnimationMixer` time, camera rigs, uniforms and particles from absolute time or a seeded cache, never accumulate state, prewarm shaders before frame one, and render the same stress frames in two clean runs to compare them. It also covers a scene contract and asset manifest, glTF validation, texture color spaces and tone mapping, GPU disposal, flash-safety review and rights tracking, with two worked examples (a color-critical 4K product orbit and an instanced title world). It was written in July 2026 as one of 153 skills in the generative-media-skills pack by the creator of OpenMontage and has not changed since. It gives the per-frame adapter shape but leaves the capture host (HyperFrames, Remotion or a headless-browser loop) to you.

## Use when

- Browser-rendered 3D product shots or title sequences delivered as video
- Procedural 3D worlds or glTF scene assembly with camera and lighting animation
- Deterministic frame export and render QA for a Three.js scene

## Not for

- Modeling or preparing standalone 3D assets (the pack's 3d-asset-production skill covers that)
- WebXR interaction, game logic or generic website decoration

## Install

- Claude Code: `npx skills add https://github.com/calesthio/generative-media-skills --skill threejs-scene-composition`

## More 3D scenes skills

- [Three.js Skills](https://skills.varg.ai/skills/threejs-skills.md): 13 Three.js skills: scenes, geometry, materials, lighting, GLSL and TSL shaders, animation, post-processing, R3F.
- [R3F Skills](https://skills.varg.ai/skills/enzed-r3f-skills.md): 11 React Three Fiber skills checked against Fiber 9.7 and three r185: Canvas, demand loops, loaders, shaders, post.
- [Procedural 3D Story](https://skills.varg.ai/skills/karpathy-3d-story.md): Turn a myth or book into a seeded, multi-chapter procedural three.js film in one scene.html, audited frame by frame.
- [Three.js Architecture Effects](https://skills.varg.ai/skills/threejs-architecture-effects.md): Self-assembling 3D buildings in three.js: bricks, timber, eaves and PBR, driven by one seekable progress value.