Three.js Development
Build high-performance 3D web applications using Three.js. Contains 556 searchable examples across 13 categories, 60 API classes, and 20 use-case templates.
When to Use
- Building 3D scenes, games, or visualizations
- Loading 3D models (GLTF, FBX, OBJ)
- Implementing animations, physics, or VR/XR
- Creating particle effects or custom shaders
- Optimizing rendering performance
Search Examples & API
Use the search CLI to find relevant examples and API references:
python3 .claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]
Search Domains
| Domain |
Use For |
Example Query |
examples |
Find code examples |
"particle effects gpu" |
api |
Class/method reference |
"PerspectiveCamera" |
use-cases |
Project recommendations |
"product configurator" |
categories |
Browse categories |
"webgpu" |
Quick Examples
# Find particle/compute examples
python3 .claude/skills/threejs/scripts/search.py "particle compute webgpu"
# Search API for camera classes
python3 .claude/skills/threejs/scripts/search.py "camera" --domain api
# Get examples for a use case
python3 .claude/skills/threejs/scripts/search.py "product configurator" --use-case
# Filter by category
python3 .claude/skills/threejs/scripts/search.py --category webgpu -n 10
# Filter by complexity
python3 .claude/skills/threejs/scripts/search.py --complexity high -n 5
Example Categories
| Category |
Count |
Description |
webgl |
216 |
Standard WebGL rendering |
webgpu (wip) |
190 |
Modern WebGPU + compute shaders |
webgl / advanced |
48 |
Low-level GPU, custom shaders |
webgl / postprocessing |
27 |
Bloom, SSAO, SSR, DOF |
webxr |
26 |
VR/AR experiences |
physics |
13 |
Physics simulation |
Common Use Cases
| Use Case |
Recommended |
Complexity |
| Product Configurator |
GLTF, PBR, EnvMaps |
Medium |
| Game Development |
Animation, Physics, Controls |
High |
| Data Visualization |
BufferGeometry, Points |
Medium |
| 360 Panorama |
Equirectangular, WebXR |
Low |
| Architectural Viz |
GLTF, HDR, CSM Shadows |
High |
Quick Start
// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 2. Lighting
scene.add(new THREE.AmbientLight(0x404040));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
// 3. Load GLTF Model
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => scene.add(gltf.scene));
// 4. Animation Loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Progressive Reference Files
Level 1: Fundamentals
references/00-fundamentals.md - Core concepts, scene graphreferences/01-getting-started.md - Setup, basic rendering
Level 2: Common Tasks
references/02-loaders.md - GLTF, FBX, OBJ loadersreferences/03-textures.md - Texture types, mappingreferences/04-cameras.md - Camera types, controlsreferences/05-lights.md - Light types, shadowsreferences/06-animations.md - AnimationMixer, clipsreferences/11-materials.md - PBR, standard materialsreferences/18-geometry.md - BufferGeometry, primitives
Level 3: Interactive
references/08-interaction.md - Raycasting, pickingreferences/09-postprocessing.md - Bloom, SSAO, SSRreferences/10-controls.md - OrbitControls, etc.
Level 4: Advanced
references/12-performance.md - Instancing, LOD, batchingreferences/13-node-materials.md - TSL shader graphsreferences/17-shader.md - Custom GLSL shaders
Level 5: Specialized
references/14-physics-vr.md - Physics, WebXRreferences/16-webgpu.md - WebGPU, compute shaders
External Resources
1---2name: ck-threejs-23description: Build 3D web apps with Three.js (WebGL/WebGPU). 556 searchable examples, 60 API classes, 20 use cases. Actions: create 3D scene, load model, add animation, implement physics, build VR/XR. Topics: GLTF loader, PBR materials, particle effects, shadows, post-processing, compute shaders, TSL. Integrations: WebGPU, physics engines, spatial audio.4license: MIT5---6
7# Three.js Development
8
9Build high-performance 3D web applications using Three.js. Contains 556 searchable examples across 13 categories, 60 API classes, and 20 use-case templates.
10
11## When to Use
12
13- Building 3D scenes, games, or visualizations
14- Loading 3D models (GLTF, FBX, OBJ)
15- Implementing animations, physics, or VR/XR
16- Creating particle effects or custom shaders
17- Optimizing rendering performance
18
19## Search Examples & API
20
21Use the search CLI to find relevant examples and API references:
22
23```bash
24python3 .claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]
25```
26
27### Search Domains
28
29| Domain | Use For | Example Query |
30|--------|---------|---------------|
31| `examples` | Find code examples | `"particle effects gpu"` |
32| `api` | Class/method reference | `"PerspectiveCamera"` |
33| `use-cases` | Project recommendations | `"product configurator"` |
34| `categories` | Browse categories | `"webgpu"` |
35
36### Quick Examples
37
38```bash
39# Find particle/compute examples
40python3 .claude/skills/threejs/scripts/search.py "particle compute webgpu"
41
42# Search API for camera classes
43python3 .claude/skills/threejs/scripts/search.py "camera" --domain api
44
45# Get examples for a use case
46python3 .claude/skills/threejs/scripts/search.py "product configurator" --use-case
47
48# Filter by category
49python3 .claude/skills/threejs/scripts/search.py --category webgpu -n 10
50
51# Filter by complexity
52python3 .claude/skills/threejs/scripts/search.py --complexity high -n 5
53```
54
55## Example Categories
56
57| Category | Count | Description |
58|----------|-------|-------------|
59| `webgl` | 216 | Standard WebGL rendering |
60| `webgpu (wip)` | 190 | Modern WebGPU + compute shaders |
61| `webgl / advanced` | 48 | Low-level GPU, custom shaders |
62| `webgl / postprocessing` | 27 | Bloom, SSAO, SSR, DOF |
63| `webxr` | 26 | VR/AR experiences |
64| `physics` | 13 | Physics simulation |
65
66## Common Use Cases
67
68| Use Case | Recommended | Complexity |
69|----------|-------------|------------|
70| Product Configurator | GLTF, PBR, EnvMaps | Medium |
71| Game Development | Animation, Physics, Controls | High |
72| Data Visualization | BufferGeometry, Points | Medium |
73| 360 Panorama | Equirectangular, WebXR | Low |
74| Architectural Viz | GLTF, HDR, CSM Shadows | High |
75
76## Quick Start
77
78```javascript
79// 1. Scene, Camera, Renderer
80const scene = new THREE.Scene();
81const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
82const renderer = new THREE.WebGLRenderer({ antialias: true });
83renderer.setSize(window.innerWidth, window.innerHeight);
84renderer.setPixelRatio(window.devicePixelRatio);
85document.body.appendChild(renderer.domElement);
86
87// 2. Lighting
88scene.add(new THREE.AmbientLight(0x404040));
89const dirLight = new THREE.DirectionalLight(0xffffff, 1);
90dirLight.position.set(5, 5, 5);
91scene.add(dirLight);
92
93// 3. Load GLTF Model
94import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
95const loader = new GLTFLoader();
96loader.load('model.glb', (gltf) => scene.add(gltf.scene));
97
98// 4. Animation Loop
99function animate() {
100 requestAnimationFrame(animate);
101 renderer.render(scene, camera);
102}
103animate();
104```
105
106## Progressive Reference Files
107
108### Level 1: Fundamentals
109- `references/00-fundamentals.md` - Core concepts, scene graph
110- `references/01-getting-started.md` - Setup, basic rendering
111
112### Level 2: Common Tasks
113- `references/02-loaders.md` - GLTF, FBX, OBJ loaders
114- `references/03-textures.md` - Texture types, mapping
115- `references/04-cameras.md` - Camera types, controls
116- `references/05-lights.md` - Light types, shadows
117- `references/06-animations.md` - AnimationMixer, clips
118- `references/11-materials.md` - PBR, standard materials
119- `references/18-geometry.md` - BufferGeometry, primitives
120
121### Level 3: Interactive
122- `references/08-interaction.md` - Raycasting, picking
123- `references/09-postprocessing.md` - Bloom, SSAO, SSR
124- `references/10-controls.md` - OrbitControls, etc.
125
126### Level 4: Advanced
127- `references/12-performance.md` - Instancing, LOD, batching
128- `references/13-node-materials.md` - TSL shader graphs
129- `references/17-shader.md` - Custom GLSL shaders
130
131### Level 5: Specialized
132- `references/14-physics-vr.md` - Physics, WebXR
133- `references/16-webgpu.md` - WebGPU, compute shaders
134
135## External Resources
136
137- Docs: https://threejs.org/docs/
138- Examples: https://threejs.org/examples/
139- Editor: https://threejs.org/editor/
140- Discord: https://discord.gg/56GBJwAnUS
majiayu000