Three.js (official LLM reference)
This skill vendors the official Three.js LLM documentation pack so the agent can generate correct modern three.js without inventing outdated CDN/r128 APIs.
Stack adaptation (this app builder)
You are in a TanStack Start + React workspace, not a bare HTML page:
| Official doc pattern | Do this here instead |
|---|---|
<script type="importmap"> + CDN three | npm install three (+ @types/three if needed); import from "three" / "three/addons/…" |
| Raw HTML canvas bootstrap | Prefer @react-three/fiber + drei for games/UI integration (building-games + 3d-libs.md) |
Standalone WebGLRenderer demo | Fine for a self-contained canvas module; still install three via npm so Vercel build has it |
| Always “latest” CDN version | Pin via package.json so dev and deploy match |
three is not preinstalled — add it with npm and leave it in package.json.
When to load what
- Game / interactive 3D product → start with
building-games(loop, controls, orientation, camera, first-run, steer sign). - R3F / drei / rapier wiring →
building-games/references/3d-libs.md. - Deep three API, TSL, WebGPU, materials, loaders, postprocessing → load
references/llms-full.txt(this skill’s full official dump).
Do not load llms-full.txt for simple 2D canvas games (Pong, tetris, etc.).
Full reference
Read on demand:
references/llms-full.txt
Source: https://threejs.org/docs/llms-full.txt (pinned copy for offline sandbox use).
Contents include: modern imports, WebGLRenderer vs WebGPURenderer, TSL complete reference, NodeMaterial, loaders, post-processing, compute, and API tables.
Quick defaults for this product
- Prefer WebGLRenderer (or R3F default) unless the user needs TSL/WebGPU compute.
- Cap pixel ratio (
renderer.setPixelRatio(Math.min(devicePixelRatio, 2))or R3Fdpr={[1,2]}). - Dispose geometries/materials/textures on teardown (three does not GC GPU resources).
- For games: still obey
building-gamescontrol and orientation self-tests.
Finish check
- three (and R3F stack if used) is in
package.jsonand imports resolve. - No r128 / cdnjs script-tag patterns.
- If TSL/WebGPU used: materials and imports match
llms-full(node materials,await renderer.init()).