Игры и 3D

threejs

Three.js + TSL: полный API-справочник

Полный оригинал на английском — без перевода. Источник: .grok/skills/threejs/SKILL.md

Кратко (RU)

Официальный LLM-пакет документации Three.js/TSL. Для WebGL/WebGPU, шейдеров, GLTF, материалов. Корректность игры (loop, WASD, камера) — building-games; глубина API — этот skill.

three.jsWebGPUTSLshaderGLTFOrbitControls

Full skill content

Original English markdown — rendered or raw source.

.grok/skills/threejs/SKILL.md2,983 chars

Frontmatter (YAML)

name: threejs
description: >
  Official Three.js API and TSL (Three.js Shading Language) reference for LLM
  code generation. Load when writing or debugging three.js / WebGL / WebGPU /
  custom materials / shaders / GLTF / advanced three APIs beyond basic game
  loop/controls. Prefer building-games for game correctness (loop, WASD,
  camera, orientation); use this skill for full API/TSL depth. Triggers on
  "three.js", "threejs", "WebGPU", "TSL", "NodeMaterial", "shader", "GLTF",
  "MeshStandard", "OrbitControls", "WebGLRenderer".
metadata:
  short-description: "Three.js + TSL full API (official llms-full reference)"

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:

text

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 R3F dpr={[1,2]}).
Dispose geometries/materials/textures on teardown (three does not GC GPU resources).
For games: still obey `building-games` control and orientation self-tests.

Finish check

three (and R3F stack if used) is in package.json and imports resolve.
No r128 / cdnjs script-tag patterns.
If TSL/WebGPU used: materials and imports match llms-full (node materials, await renderer.init()).

Часто вместе с

building-games

Браузерные игры: loop, камера, perf, жанры