renolation/english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
renolation
2026-04-12 01:06:31 +07:00
commit 10d660cbcb
1066 changed files with 228596 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
.opencode/skills/threejs/SKILL.md Normal file
View File

@@ -0,0 +1,144 @@
---
name: ck:threejs
description: "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."
license: MIT
argument-hint: "[3D scene or feature]"
metadata:
author: claudekit
version: "3.0.0"
---
# 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:
```bash
python3 .opencode/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
```bash
# Find particle/compute examples
python3 .opencode/skills/threejs/scripts/search.py "particle compute webgpu"
# Search API for camera classes
python3 .opencode/skills/threejs/scripts/search.py "camera" --domain api
# Get examples for a use case
python3 .opencode/skills/threejs/scripts/search.py "product configurator" --use-case
# Filter by category
python3 .opencode/skills/threejs/scripts/search.py --category webgpu -n 10
# Filter by complexity
python3 .opencode/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
```javascript
// 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 graph
- `references/01-getting-started.md` - Setup, basic rendering
### Level 2: Common Tasks
- `references/02-loaders.md` - GLTF, FBX, OBJ loaders
- `references/03-textures.md` - Texture types, mapping
- `references/04-cameras.md` - Camera types, controls
- `references/05-lights.md` - Light types, shadows
- `references/06-animations.md` - AnimationMixer, clips
- `references/11-materials.md` - PBR, standard materials
- `references/18-geometry.md` - BufferGeometry, primitives
### Level 3: Interactive
- `references/08-interaction.md` - Raycasting, picking
- `references/09-postprocessing.md` - Bloom, SSAO, SSR
- `references/10-controls.md` - OrbitControls, etc.
### Level 4: Advanced
- `references/12-performance.md` - Instancing, LOD, batching
- `references/13-node-materials.md` - TSL shader graphs
- `references/17-shader.md` - Custom GLSL shaders
### Level 5: Specialized
- `references/14-physics-vr.md` - Physics, WebXR
- `references/16-webgpu.md` - WebGPU, compute shaders
## External Resources
- Docs: https://threejs.org/docs/
- Examples: https://threejs.org/examples/
- Editor: https://threejs.org/editor/
- Discord: https://discord.gg/56GBJwAnUS

61
.opencode/skills/threejs/data/api-reference.csv Normal file
View File

@@ -0,0 +1,61 @@
ID,Category,Class,Keywords,Description,Common Methods,Related Classes
1,Core,Scene,"scene, container, root, hierarchy",Root container for all 3D objects,"add(), remove(), traverse(), getObjectByName()",Object3D; Group
2,Core,Camera,"camera, view, projection",Base camera class for all camera types,"lookAt(), updateProjectionMatrix()",PerspectiveCamera; OrthographicCamera
3,Core,PerspectiveCamera,"perspective, fov, aspect, near, far",Perspective projection camera,"setFocalLength(), updateProjectionMatrix()",Camera; OrthographicCamera
4,Core,OrthographicCamera,"orthographic, 2d, isometric, parallel",Orthographic projection camera,"updateProjectionMatrix(), zoom",Camera; PerspectiveCamera
5,Core,WebGLRenderer,"renderer, webgl, canvas, draw",WebGL rendering engine,"render(), setSize(), setPixelRatio(), dispose()",Scene; Camera
6,Core,WebGPURenderer,"renderer, webgpu, modern, compute",WebGPU rendering engine,"render(), setSize(), compute()",WebGLRenderer; Scene
7,Geometry,BufferGeometry,"geometry, vertices, faces, mesh",Efficient geometry representation,"setAttribute(), setIndex(), computeVertexNormals()",Mesh; BufferAttribute
8,Geometry,BoxGeometry,"box, cube, rectangular",Box/cube primitive geometry,"parameters: width, height, depth, segments",BufferGeometry; SphereGeometry
9,Geometry,SphereGeometry,"sphere, ball, globe",Sphere primitive geometry,"parameters: radius, widthSegments, heightSegments",BufferGeometry; BoxGeometry
10,Geometry,PlaneGeometry,"plane, flat, ground, floor",Flat plane primitive geometry,"parameters: width, height, widthSegments",BufferGeometry; CircleGeometry
11,Geometry,CylinderGeometry,"cylinder, tube, pillar",Cylinder primitive geometry,"parameters: radiusTop, radiusBottom, height",BufferGeometry; ConeGeometry
12,Geometry,TorusGeometry,"torus, donut, ring",Torus/donut primitive geometry,"parameters: radius, tube, radialSegments",BufferGeometry; TorusKnotGeometry
13,Material,Material,"material, appearance, surface",Base material class,"dispose(), clone(), needsUpdate",MeshStandardMaterial; ShaderMaterial
14,Material,MeshStandardMaterial,"standard, pbr, metalness, roughness",PBR metallic-roughness material,"color, metalness, roughness, map, normalMap",Material; MeshPhysicalMaterial
15,Material,MeshPhysicalMaterial,"physical, transmission, clearcoat, sheen",Advanced PBR material,"transmission, thickness, clearcoat, sheen, ior",MeshStandardMaterial; Material
16,Material,MeshBasicMaterial,"basic, unlit, simple, fast",Unlit material for simple rendering,"color, map, wireframe, transparent",Material; MeshLambertMaterial
17,Material,MeshLambertMaterial,"lambert, diffuse, non-shiny",Diffuse-only material,"color, map, emissive, reflectivity",Material; MeshPhongMaterial
18,Material,MeshPhongMaterial,"phong, specular, shiny, highlight",Specular highlight material,"color, specular, shininess, map",Material; MeshStandardMaterial
19,Material,MeshToonMaterial,"toon, cartoon, cel, stylized",Cel-shaded toon material,"color, gradientMap, map",Material; MeshLambertMaterial
20,Material,ShaderMaterial,"shader, custom, glsl, vertex, fragment",Custom GLSL shader material,"vertexShader, fragmentShader, uniforms",Material; RawShaderMaterial
21,Material,PointsMaterial,"points, particles, sprites",Material for point clouds,"color, size, sizeAttenuation, map",Material; SpriteMaterial
22,Light,Light,"light, illumination, source",Base light class,"color, intensity",DirectionalLight; PointLight
23,Light,DirectionalLight,"directional, sun, parallel, shadow",Parallel light rays (sun-like),"position, target, shadow, castShadow",Light; SpotLight
24,Light,PointLight,"point, bulb, omnidirectional",Omnidirectional light source,"position, distance, decay, shadow",Light; SpotLight
25,Light,SpotLight,"spotlight, cone, focused, shadow",Cone-shaped spotlight,"position, target, angle, penumbra, shadow",Light; DirectionalLight
26,Light,AmbientLight,"ambient, fill, global",Global ambient illumination,"color, intensity",Light; HemisphereLight
27,Light,HemisphereLight,"hemisphere, sky, ground, outdoor",Sky/ground gradient light,"skyColor, groundColor, intensity",Light; AmbientLight
28,Light,RectAreaLight,"rectarea, area, soft, studio",Rectangular area light,"width, height, intensity, lookAt()",Light; SpotLight
29,Object,Mesh,"mesh, geometry, material, object",3D object with geometry and material,"geometry, material, position, rotation, scale",Object3D; SkinnedMesh
30,Object,SkinnedMesh,"skinned, rigged, animation, bones",Mesh with skeletal animation,"skeleton, bind(), pose()",Mesh; Bone
31,Object,InstancedMesh,"instanced, performance, many, clone",Efficient multiple instance rendering,"count, setMatrixAt(), setColorAt()",Mesh; BatchedMesh
32,Object,Group,"group, container, parent, hierarchy",Container for grouping objects,"add(), remove(), children",Object3D; Scene
33,Object,Points,"points, particles, cloud",Point cloud rendering,"geometry, material",Mesh; Line
34,Object,Line,"line, path, wire",Line rendering,"geometry, material",Points; LineSegments
35,Object,Sprite,"sprite, billboard, always-facing",Always camera-facing plane,"material, center, scale",Points; Mesh
36,Animation,AnimationMixer,"mixer, animation, playback, control",Animation playback controller,"clipAction(), update(), stopAllAction()",AnimationClip; AnimationAction
37,Animation,AnimationClip,"clip, keyframes, track, animation data",Animation data container,"tracks, duration, resetDuration()",AnimationMixer; KeyframeTrack
38,Animation,AnimationAction,"action, play, pause, loop",Animation playback control,"play(), stop(), crossFadeTo(), setEffectiveWeight()",AnimationMixer; AnimationClip
39,Loader,GLTFLoader,"gltf, glb, loader, model",GLTF/GLB model loader,"load(), parse(), setDRACOLoader()",Loader; DRACOLoader
40,Loader,FBXLoader,"fbx, autodesk, animation",FBX model loader,"load(), parse()",Loader; GLTFLoader
41,Loader,OBJLoader,"obj, wavefront, simple",OBJ model loader,"load(), parse(), setMaterials()",Loader; MTLLoader
42,Loader,TextureLoader,"texture, image, map",Image texture loader,"load(), loadAsync()",Loader; CubeTextureLoader
43,Loader,DRACOLoader,"draco, compression, mesh",Draco compressed mesh decoder,"setDecoderPath(), preload()",GLTFLoader; Loader
44,Control,OrbitControls,"orbit, rotate, zoom, pan, camera",Orbiting camera controls,"update(), target, enableDamping",Controls; TrackballControls
45,Control,MapControls,"map, overhead, 2d, navigation",Map-style camera controls,"update(), target, screenSpacePanning",OrbitControls; Controls
46,Control,FirstPersonControls,"fps, first person, walk",First-person camera controls,"update(), movementSpeed, lookSpeed",Controls; PointerLockControls
47,Control,TransformControls,"transform, gizmo, move, rotate, scale",Object manipulation gizmo,"attach(), detach(), setMode()",Controls; DragControls
48,Math,Vector3,"vector, position, direction, xyz",3D vector math,"add(), sub(), multiply(), normalize(), length()",Vector2; Quaternion
49,Math,Quaternion,"quaternion, rotation, orientation",Rotation representation,"setFromEuler(), slerp(), multiply()",Vector3; Euler
50,Math,Matrix4,"matrix, transform, 4x4",4x4 transformation matrix,"multiply(), invert(), decompose()",Matrix3; Vector3
51,Math,Box3,"box, aabb, bounds, collision",Axis-aligned bounding box,"setFromObject(), containsPoint(), intersectsBox()",Sphere; Raycaster
52,Math,Raycaster,"raycast, pick, intersect, mouse",Ray intersection testing,"setFromCamera(), intersectObjects()",Box3; Vector3
53,Helper,AxesHelper,"axes, xyz, debug, orientation",XYZ axes visualization,"size parameter",Helper; GridHelper
54,Helper,GridHelper,"grid, floor, debug, reference",Grid plane visualization,"size, divisions, colors",Helper; AxesHelper
55,Helper,BoxHelper,"box, bounds, debug, wireframe",Bounding box visualization,"setFromObject(), update()",Helper; Box3Helper
56,Effect,EffectComposer,"composer, postprocessing, chain",Post-processing effect chain,"addPass(), render(), setSize()",Pass; ShaderPass
57,Effect,RenderPass,"render, scene, camera, base",Base scene render pass,"scene, camera",Pass; EffectComposer
58,Effect,UnrealBloomPass,"bloom, glow, emissive, hdr",Unreal-style bloom effect,"strength, radius, threshold",Pass; EffectComposer
59,Effect,SSAOPass,"ssao, ao, ambient occlusion",Screen-space ambient occlusion,"kernelRadius, minDistance, maxDistance",Pass; GTAOPass
60,Effect,OutlinePass,"outline, selection, highlight",Object outline effect,"selectedObjects, visibleEdgeColor",Pass; EffectComposer
1 ID Category Class Keywords Description Common Methods Related Classes
2 1 Core Scene scene, container, root, hierarchy Root container for all 3D objects add(), remove(), traverse(), getObjectByName() Object3D; Group
3 2 Core Camera camera, view, projection Base camera class for all camera types lookAt(), updateProjectionMatrix() PerspectiveCamera; OrthographicCamera
4 3 Core PerspectiveCamera perspective, fov, aspect, near, far Perspective projection camera setFocalLength(), updateProjectionMatrix() Camera; OrthographicCamera
5 4 Core OrthographicCamera orthographic, 2d, isometric, parallel Orthographic projection camera updateProjectionMatrix(), zoom Camera; PerspectiveCamera
6 5 Core WebGLRenderer renderer, webgl, canvas, draw WebGL rendering engine render(), setSize(), setPixelRatio(), dispose() Scene; Camera
7 6 Core WebGPURenderer renderer, webgpu, modern, compute WebGPU rendering engine render(), setSize(), compute() WebGLRenderer; Scene
8 7 Geometry BufferGeometry geometry, vertices, faces, mesh Efficient geometry representation setAttribute(), setIndex(), computeVertexNormals() Mesh; BufferAttribute
9 8 Geometry BoxGeometry box, cube, rectangular Box/cube primitive geometry parameters: width, height, depth, segments BufferGeometry; SphereGeometry
10 9 Geometry SphereGeometry sphere, ball, globe Sphere primitive geometry parameters: radius, widthSegments, heightSegments BufferGeometry; BoxGeometry
11 10 Geometry PlaneGeometry plane, flat, ground, floor Flat plane primitive geometry parameters: width, height, widthSegments BufferGeometry; CircleGeometry
12 11 Geometry CylinderGeometry cylinder, tube, pillar Cylinder primitive geometry parameters: radiusTop, radiusBottom, height BufferGeometry; ConeGeometry
13 12 Geometry TorusGeometry torus, donut, ring Torus/donut primitive geometry parameters: radius, tube, radialSegments BufferGeometry; TorusKnotGeometry
14 13 Material Material material, appearance, surface Base material class dispose(), clone(), needsUpdate MeshStandardMaterial; ShaderMaterial
15 14 Material MeshStandardMaterial standard, pbr, metalness, roughness PBR metallic-roughness material color, metalness, roughness, map, normalMap Material; MeshPhysicalMaterial
16 15 Material MeshPhysicalMaterial physical, transmission, clearcoat, sheen Advanced PBR material transmission, thickness, clearcoat, sheen, ior MeshStandardMaterial; Material
17 16 Material MeshBasicMaterial basic, unlit, simple, fast Unlit material for simple rendering color, map, wireframe, transparent Material; MeshLambertMaterial
18 17 Material MeshLambertMaterial lambert, diffuse, non-shiny Diffuse-only material color, map, emissive, reflectivity Material; MeshPhongMaterial
19 18 Material MeshPhongMaterial phong, specular, shiny, highlight Specular highlight material color, specular, shininess, map Material; MeshStandardMaterial
20 19 Material MeshToonMaterial toon, cartoon, cel, stylized Cel-shaded toon material color, gradientMap, map Material; MeshLambertMaterial
21 20 Material ShaderMaterial shader, custom, glsl, vertex, fragment Custom GLSL shader material vertexShader, fragmentShader, uniforms Material; RawShaderMaterial
22 21 Material PointsMaterial points, particles, sprites Material for point clouds color, size, sizeAttenuation, map Material; SpriteMaterial
23 22 Light Light light, illumination, source Base light class color, intensity DirectionalLight; PointLight
24 23 Light DirectionalLight directional, sun, parallel, shadow Parallel light rays (sun-like) position, target, shadow, castShadow Light; SpotLight
25 24 Light PointLight point, bulb, omnidirectional Omnidirectional light source position, distance, decay, shadow Light; SpotLight
26 25 Light SpotLight spotlight, cone, focused, shadow Cone-shaped spotlight position, target, angle, penumbra, shadow Light; DirectionalLight
27 26 Light AmbientLight ambient, fill, global Global ambient illumination color, intensity Light; HemisphereLight
28 27 Light HemisphereLight hemisphere, sky, ground, outdoor Sky/ground gradient light skyColor, groundColor, intensity Light; AmbientLight
29 28 Light RectAreaLight rectarea, area, soft, studio Rectangular area light width, height, intensity, lookAt() Light; SpotLight
30 29 Object Mesh mesh, geometry, material, object 3D object with geometry and material geometry, material, position, rotation, scale Object3D; SkinnedMesh
31 30 Object SkinnedMesh skinned, rigged, animation, bones Mesh with skeletal animation skeleton, bind(), pose() Mesh; Bone
32 31 Object InstancedMesh instanced, performance, many, clone Efficient multiple instance rendering count, setMatrixAt(), setColorAt() Mesh; BatchedMesh
33 32 Object Group group, container, parent, hierarchy Container for grouping objects add(), remove(), children Object3D; Scene
34 33 Object Points points, particles, cloud Point cloud rendering geometry, material Mesh; Line
35 34 Object Line line, path, wire Line rendering geometry, material Points; LineSegments
36 35 Object Sprite sprite, billboard, always-facing Always camera-facing plane material, center, scale Points; Mesh
37 36 Animation AnimationMixer mixer, animation, playback, control Animation playback controller clipAction(), update(), stopAllAction() AnimationClip; AnimationAction
38 37 Animation AnimationClip clip, keyframes, track, animation data Animation data container tracks, duration, resetDuration() AnimationMixer; KeyframeTrack
39 38 Animation AnimationAction action, play, pause, loop Animation playback control play(), stop(), crossFadeTo(), setEffectiveWeight() AnimationMixer; AnimationClip
40 39 Loader GLTFLoader gltf, glb, loader, model GLTF/GLB model loader load(), parse(), setDRACOLoader() Loader; DRACOLoader
41 40 Loader FBXLoader fbx, autodesk, animation FBX model loader load(), parse() Loader; GLTFLoader
42 41 Loader OBJLoader obj, wavefront, simple OBJ model loader load(), parse(), setMaterials() Loader; MTLLoader
43 42 Loader TextureLoader texture, image, map Image texture loader load(), loadAsync() Loader; CubeTextureLoader
44 43 Loader DRACOLoader draco, compression, mesh Draco compressed mesh decoder setDecoderPath(), preload() GLTFLoader; Loader
45 44 Control OrbitControls orbit, rotate, zoom, pan, camera Orbiting camera controls update(), target, enableDamping Controls; TrackballControls
46 45 Control MapControls map, overhead, 2d, navigation Map-style camera controls update(), target, screenSpacePanning OrbitControls; Controls
47 46 Control FirstPersonControls fps, first person, walk First-person camera controls update(), movementSpeed, lookSpeed Controls; PointerLockControls
48 47 Control TransformControls transform, gizmo, move, rotate, scale Object manipulation gizmo attach(), detach(), setMode() Controls; DragControls
49 48 Math Vector3 vector, position, direction, xyz 3D vector math add(), sub(), multiply(), normalize(), length() Vector2; Quaternion
50 49 Math Quaternion quaternion, rotation, orientation Rotation representation setFromEuler(), slerp(), multiply() Vector3; Euler
51 50 Math Matrix4 matrix, transform, 4x4 4x4 transformation matrix multiply(), invert(), decompose() Matrix3; Vector3
52 51 Math Box3 box, aabb, bounds, collision Axis-aligned bounding box setFromObject(), containsPoint(), intersectsBox() Sphere; Raycaster
53 52 Math Raycaster raycast, pick, intersect, mouse Ray intersection testing setFromCamera(), intersectObjects() Box3; Vector3
54 53 Helper AxesHelper axes, xyz, debug, orientation XYZ axes visualization size parameter Helper; GridHelper
55 54 Helper GridHelper grid, floor, debug, reference Grid plane visualization size, divisions, colors Helper; AxesHelper
56 55 Helper BoxHelper box, bounds, debug, wireframe Bounding box visualization setFromObject(), update() Helper; Box3Helper
57 56 Effect EffectComposer composer, postprocessing, chain Post-processing effect chain addPass(), render(), setSize() Pass; ShaderPass
58 57 Effect RenderPass render, scene, camera, base Base scene render pass scene, camera Pass; EffectComposer
59 58 Effect UnrealBloomPass bloom, glow, emissive, hdr Unreal-style bloom effect strength, radius, threshold Pass; EffectComposer
60 59 Effect SSAOPass ssao, ao, ambient occlusion Screen-space ambient occlusion kernelRadius, minDistance, maxDistance Pass; GTAOPass
61 60 Effect OutlinePass outline, selection, highlight Object outline effect selectedObjects, visibleEdgeColor Pass; EffectComposer

14
.opencode/skills/threejs/data/categories.csv Normal file
View File

@@ -0,0 +1,14 @@
ID,Category,Keywords,Description,Complexity Range,Example Count,Primary Use Cases,Related Categories
1,webgl,"webgl, rendering, standard, basic",Standard WebGL rendering examples with core Three.js features,Low-High,216,"games, visualization, interactive",webgl / postprocessing; webgl / advanced
2,webgl / postprocessing,"postprocessing, effects, bloom, ao, fxaa",Post-processing effects and image manipulation,Medium-High,27,"cinematic, stylized, photo-realistic",webgl; webgl / advanced
3,webgl / advanced,"advanced, buffergeometry, custom, shader, gpu",Advanced rendering techniques and low-level GPU access,High,48,"optimization, custom rendering, research",webgl; webgpu
4,webgpu (wip),"webgpu, compute, modern, next-gen, tsl",WebGPU-based rendering and compute shaders,Medium-High,190,"future-proof, compute, modern browsers",webgl / advanced
5,webaudio,"audio, spatial, 3d sound, positional",Spatial audio and sound visualization,Medium,4,"games, immersive, vr",webxr
6,webxr,"vr, ar, xr, immersive, headset",Virtual and augmented reality experiences,Medium-High,26,"vr games, ar apps, immersive",webaudio; webgpu
7,games,"games, gameplay, interactive",Complete game-like examples and mechanics,Medium-High,1,"game development, interactive",webxr; physics
8,physics,"physics, simulation, rigid body, collision",Physics simulation and rigid body dynamics,High,13,"games, simulation, realistic",games; webgpu
9,misc,"misc, experiments, special",Miscellaneous experiments and special techniques,Varies,20,"experimentation, learning",All
10,css2d,"css2d, labels, html overlay",CSS-based 2D overlays on 3D scenes,Low,1,"ui, labels, annotations",css3d
11,css3d,"css3d, dom, html, 3d transform",CSS 3D transforms with Three.js,Medium,6,"ui, transitions, websites",css2d
12,svg,"svg, vector, 2d",SVG rendering and vector graphics,Low-Medium,2,"icons, diagrams, 2d graphics",css2d
13,tests,"tests, debug, development",Testing and debugging utilities,Low-Medium,2,"development, debugging",All
1 ID Category Keywords Description Complexity Range Example Count Primary Use Cases Related Categories
2 1 webgl webgl, rendering, standard, basic Standard WebGL rendering examples with core Three.js features Low-High 216 games, visualization, interactive webgl / postprocessing; webgl / advanced
3 2 webgl / postprocessing postprocessing, effects, bloom, ao, fxaa Post-processing effects and image manipulation Medium-High 27 cinematic, stylized, photo-realistic webgl; webgl / advanced
4 3 webgl / advanced advanced, buffergeometry, custom, shader, gpu Advanced rendering techniques and low-level GPU access High 48 optimization, custom rendering, research webgl; webgpu
5 4 webgpu (wip) webgpu, compute, modern, next-gen, tsl WebGPU-based rendering and compute shaders Medium-High 190 future-proof, compute, modern browsers webgl / advanced
6 5 webaudio audio, spatial, 3d sound, positional Spatial audio and sound visualization Medium 4 games, immersive, vr webxr
7 6 webxr vr, ar, xr, immersive, headset Virtual and augmented reality experiences Medium-High 26 vr games, ar apps, immersive webaudio; webgpu
8 7 games games, gameplay, interactive Complete game-like examples and mechanics Medium-High 1 game development, interactive webxr; physics
9 8 physics physics, simulation, rigid body, collision Physics simulation and rigid body dynamics High 13 games, simulation, realistic games; webgpu
10 9 misc misc, experiments, special Miscellaneous experiments and special techniques Varies 20 experimentation, learning All
11 10 css2d css2d, labels, html overlay CSS-based 2D overlays on 3D scenes Low 1 ui, labels, annotations css3d
12 11 css3d css3d, dom, html, 3d transform CSS 3D transforms with Three.js Medium 6 ui, transitions, websites css2d
13 12 svg svg, vector, 2d SVG rendering and vector graphics Low-Medium 2 icons, diagrams, 2d graphics css2d
14 13 tests tests, debug, development Testing and debugging utilities Low-Medium 2 development, debugging All

557
.opencode/skills/threejs/data/examples-all.csv Normal file
View File

@@ -0,0 +1,557 @@
ID,Category,Name,File,URL,Keywords,Complexity,Use Cases,Description
1,webgl,animation / keyframes,webgl_animation_keyframes.html,https://threejs.org/examples/webgl_animation_keyframes.html,"webgl, animation, keyframes",medium,character animation,"Three.js webgl example demonstrating animation, keyframes"
2,webgl,animation / skinning / blending,webgl_animation_skinning_blending.html,https://threejs.org/examples/webgl_animation_skinning_blending.html,"webgl, animation, skinning, blending",medium,character animation,"Three.js webgl example demonstrating animation, skinning, blending"
3,webgl,animation / skinning / additive / blending,webgl_animation_skinning_additive_blending.html,https://threejs.org/examples/webgl_animation_skinning_additive_blending.html,"webgl, animation, skinning, additive, blending",medium,character animation,"Three.js webgl example demonstrating animation, skinning, additive, blending"
4,webgl,animation / skinning / ik,webgl_animation_skinning_ik.html,https://threejs.org/examples/webgl_animation_skinning_ik.html,"webgl, animation, skinning, ik",medium,character animation,"Three.js webgl example demonstrating animation, skinning, ik"
5,webgl,animation / skinning / morph,webgl_animation_skinning_morph.html,https://threejs.org/examples/webgl_animation_skinning_morph.html,"webgl, animation, skinning, morph",medium,character animation,"Three.js webgl example demonstrating animation, skinning, morph"
6,webgl,animation / multiple,webgl_animation_multiple.html,https://threejs.org/examples/webgl_animation_multiple.html,"webgl, animation, multiple",medium,character animation,"Three.js webgl example demonstrating animation, multiple"
7,webgl,animation / walk,webgl_animation_walk.html,https://threejs.org/examples/webgl_animation_walk.html,"webgl, animation, walk",medium,character animation,"Three.js webgl example demonstrating animation, walk"
8,webgl,batch / lod / bvh,webgl_batch_lod_bvh.html,https://threejs.org/examples/webgl_batch_lod_bvh.html,"webgl, batch, lod, bvh",medium,3D visualization,"Three.js webgl example demonstrating batch, lod, bvh"
9,webgl,camera,webgl_camera.html,https://threejs.org/examples/webgl_camera.html,"webgl, camera",medium,3D visualization,Three.js webgl example demonstrating camera
10,webgl,camera / array,webgl_camera_array.html,https://threejs.org/examples/webgl_camera_array.html,"webgl, camera, array",medium,VR/AR experience,"Three.js webgl example demonstrating camera, array"
11,webgl,camera / logarithmicdepthbuffer,webgl_camera_logarithmicdepthbuffer.html,https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html,"webgl, camera, logarithmicdepthbuffer",medium,VR/AR experience,"Three.js webgl example demonstrating camera, logarithmicdepthbuffer"
12,webgl,clipping,webgl_clipping.html,https://threejs.org/examples/webgl_clipping.html,"webgl, clipping",medium,3D visualization,Three.js webgl example demonstrating clipping
13,webgl,clipping / advanced,webgl_clipping_advanced.html,https://threejs.org/examples/webgl_clipping_advanced.html,"webgl, clipping, advanced",medium,3D visualization,"Three.js webgl example demonstrating clipping, advanced"
14,webgl,clipping / intersection,webgl_clipping_intersection.html,https://threejs.org/examples/webgl_clipping_intersection.html,"webgl, clipping, intersection",medium,3D visualization,"Three.js webgl example demonstrating clipping, intersection"
15,webgl,clipping / stencil,webgl_clipping_stencil.html,https://threejs.org/examples/webgl_clipping_stencil.html,"webgl, clipping, stencil",medium,3D visualization,"Three.js webgl example demonstrating clipping, stencil"
16,webgl,decals,webgl_decals.html,https://threejs.org/examples/webgl_decals.html,"webgl, decals",medium,3D visualization,Three.js webgl example demonstrating decals
17,webgl,depth / texture,webgl_depth_texture.html,https://threejs.org/examples/webgl_depth_texture.html,"webgl, depth, texture",medium,3D visualization,"Three.js webgl example demonstrating depth, texture"
18,webgl,effects / anaglyph,webgl_effects_anaglyph.html,https://threejs.org/examples/webgl_effects_anaglyph.html,"webgl, effects, anaglyph",medium,3D visualization,"Three.js webgl example demonstrating effects, anaglyph"
19,webgl,effects / ascii,webgl_effects_ascii.html,https://threejs.org/examples/webgl_effects_ascii.html,"webgl, effects, ascii",medium,3D visualization,"Three.js webgl example demonstrating effects, ascii"
20,webgl,effects / parallaxbarrier,webgl_effects_parallaxbarrier.html,https://threejs.org/examples/webgl_effects_parallaxbarrier.html,"webgl, effects, parallaxbarrier",medium,VR/AR experience,"Three.js webgl example demonstrating effects, parallaxbarrier"
21,webgl,effects / stereo,webgl_effects_stereo.html,https://threejs.org/examples/webgl_effects_stereo.html,"webgl, effects, stereo",medium,3D visualization,"Three.js webgl example demonstrating effects, stereo"
22,webgl,framebuffer / texture,webgl_framebuffer_texture.html,https://threejs.org/examples/webgl_framebuffer_texture.html,"webgl, framebuffer, texture",medium,3D visualization,"Three.js webgl example demonstrating framebuffer, texture"
23,webgl,geometries,webgl_geometries.html,https://threejs.org/examples/webgl_geometries.html,"webgl, geometries",medium,3D visualization,Three.js webgl example demonstrating geometries
24,webgl,geometry / colors,webgl_geometry_colors.html,https://threejs.org/examples/webgl_geometry_colors.html,"webgl, geometry, colors",medium,procedural generation,"Three.js webgl example demonstrating geometry, colors"
25,webgl,geometry / colors / lookuptable,webgl_geometry_colors_lookuptable.html,https://threejs.org/examples/webgl_geometry_colors_lookuptable.html,"webgl, geometry, colors, lookuptable",medium,procedural generation,"Three.js webgl example demonstrating geometry, colors, lookuptable"
26,webgl,geometry / convex,webgl_geometry_convex.html,https://threejs.org/examples/webgl_geometry_convex.html,"webgl, geometry, convex",medium,procedural generation,"Three.js webgl example demonstrating geometry, convex"
27,webgl,geometry / csg,webgl_geometry_csg.html,https://threejs.org/examples/webgl_geometry_csg.html,"webgl, geometry, csg",medium,procedural generation,"Three.js webgl example demonstrating geometry, csg"
28,webgl,geometry / cube,webgl_geometry_cube.html,https://threejs.org/examples/webgl_geometry_cube.html,"webgl, geometry, cube",medium,procedural generation,"Three.js webgl example demonstrating geometry, cube"
29,webgl,geometry / extrude / shapes,webgl_geometry_extrude_shapes.html,https://threejs.org/examples/webgl_geometry_extrude_shapes.html,"webgl, geometry, extrude, shapes",medium,procedural generation,"Three.js webgl example demonstrating geometry, extrude, shapes"
30,webgl,geometry / extrude / splines,webgl_geometry_extrude_splines.html,https://threejs.org/examples/webgl_geometry_extrude_splines.html,"webgl, geometry, extrude, splines",medium,procedural generation,"Three.js webgl example demonstrating geometry, extrude, splines"
31,webgl,geometry / minecraft,webgl_geometry_minecraft.html,https://threejs.org/examples/webgl_geometry_minecraft.html,"webgl, geometry, minecraft",medium,procedural generation,"Three.js webgl example demonstrating geometry, minecraft"
32,webgl,geometry / nurbs,webgl_geometry_nurbs.html,https://threejs.org/examples/webgl_geometry_nurbs.html,"webgl, geometry, nurbs",medium,procedural generation,"Three.js webgl example demonstrating geometry, nurbs"
33,webgl,geometry / shapes,webgl_geometry_shapes.html,https://threejs.org/examples/webgl_geometry_shapes.html,"webgl, geometry, shapes",medium,procedural generation,"Three.js webgl example demonstrating geometry, shapes"
34,webgl,geometry / spline / editor,webgl_geometry_spline_editor.html,https://threejs.org/examples/webgl_geometry_spline_editor.html,"webgl, geometry, spline, editor",medium,procedural generation,"Three.js webgl example demonstrating geometry, spline, editor"
35,webgl,geometry / teapot,webgl_geometry_teapot.html,https://threejs.org/examples/webgl_geometry_teapot.html,"webgl, geometry, teapot",medium,procedural generation,"Three.js webgl example demonstrating geometry, teapot"
36,webgl,geometry / terrain,webgl_geometry_terrain.html,https://threejs.org/examples/webgl_geometry_terrain.html,"webgl, geometry, terrain",medium,procedural generation,"Three.js webgl example demonstrating geometry, terrain"
37,webgl,geometry / terrain / raycast,webgl_geometry_terrain_raycast.html,https://threejs.org/examples/webgl_geometry_terrain_raycast.html,"webgl, geometry, terrain, raycast",medium,procedural generation,"Three.js webgl example demonstrating geometry, terrain, raycast"
38,webgl,geometry / text,webgl_geometry_text.html,https://threejs.org/examples/webgl_geometry_text.html,"webgl, geometry, text",medium,procedural generation,"Three.js webgl example demonstrating geometry, text"
39,webgl,geometry / text / shapes,webgl_geometry_text_shapes.html,https://threejs.org/examples/webgl_geometry_text_shapes.html,"webgl, geometry, text, shapes",medium,procedural generation,"Three.js webgl example demonstrating geometry, text, shapes"
40,webgl,geometry / text / stroke,webgl_geometry_text_stroke.html,https://threejs.org/examples/webgl_geometry_text_stroke.html,"webgl, geometry, text, stroke",medium,procedural generation,"Three.js webgl example demonstrating geometry, text, stroke"
41,webgl,helpers,webgl_helpers.html,https://threejs.org/examples/webgl_helpers.html,"webgl, helpers",medium,3D visualization,Three.js webgl example demonstrating helpers
42,webgl,instancing / morph,webgl_instancing_morph.html,https://threejs.org/examples/webgl_instancing_morph.html,"webgl, instancing, morph",medium,3D visualization,"Three.js webgl example demonstrating instancing, morph"
43,webgl,instancing / dynamic,webgl_instancing_dynamic.html,https://threejs.org/examples/webgl_instancing_dynamic.html,"webgl, instancing, dynamic",medium,3D visualization,"Three.js webgl example demonstrating instancing, dynamic"
44,webgl,instancing / performance,webgl_instancing_performance.html,https://threejs.org/examples/webgl_instancing_performance.html,"webgl, instancing, performance",medium,3D visualization,"Three.js webgl example demonstrating instancing, performance"
45,webgl,instancing / raycast,webgl_instancing_raycast.html,https://threejs.org/examples/webgl_instancing_raycast.html,"webgl, instancing, raycast",medium,3D visualization,"Three.js webgl example demonstrating instancing, raycast"
46,webgl,instancing / scatter,webgl_instancing_scatter.html,https://threejs.org/examples/webgl_instancing_scatter.html,"webgl, instancing, scatter",medium,3D visualization,"Three.js webgl example demonstrating instancing, scatter"
47,webgl,interactive / buffergeometry,webgl_interactive_buffergeometry.html,https://threejs.org/examples/webgl_interactive_buffergeometry.html,"webgl, interactive, buffergeometry",medium,user interaction; procedural generation,"Three.js webgl example demonstrating interactive, buffergeometry"
48,webgl,interactive / cubes,webgl_interactive_cubes.html,https://threejs.org/examples/webgl_interactive_cubes.html,"webgl, interactive, cubes",medium,user interaction,"Three.js webgl example demonstrating interactive, cubes"
49,webgl,interactive / cubes / gpu,webgl_interactive_cubes_gpu.html,https://threejs.org/examples/webgl_interactive_cubes_gpu.html,"webgl, interactive, cubes, gpu",medium,user interaction,"Three.js webgl example demonstrating interactive, cubes, gpu"
50,webgl,interactive / cubes / ortho,webgl_interactive_cubes_ortho.html,https://threejs.org/examples/webgl_interactive_cubes_ortho.html,"webgl, interactive, cubes, ortho",medium,user interaction,"Three.js webgl example demonstrating interactive, cubes, ortho"
51,webgl,interactive / lines,webgl_interactive_lines.html,https://threejs.org/examples/webgl_interactive_lines.html,"webgl, interactive, lines",medium,user interaction,"Three.js webgl example demonstrating interactive, lines"
52,webgl,interactive / points,webgl_interactive_points.html,https://threejs.org/examples/webgl_interactive_points.html,"webgl, interactive, points",medium,user interaction; particle effects,"Three.js webgl example demonstrating interactive, points"
53,webgl,interactive / raycasting / points,webgl_interactive_raycasting_points.html,https://threejs.org/examples/webgl_interactive_raycasting_points.html,"webgl, interactive, raycasting, points",medium,user interaction; particle effects,"Three.js webgl example demonstrating interactive, raycasting, points"
54,webgl,interactive / voxelpainter,webgl_interactive_voxelpainter.html,https://threejs.org/examples/webgl_interactive_voxelpainter.html,"webgl, interactive, voxelpainter",medium,user interaction,"Three.js webgl example demonstrating interactive, voxelpainter"
55,webgl,lensflares,webgl_lensflares.html,https://threejs.org/examples/webgl_lensflares.html,"webgl, lensflares",medium,VR/AR experience,Three.js webgl example demonstrating lensflares
56,webgl,lightprobe,webgl_lightprobe.html,https://threejs.org/examples/webgl_lightprobe.html,"webgl, lightprobe",medium,3D visualization,Three.js webgl example demonstrating lightprobe
57,webgl,lightprobe / cubecamera,webgl_lightprobe_cubecamera.html,https://threejs.org/examples/webgl_lightprobe_cubecamera.html,"webgl, lightprobe, cubecamera",medium,3D visualization,"Three.js webgl example demonstrating lightprobe, cubecamera"
58,webgl,lights / hemisphere,webgl_lights_hemisphere.html,https://threejs.org/examples/webgl_lights_hemisphere.html,"webgl, lights, hemisphere",medium,3D visualization,"Three.js webgl example demonstrating lights, hemisphere"
59,webgl,lights / physical,webgl_lights_physical.html,https://threejs.org/examples/webgl_lights_physical.html,"webgl, lights, physical",medium,3D visualization,"Three.js webgl example demonstrating lights, physical"
60,webgl,lights / spotlight,webgl_lights_spotlight.html,https://threejs.org/examples/webgl_lights_spotlight.html,"webgl, lights, spotlight",medium,3D visualization,"Three.js webgl example demonstrating lights, spotlight"
61,webgl,lights / spotlights,webgl_lights_spotlights.html,https://threejs.org/examples/webgl_lights_spotlights.html,"webgl, lights, spotlights",medium,3D visualization,"Three.js webgl example demonstrating lights, spotlights"
62,webgl,lights / pointlights,webgl_lights_pointlights.html,https://threejs.org/examples/webgl_lights_pointlights.html,"webgl, lights, pointlights",medium,3D visualization,"Three.js webgl example demonstrating lights, pointlights"
63,webgl,lights / rectarealight,webgl_lights_rectarealight.html,https://threejs.org/examples/webgl_lights_rectarealight.html,"webgl, lights, rectarealight",medium,VR/AR experience,"Three.js webgl example demonstrating lights, rectarealight"
64,webgl,lines / colors,webgl_lines_colors.html,https://threejs.org/examples/webgl_lines_colors.html,"webgl, lines, colors",medium,3D visualization,"Three.js webgl example demonstrating lines, colors"
65,webgl,lines / dashed,webgl_lines_dashed.html,https://threejs.org/examples/webgl_lines_dashed.html,"webgl, lines, dashed",medium,3D visualization,"Three.js webgl example demonstrating lines, dashed"
66,webgl,lines / fat,webgl_lines_fat.html,https://threejs.org/examples/webgl_lines_fat.html,"webgl, lines, fat",medium,3D visualization,"Three.js webgl example demonstrating lines, fat"
67,webgl,lines / fat / raycasting,webgl_lines_fat_raycasting.html,https://threejs.org/examples/webgl_lines_fat_raycasting.html,"webgl, lines, fat, raycasting",medium,3D visualization,"Three.js webgl example demonstrating lines, fat, raycasting"
68,webgl,lines / fat / wireframe,webgl_lines_fat_wireframe.html,https://threejs.org/examples/webgl_lines_fat_wireframe.html,"webgl, lines, fat, wireframe",medium,3D visualization,"Three.js webgl example demonstrating lines, fat, wireframe"
69,webgl,loader / 3dm,webgl_loader_3dm.html,https://threejs.org/examples/webgl_loader_3dm.html,"webgl, loader, 3dm",medium,model loading,"Three.js webgl example demonstrating loader, 3dm"
70,webgl,loader / 3ds,webgl_loader_3ds.html,https://threejs.org/examples/webgl_loader_3ds.html,"webgl, loader, 3ds",medium,model loading,"Three.js webgl example demonstrating loader, 3ds"
71,webgl,loader / 3dtiles,webgl_loader_3dtiles.html,https://threejs.org/examples/webgl_loader_3dtiles.html,"webgl, loader, 3dtiles",medium,model loading,"Three.js webgl example demonstrating loader, 3dtiles"
72,webgl,loader / 3mf,webgl_loader_3mf.html,https://threejs.org/examples/webgl_loader_3mf.html,"webgl, loader, 3mf",medium,model loading,"Three.js webgl example demonstrating loader, 3mf"
73,webgl,loader / 3mf / materials,webgl_loader_3mf_materials.html,https://threejs.org/examples/webgl_loader_3mf_materials.html,"webgl, loader, 3mf, materials",medium,model loading; material effects,"Three.js webgl example demonstrating loader, 3mf, materials"
74,webgl,loader / amf,webgl_loader_amf.html,https://threejs.org/examples/webgl_loader_amf.html,"webgl, loader, amf",medium,model loading,"Three.js webgl example demonstrating loader, amf"
75,webgl,loader / bvh,webgl_loader_bvh.html,https://threejs.org/examples/webgl_loader_bvh.html,"webgl, loader, bvh",medium,model loading,"Three.js webgl example demonstrating loader, bvh"
76,webgl,loader / collada,webgl_loader_collada.html,https://threejs.org/examples/webgl_loader_collada.html,"webgl, loader, collada",medium,model loading,"Three.js webgl example demonstrating loader, collada"
77,webgl,loader / collada / kinematics,webgl_loader_collada_kinematics.html,https://threejs.org/examples/webgl_loader_collada_kinematics.html,"webgl, loader, collada, kinematics",medium,model loading,"Three.js webgl example demonstrating loader, collada, kinematics"
78,webgl,loader / collada / skinning,webgl_loader_collada_skinning.html,https://threejs.org/examples/webgl_loader_collada_skinning.html,"webgl, loader, collada, skinning",medium,model loading,"Three.js webgl example demonstrating loader, collada, skinning"
79,webgl,loader / draco,webgl_loader_draco.html,https://threejs.org/examples/webgl_loader_draco.html,"webgl, loader, draco",medium,model loading,"Three.js webgl example demonstrating loader, draco"
80,webgl,loader / fbx,webgl_loader_fbx.html,https://threejs.org/examples/webgl_loader_fbx.html,"webgl, loader, fbx",medium,model loading,"Three.js webgl example demonstrating loader, fbx"
81,webgl,loader / fbx / nurbs,webgl_loader_fbx_nurbs.html,https://threejs.org/examples/webgl_loader_fbx_nurbs.html,"webgl, loader, fbx, nurbs",medium,model loading,"Three.js webgl example demonstrating loader, fbx, nurbs"
82,webgl,loader / gcode,webgl_loader_gcode.html,https://threejs.org/examples/webgl_loader_gcode.html,"webgl, loader, gcode",medium,model loading,"Three.js webgl example demonstrating loader, gcode"
83,webgl,loader / gltf,webgl_loader_gltf.html,https://threejs.org/examples/webgl_loader_gltf.html,"webgl, loader, gltf",medium,model loading,"Three.js webgl example demonstrating loader, gltf"
84,webgl,loader / gltf / animation / pointer,webgl_loader_gltf_animation_pointer.html,https://threejs.org/examples/webgl_loader_gltf_animation_pointer.html,"webgl, loader, gltf, animation, pointer",medium,character animation; model loading,"Three.js webgl example demonstrating loader, gltf, animation, pointer"
85,webgl,loader / gltf / progressive / lod,webgl_loader_gltf_progressive_lod.html,https://threejs.org/examples/webgl_loader_gltf_progressive_lod.html,"webgl, loader, gltf, progressive, lod",medium,model loading,"Three.js webgl example demonstrating loader, gltf, progressive, lod"
86,webgl,loader / gltf / avif,webgl_loader_gltf_avif.html,https://threejs.org/examples/webgl_loader_gltf_avif.html,"webgl, loader, gltf, avif",medium,model loading,"Three.js webgl example demonstrating loader, gltf, avif"
87,webgl,loader / gltf / compressed,webgl_loader_gltf_compressed.html,https://threejs.org/examples/webgl_loader_gltf_compressed.html,"webgl, loader, gltf, compressed",medium,model loading,"Three.js webgl example demonstrating loader, gltf, compressed"
88,webgl,loader / gltf / dispersion,webgl_loader_gltf_dispersion.html,https://threejs.org/examples/webgl_loader_gltf_dispersion.html,"webgl, loader, gltf, dispersion",medium,model loading,"Three.js webgl example demonstrating loader, gltf, dispersion"
89,webgl,loader / gltf / instancing,webgl_loader_gltf_instancing.html,https://threejs.org/examples/webgl_loader_gltf_instancing.html,"webgl, loader, gltf, instancing",medium,model loading,"Three.js webgl example demonstrating loader, gltf, instancing"
90,webgl,loader / gltf / iridescence,webgl_loader_gltf_iridescence.html,https://threejs.org/examples/webgl_loader_gltf_iridescence.html,"webgl, loader, gltf, iridescence",medium,model loading,"Three.js webgl example demonstrating loader, gltf, iridescence"
91,webgl,loader / gltf / sheen,webgl_loader_gltf_sheen.html,https://threejs.org/examples/webgl_loader_gltf_sheen.html,"webgl, loader, gltf, sheen",medium,model loading,"Three.js webgl example demonstrating loader, gltf, sheen"
92,webgl,loader / gltf / transmission,webgl_loader_gltf_transmission.html,https://threejs.org/examples/webgl_loader_gltf_transmission.html,"webgl, loader, gltf, transmission",medium,model loading,"Three.js webgl example demonstrating loader, gltf, transmission"
93,webgl,loader / gltf / variants,webgl_loader_gltf_variants.html,https://threejs.org/examples/webgl_loader_gltf_variants.html,"webgl, loader, gltf, variants",medium,model loading; VR/AR experience,"Three.js webgl example demonstrating loader, gltf, variants"
94,webgl,loader / gltf / anisotropy,webgl_loader_gltf_anisotropy.html,https://threejs.org/examples/webgl_loader_gltf_anisotropy.html,"webgl, loader, gltf, anisotropy",medium,model loading,"Three.js webgl example demonstrating loader, gltf, anisotropy"
95,webgl,loader / ifc,webgl_loader_ifc.html,https://threejs.org/examples/webgl_loader_ifc.html,"webgl, loader, ifc",medium,model loading,"Three.js webgl example demonstrating loader, ifc"
96,webgl,loader / imagebitmap,webgl_loader_imagebitmap.html,https://threejs.org/examples/webgl_loader_imagebitmap.html,"webgl, loader, imagebitmap",medium,model loading,"Three.js webgl example demonstrating loader, imagebitmap"
97,webgl,loader / kmz,webgl_loader_kmz.html,https://threejs.org/examples/webgl_loader_kmz.html,"webgl, loader, kmz",medium,model loading,"Three.js webgl example demonstrating loader, kmz"
98,webgl,loader / ldraw,webgl_loader_ldraw.html,https://threejs.org/examples/webgl_loader_ldraw.html,"webgl, loader, ldraw",medium,model loading,"Three.js webgl example demonstrating loader, ldraw"
99,webgl,loader / lwo,webgl_loader_lwo.html,https://threejs.org/examples/webgl_loader_lwo.html,"webgl, loader, lwo",medium,model loading,"Three.js webgl example demonstrating loader, lwo"
100,webgl,loader / md2,webgl_loader_md2.html,https://threejs.org/examples/webgl_loader_md2.html,"webgl, loader, md2",medium,model loading,"Three.js webgl example demonstrating loader, md2"
101,webgl,loader / md2 / control,webgl_loader_md2_control.html,https://threejs.org/examples/webgl_loader_md2_control.html,"webgl, loader, md2, control",medium,model loading,"Three.js webgl example demonstrating loader, md2, control"
102,webgl,loader / mdd,webgl_loader_mdd.html,https://threejs.org/examples/webgl_loader_mdd.html,"webgl, loader, mdd",medium,model loading,"Three.js webgl example demonstrating loader, mdd"
103,webgl,loader / nrrd,webgl_loader_nrrd.html,https://threejs.org/examples/webgl_loader_nrrd.html,"webgl, loader, nrrd",medium,model loading,"Three.js webgl example demonstrating loader, nrrd"
104,webgl,loader / obj,webgl_loader_obj.html,https://threejs.org/examples/webgl_loader_obj.html,"webgl, loader, obj",medium,model loading,"Three.js webgl example demonstrating loader, obj"
105,webgl,loader / pcd,webgl_loader_pcd.html,https://threejs.org/examples/webgl_loader_pcd.html,"webgl, loader, pcd",medium,model loading,"Three.js webgl example demonstrating loader, pcd"
106,webgl,loader / pdb,webgl_loader_pdb.html,https://threejs.org/examples/webgl_loader_pdb.html,"webgl, loader, pdb",medium,model loading,"Three.js webgl example demonstrating loader, pdb"
107,webgl,loader / ply,webgl_loader_ply.html,https://threejs.org/examples/webgl_loader_ply.html,"webgl, loader, ply",medium,model loading,"Three.js webgl example demonstrating loader, ply"
108,webgl,loader / stl,webgl_loader_stl.html,https://threejs.org/examples/webgl_loader_stl.html,"webgl, loader, stl",medium,model loading,"Three.js webgl example demonstrating loader, stl"
109,webgl,loader / svg,webgl_loader_svg.html,https://threejs.org/examples/webgl_loader_svg.html,"webgl, loader, svg",medium,model loading,"Three.js webgl example demonstrating loader, svg"
110,webgl,loader / texture / dds,webgl_loader_texture_dds.html,https://threejs.org/examples/webgl_loader_texture_dds.html,"webgl, loader, texture, dds",medium,model loading,"Three.js webgl example demonstrating loader, texture, dds"
111,webgl,loader / texture / exr,webgl_loader_texture_exr.html,https://threejs.org/examples/webgl_loader_texture_exr.html,"webgl, loader, texture, exr",medium,model loading; VR/AR experience,"Three.js webgl example demonstrating loader, texture, exr"
112,webgl,loader / texture / hdr,webgl_loader_texture_hdr.html,https://threejs.org/examples/webgl_loader_texture_hdr.html,"webgl, loader, texture, hdr",medium,model loading,"Three.js webgl example demonstrating loader, texture, hdr"
113,webgl,loader / texture / ktx,webgl_loader_texture_ktx.html,https://threejs.org/examples/webgl_loader_texture_ktx.html,"webgl, loader, texture, ktx",medium,model loading,"Three.js webgl example demonstrating loader, texture, ktx"
114,webgl,loader / texture / ktx2,webgl_loader_texture_ktx2.html,https://threejs.org/examples/webgl_loader_texture_ktx2.html,"webgl, loader, texture, ktx2",medium,model loading,"Three.js webgl example demonstrating loader, texture, ktx2"
115,webgl,loader / texture / lottie,webgl_loader_texture_lottie.html,https://threejs.org/examples/webgl_loader_texture_lottie.html,"webgl, loader, texture, lottie",medium,model loading,"Three.js webgl example demonstrating loader, texture, lottie"
116,webgl,loader / texture / pvrtc,webgl_loader_texture_pvrtc.html,https://threejs.org/examples/webgl_loader_texture_pvrtc.html,"webgl, loader, texture, pvrtc",medium,model loading; VR/AR experience,"Three.js webgl example demonstrating loader, texture, pvrtc"
117,webgl,loader / texture / rgbm,webgl_loader_texture_rgbm.html,https://threejs.org/examples/webgl_loader_texture_rgbm.html,"webgl, loader, texture, rgbm",medium,model loading,"Three.js webgl example demonstrating loader, texture, rgbm"
118,webgl,loader / texture / tga,webgl_loader_texture_tga.html,https://threejs.org/examples/webgl_loader_texture_tga.html,"webgl, loader, texture, tga",medium,model loading,"Three.js webgl example demonstrating loader, texture, tga"
119,webgl,loader / texture / tiff,webgl_loader_texture_tiff.html,https://threejs.org/examples/webgl_loader_texture_tiff.html,"webgl, loader, texture, tiff",medium,model loading,"Three.js webgl example demonstrating loader, texture, tiff"
120,webgl,loader / ttf,webgl_loader_ttf.html,https://threejs.org/examples/webgl_loader_ttf.html,"webgl, loader, ttf",medium,model loading,"Three.js webgl example demonstrating loader, ttf"
121,webgl,loader / usdz,webgl_loader_usdz.html,https://threejs.org/examples/webgl_loader_usdz.html,"webgl, loader, usdz",medium,model loading,"Three.js webgl example demonstrating loader, usdz"
122,webgl,loader / vox,webgl_loader_vox.html,https://threejs.org/examples/webgl_loader_vox.html,"webgl, loader, vox",medium,model loading,"Three.js webgl example demonstrating loader, vox"
123,webgl,loader / vrml,webgl_loader_vrml.html,https://threejs.org/examples/webgl_loader_vrml.html,"webgl, loader, vrml",medium,model loading; VR/AR experience,"Three.js webgl example demonstrating loader, vrml"
124,webgl,loader / vtk,webgl_loader_vtk.html,https://threejs.org/examples/webgl_loader_vtk.html,"webgl, loader, vtk",medium,model loading,"Three.js webgl example demonstrating loader, vtk"
125,webgl,loader / xyz,webgl_loader_xyz.html,https://threejs.org/examples/webgl_loader_xyz.html,"webgl, loader, xyz",medium,model loading,"Three.js webgl example demonstrating loader, xyz"
126,webgl,lod,webgl_lod.html,https://threejs.org/examples/webgl_lod.html,"webgl, lod",medium,3D visualization,Three.js webgl example demonstrating lod
127,webgl,marchingcubes,webgl_marchingcubes.html,https://threejs.org/examples/webgl_marchingcubes.html,"webgl, marchingcubes",medium,VR/AR experience,Three.js webgl example demonstrating marchingcubes
128,webgl,materials / alphahash,webgl_materials_alphahash.html,https://threejs.org/examples/webgl_materials_alphahash.html,"webgl, materials, alphahash",medium,material effects,"Three.js webgl example demonstrating materials, alphahash"
129,webgl,materials / blending,webgl_materials_blending.html,https://threejs.org/examples/webgl_materials_blending.html,"webgl, materials, blending",medium,material effects,"Three.js webgl example demonstrating materials, blending"
130,webgl,materials / blending / custom,webgl_materials_blending_custom.html,https://threejs.org/examples/webgl_materials_blending_custom.html,"webgl, materials, blending, custom",medium,material effects,"Three.js webgl example demonstrating materials, blending, custom"
131,webgl,materials / bumpmap,webgl_materials_bumpmap.html,https://threejs.org/examples/webgl_materials_bumpmap.html,"webgl, materials, bumpmap",medium,material effects,"Three.js webgl example demonstrating materials, bumpmap"
132,webgl,materials / car,webgl_materials_car.html,https://threejs.org/examples/webgl_materials_car.html,"webgl, materials, car",medium,material effects; VR/AR experience,"Three.js webgl example demonstrating materials, car"
133,webgl,materials / channels,webgl_materials_channels.html,https://threejs.org/examples/webgl_materials_channels.html,"webgl, materials, channels",medium,material effects,"Three.js webgl example demonstrating materials, channels"
134,webgl,materials / cubemap,webgl_materials_cubemap.html,https://threejs.org/examples/webgl_materials_cubemap.html,"webgl, materials, cubemap",medium,material effects,"Three.js webgl example demonstrating materials, cubemap"
135,webgl,materials / cubemap / dynamic,webgl_materials_cubemap_dynamic.html,https://threejs.org/examples/webgl_materials_cubemap_dynamic.html,"webgl, materials, cubemap, dynamic",medium,material effects,"Three.js webgl example demonstrating materials, cubemap, dynamic"
136,webgl,materials / cubemap / refraction,webgl_materials_cubemap_refraction.html,https://threejs.org/examples/webgl_materials_cubemap_refraction.html,"webgl, materials, cubemap, refraction",medium,material effects,"Three.js webgl example demonstrating materials, cubemap, refraction"
137,webgl,materials / cubemap / mipmaps,webgl_materials_cubemap_mipmaps.html,https://threejs.org/examples/webgl_materials_cubemap_mipmaps.html,"webgl, materials, cubemap, mipmaps",medium,material effects,"Three.js webgl example demonstrating materials, cubemap, mipmaps"
138,webgl,materials / cubemap / render / to / mipmaps,webgl_materials_cubemap_render_to_mipmaps.html,https://threejs.org/examples/webgl_materials_cubemap_render_to_mipmaps.html,"webgl, materials, cubemap, render, to, mipmaps",medium,material effects,"Three.js webgl example demonstrating materials, cubemap, render, to, mipmaps"
139,webgl,materials / displacementmap,webgl_materials_displacementmap.html,https://threejs.org/examples/webgl_materials_displacementmap.html,"webgl, materials, displacementmap",medium,material effects,"Three.js webgl example demonstrating materials, displacementmap"
140,webgl,materials / envmaps,webgl_materials_envmaps.html,https://threejs.org/examples/webgl_materials_envmaps.html,"webgl, materials, envmaps",medium,material effects,"Three.js webgl example demonstrating materials, envmaps"
141,webgl,materials / envmaps / exr,webgl_materials_envmaps_exr.html,https://threejs.org/examples/webgl_materials_envmaps_exr.html,"webgl, materials, envmaps, exr",medium,material effects; VR/AR experience,"Three.js webgl example demonstrating materials, envmaps, exr"
142,webgl,materials / envmaps / groundprojected,webgl_materials_envmaps_groundprojected.html,https://threejs.org/examples/webgl_materials_envmaps_groundprojected.html,"webgl, materials, envmaps, groundprojected",medium,material effects,"Three.js webgl example demonstrating materials, envmaps, groundprojected"
143,webgl,materials / envmaps / hdr,webgl_materials_envmaps_hdr.html,https://threejs.org/examples/webgl_materials_envmaps_hdr.html,"webgl, materials, envmaps, hdr",medium,material effects,"Three.js webgl example demonstrating materials, envmaps, hdr"
144,webgl,materials / lightmap,webgl_materials_lightmap.html,https://threejs.org/examples/webgl_materials_lightmap.html,"webgl, materials, lightmap",medium,material effects,"Three.js webgl example demonstrating materials, lightmap"
145,webgl,materials / matcap,webgl_materials_matcap.html,https://threejs.org/examples/webgl_materials_matcap.html,"webgl, materials, matcap",medium,material effects,"Three.js webgl example demonstrating materials, matcap"
146,webgl,materials / normalmap,webgl_materials_normalmap.html,https://threejs.org/examples/webgl_materials_normalmap.html,"webgl, materials, normalmap",medium,material effects,"Three.js webgl example demonstrating materials, normalmap"
147,webgl,materials / normalmap / object / space,webgl_materials_normalmap_object_space.html,https://threejs.org/examples/webgl_materials_normalmap_object_space.html,"webgl, materials, normalmap, object, space",medium,material effects,"Three.js webgl example demonstrating materials, normalmap, object, space"
148,webgl,materials / physical / clearcoat,webgl_materials_physical_clearcoat.html,https://threejs.org/examples/webgl_materials_physical_clearcoat.html,"webgl, materials, physical, clearcoat",medium,material effects; VR/AR experience,"Three.js webgl example demonstrating materials, physical, clearcoat"
149,webgl,materials / physical / transmission,webgl_materials_physical_transmission.html,https://threejs.org/examples/webgl_materials_physical_transmission.html,"webgl, materials, physical, transmission",medium,material effects,"Three.js webgl example demonstrating materials, physical, transmission"
150,webgl,materials / physical / transmission / alpha,webgl_materials_physical_transmission_alpha.html,https://threejs.org/examples/webgl_materials_physical_transmission_alpha.html,"webgl, materials, physical, transmission, alpha",medium,material effects,"Three.js webgl example demonstrating materials, physical, transmission, alpha"
151,webgl,materials / subsurface / scattering,webgl_materials_subsurface_scattering.html,https://threejs.org/examples/webgl_materials_subsurface_scattering.html,"webgl, materials, subsurface, scattering",medium,material effects,"Three.js webgl example demonstrating materials, subsurface, scattering"
152,webgl,materials / texture / anisotropy,webgl_materials_texture_anisotropy.html,https://threejs.org/examples/webgl_materials_texture_anisotropy.html,"webgl, materials, texture, anisotropy",medium,material effects,"Three.js webgl example demonstrating materials, texture, anisotropy"
153,webgl,materials / texture / canvas,webgl_materials_texture_canvas.html,https://threejs.org/examples/webgl_materials_texture_canvas.html,"webgl, materials, texture, canvas",medium,material effects,"Three.js webgl example demonstrating materials, texture, canvas"
154,webgl,materials / texture / filters,webgl_materials_texture_filters.html,https://threejs.org/examples/webgl_materials_texture_filters.html,"webgl, materials, texture, filters",medium,material effects,"Three.js webgl example demonstrating materials, texture, filters"
155,webgl,materials / texture / manualmipmap,webgl_materials_texture_manualmipmap.html,https://threejs.org/examples/webgl_materials_texture_manualmipmap.html,"webgl, materials, texture, manualmipmap",medium,material effects,"Three.js webgl example demonstrating materials, texture, manualmipmap"
156,webgl,materials / texture / partialupdate,webgl_materials_texture_partialupdate.html,https://threejs.org/examples/webgl_materials_texture_partialupdate.html,"webgl, materials, texture, partialupdate",medium,material effects; VR/AR experience,"Three.js webgl example demonstrating materials, texture, partialupdate"
157,webgl,materials / texture / rotation,webgl_materials_texture_rotation.html,https://threejs.org/examples/webgl_materials_texture_rotation.html,"webgl, materials, texture, rotation",medium,material effects,"Three.js webgl example demonstrating materials, texture, rotation"
158,webgl,materials / toon,webgl_materials_toon.html,https://threejs.org/examples/webgl_materials_toon.html,"webgl, materials, toon",medium,material effects,"Three.js webgl example demonstrating materials, toon"
159,webgl,materials / video,webgl_materials_video.html,https://threejs.org/examples/webgl_materials_video.html,"webgl, materials, video",medium,material effects,"Three.js webgl example demonstrating materials, video"
160,webgl,materials / video / webcam,webgl_materials_video_webcam.html,https://threejs.org/examples/webgl_materials_video_webcam.html,"webgl, materials, video, webcam",medium,material effects,"Three.js webgl example demonstrating materials, video, webcam"
161,webgl,materials / wireframe,webgl_materials_wireframe.html,https://threejs.org/examples/webgl_materials_wireframe.html,"webgl, materials, wireframe",medium,material effects,"Three.js webgl example demonstrating materials, wireframe"
162,webgl,pmrem / cubemap,webgl_pmrem_cubemap.html,https://threejs.org/examples/webgl_pmrem_cubemap.html,"webgl, pmrem, cubemap",medium,3D visualization,"Three.js webgl example demonstrating pmrem, cubemap"
163,webgl,pmrem / equirectangular,webgl_pmrem_equirectangular.html,https://threejs.org/examples/webgl_pmrem_equirectangular.html,"webgl, pmrem, equirectangular",medium,VR/AR experience,"Three.js webgl example demonstrating pmrem, equirectangular"
164,webgl,pmrem / test,webgl_pmrem_test.html,https://threejs.org/examples/webgl_pmrem_test.html,"webgl, pmrem, test",medium,3D visualization,"Three.js webgl example demonstrating pmrem, test"
165,webgl,math / obb,webgl_math_obb.html,https://threejs.org/examples/webgl_math_obb.html,"webgl, math, obb",medium,3D visualization,"Three.js webgl example demonstrating math, obb"
166,webgl,math / orientation / transform,webgl_math_orientation_transform.html,https://threejs.org/examples/webgl_math_orientation_transform.html,"webgl, math, orientation, transform",medium,3D visualization,"Three.js webgl example demonstrating math, orientation, transform"
167,webgl,mesh / batch,webgl_mesh_batch.html,https://threejs.org/examples/webgl_mesh_batch.html,"webgl, mesh, batch",medium,3D visualization,"Three.js webgl example demonstrating mesh, batch"
168,webgl,mirror,webgl_mirror.html,https://threejs.org/examples/webgl_mirror.html,"webgl, mirror",medium,3D visualization,Three.js webgl example demonstrating mirror
169,webgl,modifier / curve,webgl_modifier_curve.html,https://threejs.org/examples/webgl_modifier_curve.html,"webgl, modifier, curve",medium,3D visualization,"Three.js webgl example demonstrating modifier, curve"
170,webgl,modifier / curve / instanced,webgl_modifier_curve_instanced.html,https://threejs.org/examples/webgl_modifier_curve_instanced.html,"webgl, modifier, curve, instanced",medium,3D visualization,"Three.js webgl example demonstrating modifier, curve, instanced"
171,webgl,modifier / edgesplit,webgl_modifier_edgesplit.html,https://threejs.org/examples/webgl_modifier_edgesplit.html,"webgl, modifier, edgesplit",medium,3D visualization,"Three.js webgl example demonstrating modifier, edgesplit"
172,webgl,modifier / simplifier,webgl_modifier_simplifier.html,https://threejs.org/examples/webgl_modifier_simplifier.html,"webgl, modifier, simplifier",medium,3D visualization,"Three.js webgl example demonstrating modifier, simplifier"
173,webgl,modifier / subdivision,webgl_modifier_subdivision.html,https://threejs.org/examples/webgl_modifier_subdivision.html,"webgl, modifier, subdivision",medium,3D visualization,"Three.js webgl example demonstrating modifier, subdivision"
174,webgl,modifier / tessellation,webgl_modifier_tessellation.html,https://threejs.org/examples/webgl_modifier_tessellation.html,"webgl, modifier, tessellation",medium,3D visualization,"Three.js webgl example demonstrating modifier, tessellation"
175,webgl,morphtargets,webgl_morphtargets.html,https://threejs.org/examples/webgl_morphtargets.html,"webgl, morphtargets",medium,VR/AR experience,Three.js webgl example demonstrating morphtargets
176,webgl,morphtargets / face,webgl_morphtargets_face.html,https://threejs.org/examples/webgl_morphtargets_face.html,"webgl, morphtargets, face",medium,VR/AR experience,"Three.js webgl example demonstrating morphtargets, face"
177,webgl,morphtargets / horse,webgl_morphtargets_horse.html,https://threejs.org/examples/webgl_morphtargets_horse.html,"webgl, morphtargets, horse",medium,VR/AR experience,"Three.js webgl example demonstrating morphtargets, horse"
178,webgl,morphtargets / sphere,webgl_morphtargets_sphere.html,https://threejs.org/examples/webgl_morphtargets_sphere.html,"webgl, morphtargets, sphere",medium,VR/AR experience,"Three.js webgl example demonstrating morphtargets, sphere"
179,webgl,morphtargets / webcam,webgl_morphtargets_webcam.html,https://threejs.org/examples/webgl_morphtargets_webcam.html,"webgl, morphtargets, webcam",medium,VR/AR experience,"Three.js webgl example demonstrating morphtargets, webcam"
180,webgl,multiple / elements,webgl_multiple_elements.html,https://threejs.org/examples/webgl_multiple_elements.html,"webgl, multiple, elements",medium,3D visualization,"Three.js webgl example demonstrating multiple, elements"
181,webgl,multiple / elements / text,webgl_multiple_elements_text.html,https://threejs.org/examples/webgl_multiple_elements_text.html,"webgl, multiple, elements, text",medium,3D visualization,"Three.js webgl example demonstrating multiple, elements, text"
182,webgl,multiple / scenes / comparison,webgl_multiple_scenes_comparison.html,https://threejs.org/examples/webgl_multiple_scenes_comparison.html,"webgl, multiple, scenes, comparison",medium,VR/AR experience,"Three.js webgl example demonstrating multiple, scenes, comparison"
183,webgl,multiple / views,webgl_multiple_views.html,https://threejs.org/examples/webgl_multiple_views.html,"webgl, multiple, views",medium,3D visualization,"Three.js webgl example demonstrating multiple, views"
184,webgl,panorama / cube,webgl_panorama_cube.html,https://threejs.org/examples/webgl_panorama_cube.html,"webgl, panorama, cube",medium,3D visualization,"Three.js webgl example demonstrating panorama, cube"
185,webgl,panorama / equirectangular,webgl_panorama_equirectangular.html,https://threejs.org/examples/webgl_panorama_equirectangular.html,"webgl, panorama, equirectangular",medium,VR/AR experience,"Three.js webgl example demonstrating panorama, equirectangular"
186,webgl,points / billboards,webgl_points_billboards.html,https://threejs.org/examples/webgl_points_billboards.html,"webgl, points, billboards",medium,VR/AR experience; particle effects,"Three.js webgl example demonstrating points, billboards"
187,webgl,points / dynamic,webgl_points_dynamic.html,https://threejs.org/examples/webgl_points_dynamic.html,"webgl, points, dynamic",medium,particle effects,"Three.js webgl example demonstrating points, dynamic"
188,webgl,points / sprites,webgl_points_sprites.html,https://threejs.org/examples/webgl_points_sprites.html,"webgl, points, sprites",medium,particle effects,"Three.js webgl example demonstrating points, sprites"
189,webgl,points / waves,webgl_points_waves.html,https://threejs.org/examples/webgl_points_waves.html,"webgl, points, waves",medium,particle effects,"Three.js webgl example demonstrating points, waves"
190,webgl,portal,webgl_portal.html,https://threejs.org/examples/webgl_portal.html,"webgl, portal",medium,3D visualization,Three.js webgl example demonstrating portal
191,webgl,raycaster / bvh,webgl_raycaster_bvh.html,https://threejs.org/examples/webgl_raycaster_bvh.html,"webgl, raycaster, bvh",medium,user interaction,"Three.js webgl example demonstrating raycaster, bvh"
192,webgl,raycaster / sprite,webgl_raycaster_sprite.html,https://threejs.org/examples/webgl_raycaster_sprite.html,"webgl, raycaster, sprite",medium,user interaction,"Three.js webgl example demonstrating raycaster, sprite"
193,webgl,raycaster / texture,webgl_raycaster_texture.html,https://threejs.org/examples/webgl_raycaster_texture.html,"webgl, raycaster, texture",medium,user interaction,"Three.js webgl example demonstrating raycaster, texture"
194,webgl,read / float / buffer,webgl_read_float_buffer.html,https://threejs.org/examples/webgl_read_float_buffer.html,"webgl, read, float, buffer",medium,3D visualization,"Three.js webgl example demonstrating read, float, buffer"
195,webgl,renderer / pathtracer,webgl_renderer_pathtracer.html,https://threejs.org/examples/webgl_renderer_pathtracer.html,"webgl, renderer, pathtracer",medium,3D visualization,"Three.js webgl example demonstrating renderer, pathtracer"
196,webgl,refraction,webgl_refraction.html,https://threejs.org/examples/webgl_refraction.html,"webgl, refraction",medium,3D visualization,Three.js webgl example demonstrating refraction
197,webgl,rtt,webgl_rtt.html,https://threejs.org/examples/webgl_rtt.html,"webgl, rtt",medium,3D visualization,Three.js webgl example demonstrating rtt
198,webgl,shader,webgl_shader.html,https://threejs.org/examples/webgl_shader.html,"webgl, shader",medium,3D visualization,Three.js webgl example demonstrating shader
199,webgl,shader / lava,webgl_shader_lava.html,https://threejs.org/examples/webgl_shader_lava.html,"webgl, shader, lava",medium,3D visualization,"Three.js webgl example demonstrating shader, lava"
200,webgl,shaders / ocean,webgl_shaders_ocean.html,https://threejs.org/examples/webgl_shaders_ocean.html,"webgl, shaders, ocean",medium,3D visualization,"Three.js webgl example demonstrating shaders, ocean"
201,webgl,shaders / sky,webgl_shaders_sky.html,https://threejs.org/examples/webgl_shaders_sky.html,"webgl, shaders, sky",medium,3D visualization,"Three.js webgl example demonstrating shaders, sky"
202,webgl,shadow / contact,webgl_shadow_contact.html,https://threejs.org/examples/webgl_shadow_contact.html,"webgl, shadow, contact",medium,realistic lighting,"Three.js webgl example demonstrating shadow, contact"
203,webgl,shadowmap,webgl_shadowmap.html,https://threejs.org/examples/webgl_shadowmap.html,"webgl, shadowmap",medium,realistic lighting,Three.js webgl example demonstrating shadowmap
204,webgl,shadowmap / performance,webgl_shadowmap_performance.html,https://threejs.org/examples/webgl_shadowmap_performance.html,"webgl, shadowmap, performance",medium,realistic lighting,"Three.js webgl example demonstrating shadowmap, performance"
205,webgl,shadowmap / pointlight,webgl_shadowmap_pointlight.html,https://threejs.org/examples/webgl_shadowmap_pointlight.html,"webgl, shadowmap, pointlight",medium,realistic lighting,"Three.js webgl example demonstrating shadowmap, pointlight"
206,webgl,shadowmap / viewer,webgl_shadowmap_viewer.html,https://threejs.org/examples/webgl_shadowmap_viewer.html,"webgl, shadowmap, viewer",medium,realistic lighting,"Three.js webgl example demonstrating shadowmap, viewer"
207,webgl,shadowmap / vsm,webgl_shadowmap_vsm.html,https://threejs.org/examples/webgl_shadowmap_vsm.html,"webgl, shadowmap, vsm",medium,realistic lighting,"Three.js webgl example demonstrating shadowmap, vsm"
208,webgl,shadowmesh,webgl_shadowmesh.html,https://threejs.org/examples/webgl_shadowmesh.html,"webgl, shadowmesh",medium,realistic lighting,Three.js webgl example demonstrating shadowmesh
209,webgl,sprites,webgl_sprites.html,https://threejs.org/examples/webgl_sprites.html,"webgl, sprites",medium,3D visualization,Three.js webgl example demonstrating sprites
210,webgl,test / memory,webgl_test_memory.html,https://threejs.org/examples/webgl_test_memory.html,"webgl, test, memory",medium,3D visualization,"Three.js webgl example demonstrating test, memory"
211,webgl,test / memory2,webgl_test_memory2.html,https://threejs.org/examples/webgl_test_memory2.html,"webgl, test, memory2",medium,3D visualization,"Three.js webgl example demonstrating test, memory2"
212,webgl,test / wide / gamut,webgl_test_wide_gamut.html,https://threejs.org/examples/webgl_test_wide_gamut.html,"webgl, test, wide, gamut",medium,3D visualization,"Three.js webgl example demonstrating test, wide, gamut"
213,webgl,tonemapping,webgl_tonemapping.html,https://threejs.org/examples/webgl_tonemapping.html,"webgl, tonemapping",medium,3D visualization,Three.js webgl example demonstrating tonemapping
214,webgl,video / kinect,webgl_video_kinect.html,https://threejs.org/examples/webgl_video_kinect.html,"webgl, video, kinect",medium,3D visualization,"Three.js webgl example demonstrating video, kinect"
215,webgl,video / panorama / equirectangular,webgl_video_panorama_equirectangular.html,https://threejs.org/examples/webgl_video_panorama_equirectangular.html,"webgl, video, panorama, equirectangular",medium,VR/AR experience,"Three.js webgl example demonstrating video, panorama, equirectangular"
216,webgl,watch,webgl_watch.html,https://threejs.org/examples/webgl_watch.html,"webgl, watch",medium,3D visualization,Three.js webgl example demonstrating watch
217,webgl / postprocessing,postprocessing,webgl_postprocessing.html,https://threejs.org/examples/webgl_postprocessing.html,"webgl, postprocessing",medium,visual effects,Three.js webgl / postprocessing example demonstrating postprocessing
218,webgl / postprocessing,postprocessing / 3dlut,webgl_postprocessing_3dlut.html,https://threejs.org/examples/webgl_postprocessing_3dlut.html,"webgl, postprocessing, 3dlut",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, 3dlut"
219,webgl / postprocessing,postprocessing / advanced,webgl_postprocessing_advanced.html,https://threejs.org/examples/webgl_postprocessing_advanced.html,"webgl, postprocessing, advanced",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, advanced"
220,webgl / postprocessing,postprocessing / afterimage,webgl_postprocessing_afterimage.html,https://threejs.org/examples/webgl_postprocessing_afterimage.html,"webgl, postprocessing, afterimage",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, afterimage"
221,webgl / postprocessing,postprocessing / backgrounds,webgl_postprocessing_backgrounds.html,https://threejs.org/examples/webgl_postprocessing_backgrounds.html,"webgl, postprocessing, backgrounds",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, backgrounds"
222,webgl / postprocessing,postprocessing / transition,webgl_postprocessing_transition.html,https://threejs.org/examples/webgl_postprocessing_transition.html,"webgl, postprocessing, transition",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, transition"
223,webgl / postprocessing,postprocessing / dof,webgl_postprocessing_dof.html,https://threejs.org/examples/webgl_postprocessing_dof.html,"webgl, postprocessing, dof",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, dof"
224,webgl / postprocessing,postprocessing / dof2,webgl_postprocessing_dof2.html,https://threejs.org/examples/webgl_postprocessing_dof2.html,"webgl, postprocessing, dof2",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, dof2"
225,webgl / postprocessing,postprocessing / fxaa,webgl_postprocessing_fxaa.html,https://threejs.org/examples/webgl_postprocessing_fxaa.html,"webgl, postprocessing, fxaa",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, fxaa"
226,webgl / postprocessing,postprocessing / glitch,webgl_postprocessing_glitch.html,https://threejs.org/examples/webgl_postprocessing_glitch.html,"webgl, postprocessing, glitch",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, glitch"
227,webgl / postprocessing,postprocessing / godrays,webgl_postprocessing_godrays.html,https://threejs.org/examples/webgl_postprocessing_godrays.html,"webgl, postprocessing, godrays",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, godrays"
228,webgl / postprocessing,postprocessing / gtao,webgl_postprocessing_gtao.html,https://threejs.org/examples/webgl_postprocessing_gtao.html,"webgl, postprocessing, gtao",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, gtao"
229,webgl / postprocessing,postprocessing / rgb / halftone,webgl_postprocessing_rgb_halftone.html,https://threejs.org/examples/webgl_postprocessing_rgb_halftone.html,"webgl, postprocessing, rgb, halftone",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, rgb, halftone"
230,webgl / postprocessing,postprocessing / masking,webgl_postprocessing_masking.html,https://threejs.org/examples/webgl_postprocessing_masking.html,"webgl, postprocessing, masking",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, masking"
231,webgl / postprocessing,postprocessing / material / ao,webgl_postprocessing_material_ao.html,https://threejs.org/examples/webgl_postprocessing_material_ao.html,"webgl, postprocessing, material, ao",medium,material effects; visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, material, ao"
232,webgl / postprocessing,postprocessing / ssaa,webgl_postprocessing_ssaa.html,https://threejs.org/examples/webgl_postprocessing_ssaa.html,"webgl, postprocessing, ssaa",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, ssaa"
233,webgl / postprocessing,postprocessing / outline,webgl_postprocessing_outline.html,https://threejs.org/examples/webgl_postprocessing_outline.html,"webgl, postprocessing, outline",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, outline"
234,webgl / postprocessing,postprocessing / pixel,webgl_postprocessing_pixel.html,https://threejs.org/examples/webgl_postprocessing_pixel.html,"webgl, postprocessing, pixel",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, pixel"
235,webgl / postprocessing,postprocessing / procedural,webgl_postprocessing_procedural.html,https://threejs.org/examples/webgl_postprocessing_procedural.html,"webgl, postprocessing, procedural",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, procedural"
236,webgl / postprocessing,postprocessing / sao,webgl_postprocessing_sao.html,https://threejs.org/examples/webgl_postprocessing_sao.html,"webgl, postprocessing, sao",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, sao"
237,webgl / postprocessing,postprocessing / smaa,webgl_postprocessing_smaa.html,https://threejs.org/examples/webgl_postprocessing_smaa.html,"webgl, postprocessing, smaa",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, smaa"
238,webgl / postprocessing,postprocessing / sobel,webgl_postprocessing_sobel.html,https://threejs.org/examples/webgl_postprocessing_sobel.html,"webgl, postprocessing, sobel",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, sobel"
239,webgl / postprocessing,postprocessing / ssao,webgl_postprocessing_ssao.html,https://threejs.org/examples/webgl_postprocessing_ssao.html,"webgl, postprocessing, ssao",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, ssao"
240,webgl / postprocessing,postprocessing / ssr,webgl_postprocessing_ssr.html,https://threejs.org/examples/webgl_postprocessing_ssr.html,"webgl, postprocessing, ssr",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, ssr"
241,webgl / postprocessing,postprocessing / taa,webgl_postprocessing_taa.html,https://threejs.org/examples/webgl_postprocessing_taa.html,"webgl, postprocessing, taa",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, taa"
242,webgl / postprocessing,postprocessing / unreal / bloom,webgl_postprocessing_unreal_bloom.html,https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html,"webgl, postprocessing, unreal, bloom",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, unreal, bloom"
243,webgl / postprocessing,postprocessing / unreal / bloom / selective,webgl_postprocessing_unreal_bloom_selective.html,https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html,"webgl, postprocessing, unreal, bloom, selective",medium,visual effects,"Three.js webgl / postprocessing example demonstrating postprocessing, unreal, bloom, selective"
244,webgl / advanced,buffergeometry,webgl_buffergeometry.html,https://threejs.org/examples/webgl_buffergeometry.html,"webgl, buffergeometry",high,procedural generation,Three.js webgl / advanced example demonstrating buffergeometry
245,webgl / advanced,buffergeometry / attributes / integer,webgl_buffergeometry_attributes_integer.html,https://threejs.org/examples/webgl_buffergeometry_attributes_integer.html,"webgl, buffergeometry, attributes, integer",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, attributes, integer"
246,webgl / advanced,buffergeometry / attributes / none,webgl_buffergeometry_attributes_none.html,https://threejs.org/examples/webgl_buffergeometry_attributes_none.html,"webgl, buffergeometry, attributes, none",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, attributes, none"
247,webgl / advanced,buffergeometry / custom / attributes / particles,webgl_buffergeometry_custom_attributes_particles.html,https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html,"webgl, buffergeometry, custom, attributes, particles",high,VR/AR experience; particle effects; procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, custom, attributes, particles"
248,webgl / advanced,buffergeometry / drawrange,webgl_buffergeometry_drawrange.html,https://threejs.org/examples/webgl_buffergeometry_drawrange.html,"webgl, buffergeometry, drawrange",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, drawrange"
249,webgl / advanced,buffergeometry / glbufferattribute,webgl_buffergeometry_glbufferattribute.html,https://threejs.org/examples/webgl_buffergeometry_glbufferattribute.html,"webgl, buffergeometry, glbufferattribute",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, glbufferattribute"
250,webgl / advanced,buffergeometry / indexed,webgl_buffergeometry_indexed.html,https://threejs.org/examples/webgl_buffergeometry_indexed.html,"webgl, buffergeometry, indexed",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, indexed"
251,webgl / advanced,buffergeometry / instancing,webgl_buffergeometry_instancing.html,https://threejs.org/examples/webgl_buffergeometry_instancing.html,"webgl, buffergeometry, instancing",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, instancing"
252,webgl / advanced,buffergeometry / instancing / billboards,webgl_buffergeometry_instancing_billboards.html,https://threejs.org/examples/webgl_buffergeometry_instancing_billboards.html,"webgl, buffergeometry, instancing, billboards",high,VR/AR experience; procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, instancing, billboards"
253,webgl / advanced,buffergeometry / instancing / interleaved,webgl_buffergeometry_instancing_interleaved.html,https://threejs.org/examples/webgl_buffergeometry_instancing_interleaved.html,"webgl, buffergeometry, instancing, interleaved",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, instancing, interleaved"
254,webgl / advanced,buffergeometry / lines,webgl_buffergeometry_lines.html,https://threejs.org/examples/webgl_buffergeometry_lines.html,"webgl, buffergeometry, lines",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, lines"
255,webgl / advanced,buffergeometry / lines / indexed,webgl_buffergeometry_lines_indexed.html,https://threejs.org/examples/webgl_buffergeometry_lines_indexed.html,"webgl, buffergeometry, lines, indexed",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, lines, indexed"
256,webgl / advanced,buffergeometry / points,webgl_buffergeometry_points.html,https://threejs.org/examples/webgl_buffergeometry_points.html,"webgl, buffergeometry, points",high,particle effects; procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, points"
257,webgl / advanced,buffergeometry / points / interleaved,webgl_buffergeometry_points_interleaved.html,https://threejs.org/examples/webgl_buffergeometry_points_interleaved.html,"webgl, buffergeometry, points, interleaved",high,particle effects; procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, points, interleaved"
258,webgl / advanced,buffergeometry / rawshader,webgl_buffergeometry_rawshader.html,https://threejs.org/examples/webgl_buffergeometry_rawshader.html,"webgl, buffergeometry, rawshader",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, rawshader"
259,webgl / advanced,buffergeometry / selective / draw,webgl_buffergeometry_selective_draw.html,https://threejs.org/examples/webgl_buffergeometry_selective_draw.html,"webgl, buffergeometry, selective, draw",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, selective, draw"
260,webgl / advanced,buffergeometry / uint,webgl_buffergeometry_uint.html,https://threejs.org/examples/webgl_buffergeometry_uint.html,"webgl, buffergeometry, uint",high,procedural generation,"Three.js webgl / advanced example demonstrating buffergeometry, uint"
261,webgl / advanced,clipculldistance,webgl_clipculldistance.html,https://threejs.org/examples/webgl_clipculldistance.html,"webgl, clipculldistance",high,3D visualization,Three.js webgl / advanced example demonstrating clipculldistance
262,webgl / advanced,custom / attributes,webgl_custom_attributes.html,https://threejs.org/examples/webgl_custom_attributes.html,"webgl, custom, attributes",high,3D visualization,"Three.js webgl / advanced example demonstrating custom, attributes"
263,webgl / advanced,custom / attributes / lines,webgl_custom_attributes_lines.html,https://threejs.org/examples/webgl_custom_attributes_lines.html,"webgl, custom, attributes, lines",high,3D visualization,"Three.js webgl / advanced example demonstrating custom, attributes, lines"
264,webgl / advanced,custom / attributes / points,webgl_custom_attributes_points.html,https://threejs.org/examples/webgl_custom_attributes_points.html,"webgl, custom, attributes, points",high,particle effects,"Three.js webgl / advanced example demonstrating custom, attributes, points"
265,webgl / advanced,custom / attributes / points2,webgl_custom_attributes_points2.html,https://threejs.org/examples/webgl_custom_attributes_points2.html,"webgl, custom, attributes, points2",high,particle effects,"Three.js webgl / advanced example demonstrating custom, attributes, points2"
266,webgl / advanced,custom / attributes / points3,webgl_custom_attributes_points3.html,https://threejs.org/examples/webgl_custom_attributes_points3.html,"webgl, custom, attributes, points3",high,particle effects,"Three.js webgl / advanced example demonstrating custom, attributes, points3"
267,webgl / advanced,gpgpu / birds,webgl_gpgpu_birds.html,https://threejs.org/examples/webgl_gpgpu_birds.html,"webgl, gpgpu, birds",high,3D visualization,"Three.js webgl / advanced example demonstrating gpgpu, birds"
268,webgl / advanced,gpgpu / birds / gltf,webgl_gpgpu_birds_gltf.html,https://threejs.org/examples/webgl_gpgpu_birds_gltf.html,"webgl, gpgpu, birds, gltf",high,3D visualization,"Three.js webgl / advanced example demonstrating gpgpu, birds, gltf"
269,webgl / advanced,gpgpu / water,webgl_gpgpu_water.html,https://threejs.org/examples/webgl_gpgpu_water.html,"webgl, gpgpu, water",high,3D visualization,"Three.js webgl / advanced example demonstrating gpgpu, water"
270,webgl / advanced,gpgpu / protoplanet,webgl_gpgpu_protoplanet.html,https://threejs.org/examples/webgl_gpgpu_protoplanet.html,"webgl, gpgpu, protoplanet",high,3D visualization,"Three.js webgl / advanced example demonstrating gpgpu, protoplanet"
271,webgl / advanced,materials / modified,webgl_materials_modified.html,https://threejs.org/examples/webgl_materials_modified.html,"webgl, materials, modified",high,material effects,"Three.js webgl / advanced example demonstrating materials, modified"
272,webgl / advanced,multiple / rendertargets,webgl_multiple_rendertargets.html,https://threejs.org/examples/webgl_multiple_rendertargets.html,"webgl, multiple, rendertargets",high,VR/AR experience,"Three.js webgl / advanced example demonstrating multiple, rendertargets"
273,webgl / advanced,multisampled / renderbuffers,webgl_multisampled_renderbuffers.html,https://threejs.org/examples/webgl_multisampled_renderbuffers.html,"webgl, multisampled, renderbuffers",high,3D visualization,"Three.js webgl / advanced example demonstrating multisampled, renderbuffers"
274,webgl / advanced,rendertarget / texture2darray,webgl_rendertarget_texture2darray.html,https://threejs.org/examples/webgl_rendertarget_texture2darray.html,"webgl, rendertarget, texture2darray",high,VR/AR experience,"Three.js webgl / advanced example demonstrating rendertarget, texture2darray"
275,webgl / advanced,reversed / depth / buffer,webgl_reversed_depth_buffer.html,https://threejs.org/examples/webgl_reversed_depth_buffer.html,"webgl, reversed, depth, buffer",high,3D visualization,"Three.js webgl / advanced example demonstrating reversed, depth, buffer"
276,webgl / advanced,shadowmap / csm,webgl_shadowmap_csm.html,https://threejs.org/examples/webgl_shadowmap_csm.html,"webgl, shadowmap, csm",high,realistic lighting,"Three.js webgl / advanced example demonstrating shadowmap, csm"
277,webgl / advanced,shadowmap / pcss,webgl_shadowmap_pcss.html,https://threejs.org/examples/webgl_shadowmap_pcss.html,"webgl, shadowmap, pcss",high,realistic lighting,"Three.js webgl / advanced example demonstrating shadowmap, pcss"
278,webgl / advanced,shadowmap / progressive,webgl_shadowmap_progressive.html,https://threejs.org/examples/webgl_shadowmap_progressive.html,"webgl, shadowmap, progressive",high,realistic lighting,"Three.js webgl / advanced example demonstrating shadowmap, progressive"
279,webgl / advanced,simple / gi,webgl_simple_gi.html,https://threejs.org/examples/webgl_simple_gi.html,"webgl, simple, gi",high,3D visualization,"Three.js webgl / advanced example demonstrating simple, gi"
280,webgl / advanced,texture2darray,webgl_texture2darray.html,https://threejs.org/examples/webgl_texture2darray.html,"webgl, texture2darray",high,VR/AR experience,Three.js webgl / advanced example demonstrating texture2darray
281,webgl / advanced,texture2darray / compressed,webgl_texture2darray_compressed.html,https://threejs.org/examples/webgl_texture2darray_compressed.html,"webgl, texture2darray, compressed",high,VR/AR experience,"Three.js webgl / advanced example demonstrating texture2darray, compressed"
282,webgl / advanced,texture2darray / layerupdate,webgl_texture2darray_layerupdate.html,https://threejs.org/examples/webgl_texture2darray_layerupdate.html,"webgl, texture2darray, layerupdate",high,VR/AR experience,"Three.js webgl / advanced example demonstrating texture2darray, layerupdate"
283,webgl / advanced,texture3d,webgl_texture3d.html,https://threejs.org/examples/webgl_texture3d.html,"webgl, texture3d",high,3D visualization,Three.js webgl / advanced example demonstrating texture3d
284,webgl / advanced,texture3d / partialupdate,webgl_texture3d_partialupdate.html,https://threejs.org/examples/webgl_texture3d_partialupdate.html,"webgl, texture3d, partialupdate",high,VR/AR experience,"Three.js webgl / advanced example demonstrating texture3d, partialupdate"
285,webgl / advanced,ubo,webgl_ubo.html,https://threejs.org/examples/webgl_ubo.html,"webgl, ubo",high,3D visualization,Three.js webgl / advanced example demonstrating ubo
286,webgl / advanced,ubo / arrays,webgl_ubo_arrays.html,https://threejs.org/examples/webgl_ubo_arrays.html,"webgl, ubo, arrays",high,VR/AR experience,"Three.js webgl / advanced example demonstrating ubo, arrays"
287,webgl / advanced,volume / cloud,webgl_volume_cloud.html,https://threejs.org/examples/webgl_volume_cloud.html,"webgl, volume, cloud",high,3D visualization,"Three.js webgl / advanced example demonstrating volume, cloud"
288,webgl / advanced,volume / instancing,webgl_volume_instancing.html,https://threejs.org/examples/webgl_volume_instancing.html,"webgl, volume, instancing",high,3D visualization,"Three.js webgl / advanced example demonstrating volume, instancing"
289,webgl / advanced,volume / perlin,webgl_volume_perlin.html,https://threejs.org/examples/webgl_volume_perlin.html,"webgl, volume, perlin",high,3D visualization,"Three.js webgl / advanced example demonstrating volume, perlin"
290,webgl / advanced,worker / offscreencanvas,webgl_worker_offscreencanvas.html,https://threejs.org/examples/webgl_worker_offscreencanvas.html,"webgl, worker, offscreencanvas",high,3D visualization,"Three.js webgl / advanced example demonstrating worker, offscreencanvas"
291,webgl / advanced,performance,webgl_performance.html,https://threejs.org/examples/webgl_performance.html,"webgl, performance",high,3D visualization,Three.js webgl / advanced example demonstrating performance
292,webgpu (wip),animation / retargeting,webgpu_animation_retargeting.html,https://threejs.org/examples/webgpu_animation_retargeting.html,"webgpu, animation, retargeting",medium,character animation; VR/AR experience,"Three.js webgpu (wip) example demonstrating animation, retargeting"
293,webgpu (wip),animation / retargeting / readyplayer,webgpu_animation_retargeting_readyplayer.html,https://threejs.org/examples/webgpu_animation_retargeting_readyplayer.html,"webgpu, animation, retargeting, readyplayer",medium,character animation; VR/AR experience,"Three.js webgpu (wip) example demonstrating animation, retargeting, readyplayer"
294,webgpu (wip),backdrop,webgpu_backdrop.html,https://threejs.org/examples/webgpu_backdrop.html,"webgpu, backdrop",medium,3D visualization,Three.js webgpu (wip) example demonstrating backdrop
295,webgpu (wip),backdrop / area,webgpu_backdrop_area.html,https://threejs.org/examples/webgpu_backdrop_area.html,"webgpu, backdrop, area",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating backdrop, area"
296,webgpu (wip),backdrop / water,webgpu_backdrop_water.html,https://threejs.org/examples/webgpu_backdrop_water.html,"webgpu, backdrop, water",medium,3D visualization,"Three.js webgpu (wip) example demonstrating backdrop, water"
297,webgpu (wip),camera,webgpu_camera.html,https://threejs.org/examples/webgpu_camera.html,"webgpu, camera",medium,3D visualization,Three.js webgpu (wip) example demonstrating camera
298,webgpu (wip),camera / array,webgpu_camera_array.html,https://threejs.org/examples/webgpu_camera_array.html,"webgpu, camera, array",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating camera, array"
299,webgpu (wip),camera / logarithmicdepthbuffer,webgpu_camera_logarithmicdepthbuffer.html,https://threejs.org/examples/webgpu_camera_logarithmicdepthbuffer.html,"webgpu, camera, logarithmicdepthbuffer",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating camera, logarithmicdepthbuffer"
300,webgpu (wip),caustics,webgpu_caustics.html,https://threejs.org/examples/webgpu_caustics.html,"webgpu, caustics",medium,3D visualization,Three.js webgpu (wip) example demonstrating caustics
301,webgpu (wip),centroid / sampling,webgpu_centroid_sampling.html,https://threejs.org/examples/webgpu_centroid_sampling.html,"webgpu, centroid, sampling",medium,3D visualization,"Three.js webgpu (wip) example demonstrating centroid, sampling"
302,webgpu (wip),clearcoat,webgpu_clearcoat.html,https://threejs.org/examples/webgpu_clearcoat.html,"webgpu, clearcoat",medium,VR/AR experience,Three.js webgpu (wip) example demonstrating clearcoat
303,webgpu (wip),clipping,webgpu_clipping.html,https://threejs.org/examples/webgpu_clipping.html,"webgpu, clipping",medium,3D visualization,Three.js webgpu (wip) example demonstrating clipping
304,webgpu (wip),compute / audio,webgpu_compute_audio.html,https://threejs.org/examples/webgpu_compute_audio.html,"webgpu, compute, audio",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, audio"
305,webgpu (wip),compute / birds,webgpu_compute_birds.html,https://threejs.org/examples/webgpu_compute_birds.html,"webgpu, compute, birds",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, birds"
306,webgpu (wip),compute / cloth,webgpu_compute_cloth.html,https://threejs.org/examples/webgpu_compute_cloth.html,"webgpu, compute, cloth",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, cloth"
307,webgpu (wip),compute / geometry,webgpu_compute_geometry.html,https://threejs.org/examples/webgpu_compute_geometry.html,"webgpu, compute, geometry",high,procedural generation; GPU compute,"Three.js webgpu (wip) example demonstrating compute, geometry"
308,webgpu (wip),compute / particles,webgpu_compute_particles.html,https://threejs.org/examples/webgpu_compute_particles.html,"webgpu, compute, particles",high,VR/AR experience; particle effects; GPU compute,"Three.js webgpu (wip) example demonstrating compute, particles"
309,webgpu (wip),compute / particles / fluid,webgpu_compute_particles_fluid.html,https://threejs.org/examples/webgpu_compute_particles_fluid.html,"webgpu, compute, particles, fluid",high,VR/AR experience; particle effects; GPU compute,"Three.js webgpu (wip) example demonstrating compute, particles, fluid"
310,webgpu (wip),compute / particles / rain,webgpu_compute_particles_rain.html,https://threejs.org/examples/webgpu_compute_particles_rain.html,"webgpu, compute, particles, rain",high,VR/AR experience; particle effects; GPU compute,"Three.js webgpu (wip) example demonstrating compute, particles, rain"
311,webgpu (wip),compute / particles / snow,webgpu_compute_particles_snow.html,https://threejs.org/examples/webgpu_compute_particles_snow.html,"webgpu, compute, particles, snow",high,VR/AR experience; particle effects; GPU compute,"Three.js webgpu (wip) example demonstrating compute, particles, snow"
312,webgpu (wip),compute / points,webgpu_compute_points.html,https://threejs.org/examples/webgpu_compute_points.html,"webgpu, compute, points",high,particle effects; GPU compute,"Three.js webgpu (wip) example demonstrating compute, points"
313,webgpu (wip),compute / reduce,webgpu_compute_reduce.html,https://threejs.org/examples/webgpu_compute_reduce.html,"webgpu, compute, reduce",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, reduce"
314,webgpu (wip),compute / sort / bitonic,webgpu_compute_sort_bitonic.html,https://threejs.org/examples/webgpu_compute_sort_bitonic.html,"webgpu, compute, sort, bitonic",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, sort, bitonic"
315,webgpu (wip),compute / texture,webgpu_compute_texture.html,https://threejs.org/examples/webgpu_compute_texture.html,"webgpu, compute, texture",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, texture"
316,webgpu (wip),compute / texture / 3d,webgpu_compute_texture_3d.html,https://threejs.org/examples/webgpu_compute_texture_3d.html,"webgpu, compute, texture, 3d",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, texture, 3d"
317,webgpu (wip),compute / texture / pingpong,webgpu_compute_texture_pingpong.html,https://threejs.org/examples/webgpu_compute_texture_pingpong.html,"webgpu, compute, texture, pingpong",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, texture, pingpong"
318,webgpu (wip),compute / water,webgpu_compute_water.html,https://threejs.org/examples/webgpu_compute_water.html,"webgpu, compute, water",high,GPU compute,"Three.js webgpu (wip) example demonstrating compute, water"
319,webgpu (wip),cubemap / adjustments,webgpu_cubemap_adjustments.html,https://threejs.org/examples/webgpu_cubemap_adjustments.html,"webgpu, cubemap, adjustments",medium,3D visualization,"Three.js webgpu (wip) example demonstrating cubemap, adjustments"
320,webgpu (wip),cubemap / dynamic,webgpu_cubemap_dynamic.html,https://threejs.org/examples/webgpu_cubemap_dynamic.html,"webgpu, cubemap, dynamic",medium,3D visualization,"Three.js webgpu (wip) example demonstrating cubemap, dynamic"
321,webgpu (wip),cubemap / mix,webgpu_cubemap_mix.html,https://threejs.org/examples/webgpu_cubemap_mix.html,"webgpu, cubemap, mix",medium,3D visualization,"Three.js webgpu (wip) example demonstrating cubemap, mix"
322,webgpu (wip),custom / fog,webgpu_custom_fog.html,https://threejs.org/examples/webgpu_custom_fog.html,"webgpu, custom, fog",medium,3D visualization,"Three.js webgpu (wip) example demonstrating custom, fog"
323,webgpu (wip),custom / fog / background,webgpu_custom_fog_background.html,https://threejs.org/examples/webgpu_custom_fog_background.html,"webgpu, custom, fog, background",medium,3D visualization,"Three.js webgpu (wip) example demonstrating custom, fog, background"
324,webgpu (wip),depth / texture,webgpu_depth_texture.html,https://threejs.org/examples/webgpu_depth_texture.html,"webgpu, depth, texture",medium,3D visualization,"Three.js webgpu (wip) example demonstrating depth, texture"
325,webgpu (wip),display / stereo,webgpu_display_stereo.html,https://threejs.org/examples/webgpu_display_stereo.html,"webgpu, display, stereo",medium,3D visualization,"Three.js webgpu (wip) example demonstrating display, stereo"
326,webgpu (wip),equirectangular,webgpu_equirectangular.html,https://threejs.org/examples/webgpu_equirectangular.html,"webgpu, equirectangular",medium,VR/AR experience,Three.js webgpu (wip) example demonstrating equirectangular
327,webgpu (wip),hdr,webgpu_hdr.html,https://threejs.org/examples/webgpu_hdr.html,"webgpu, hdr",medium,3D visualization,Three.js webgpu (wip) example demonstrating hdr
328,webgpu (wip),instance / mesh,webgpu_instance_mesh.html,https://threejs.org/examples/webgpu_instance_mesh.html,"webgpu, instance, mesh",medium,3D visualization,"Three.js webgpu (wip) example demonstrating instance, mesh"
329,webgpu (wip),instance / path,webgpu_instance_path.html,https://threejs.org/examples/webgpu_instance_path.html,"webgpu, instance, path",medium,3D visualization,"Three.js webgpu (wip) example demonstrating instance, path"
330,webgpu (wip),instance / points,webgpu_instance_points.html,https://threejs.org/examples/webgpu_instance_points.html,"webgpu, instance, points",medium,particle effects,"Three.js webgpu (wip) example demonstrating instance, points"
331,webgpu (wip),instance / sprites,webgpu_instance_sprites.html,https://threejs.org/examples/webgpu_instance_sprites.html,"webgpu, instance, sprites",medium,3D visualization,"Three.js webgpu (wip) example demonstrating instance, sprites"
332,webgpu (wip),instance / uniform,webgpu_instance_uniform.html,https://threejs.org/examples/webgpu_instance_uniform.html,"webgpu, instance, uniform",medium,3D visualization,"Three.js webgpu (wip) example demonstrating instance, uniform"
333,webgpu (wip),instancing / morph,webgpu_instancing_morph.html,https://threejs.org/examples/webgpu_instancing_morph.html,"webgpu, instancing, morph",medium,3D visualization,"Three.js webgpu (wip) example demonstrating instancing, morph"
334,webgpu (wip),layers,webgpu_layers.html,https://threejs.org/examples/webgpu_layers.html,"webgpu, layers",medium,3D visualization,Three.js webgpu (wip) example demonstrating layers
335,webgpu (wip),lensflares,webgpu_lensflares.html,https://threejs.org/examples/webgpu_lensflares.html,"webgpu, lensflares",medium,VR/AR experience,Three.js webgpu (wip) example demonstrating lensflares
336,webgpu (wip),lightprobe,webgpu_lightprobe.html,https://threejs.org/examples/webgpu_lightprobe.html,"webgpu, lightprobe",medium,3D visualization,Three.js webgpu (wip) example demonstrating lightprobe
337,webgpu (wip),lightprobe / cubecamera,webgpu_lightprobe_cubecamera.html,https://threejs.org/examples/webgpu_lightprobe_cubecamera.html,"webgpu, lightprobe, cubecamera",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lightprobe, cubecamera"
338,webgpu (wip),lights / custom,webgpu_lights_custom.html,https://threejs.org/examples/webgpu_lights_custom.html,"webgpu, lights, custom",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, custom"
339,webgpu (wip),lights / ies / spotlight,webgpu_lights_ies_spotlight.html,https://threejs.org/examples/webgpu_lights_ies_spotlight.html,"webgpu, lights, ies, spotlight",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, ies, spotlight"
340,webgpu (wip),lights / phong,webgpu_lights_phong.html,https://threejs.org/examples/webgpu_lights_phong.html,"webgpu, lights, phong",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, phong"
341,webgpu (wip),lights / physical,webgpu_lights_physical.html,https://threejs.org/examples/webgpu_lights_physical.html,"webgpu, lights, physical",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, physical"
342,webgpu (wip),lights / pointlights,webgpu_lights_pointlights.html,https://threejs.org/examples/webgpu_lights_pointlights.html,"webgpu, lights, pointlights",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, pointlights"
343,webgpu (wip),lights / projector,webgpu_lights_projector.html,https://threejs.org/examples/webgpu_lights_projector.html,"webgpu, lights, projector",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, projector"
344,webgpu (wip),lights / rectarealight,webgpu_lights_rectarealight.html,https://threejs.org/examples/webgpu_lights_rectarealight.html,"webgpu, lights, rectarealight",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating lights, rectarealight"
345,webgpu (wip),lights / selective,webgpu_lights_selective.html,https://threejs.org/examples/webgpu_lights_selective.html,"webgpu, lights, selective",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, selective"
346,webgpu (wip),lights / spotlight,webgpu_lights_spotlight.html,https://threejs.org/examples/webgpu_lights_spotlight.html,"webgpu, lights, spotlight",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, spotlight"
347,webgpu (wip),lights / tiled,webgpu_lights_tiled.html,https://threejs.org/examples/webgpu_lights_tiled.html,"webgpu, lights, tiled",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lights, tiled"
348,webgpu (wip),lines / fat,webgpu_lines_fat.html,https://threejs.org/examples/webgpu_lines_fat.html,"webgpu, lines, fat",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lines, fat"
349,webgpu (wip),lines / fat / raycasting,webgpu_lines_fat_raycasting.html,https://threejs.org/examples/webgpu_lines_fat_raycasting.html,"webgpu, lines, fat, raycasting",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lines, fat, raycasting"
350,webgpu (wip),lines / fat / wireframe,webgpu_lines_fat_wireframe.html,https://threejs.org/examples/webgpu_lines_fat_wireframe.html,"webgpu, lines, fat, wireframe",medium,3D visualization,"Three.js webgpu (wip) example demonstrating lines, fat, wireframe"
351,webgpu (wip),loader / gltf,webgpu_loader_gltf.html,https://threejs.org/examples/webgpu_loader_gltf.html,"webgpu, loader, gltf",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf"
352,webgpu (wip),loader / gltf / anisotropy,webgpu_loader_gltf_anisotropy.html,https://threejs.org/examples/webgpu_loader_gltf_anisotropy.html,"webgpu, loader, gltf, anisotropy",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, anisotropy"
353,webgpu (wip),loader / gltf / compressed,webgpu_loader_gltf_compressed.html,https://threejs.org/examples/webgpu_loader_gltf_compressed.html,"webgpu, loader, gltf, compressed",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, compressed"
354,webgpu (wip),loader / gltf / dispersion,webgpu_loader_gltf_dispersion.html,https://threejs.org/examples/webgpu_loader_gltf_dispersion.html,"webgpu, loader, gltf, dispersion",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, dispersion"
355,webgpu (wip),loader / gltf / iridescence,webgpu_loader_gltf_iridescence.html,https://threejs.org/examples/webgpu_loader_gltf_iridescence.html,"webgpu, loader, gltf, iridescence",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, iridescence"
356,webgpu (wip),loader / gltf / sheen,webgpu_loader_gltf_sheen.html,https://threejs.org/examples/webgpu_loader_gltf_sheen.html,"webgpu, loader, gltf, sheen",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, sheen"
357,webgpu (wip),loader / gltf / transmission,webgpu_loader_gltf_transmission.html,https://threejs.org/examples/webgpu_loader_gltf_transmission.html,"webgpu, loader, gltf, transmission",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, gltf, transmission"
358,webgpu (wip),loader / materialx,webgpu_loader_materialx.html,https://threejs.org/examples/webgpu_loader_materialx.html,"webgpu, loader, materialx",medium,model loading; material effects,"Three.js webgpu (wip) example demonstrating loader, materialx"
359,webgpu (wip),loader / texture / ktx2,webgpu_loader_texture_ktx2.html,https://threejs.org/examples/webgpu_loader_texture_ktx2.html,"webgpu, loader, texture, ktx2",medium,model loading,"Three.js webgpu (wip) example demonstrating loader, texture, ktx2"
360,webgpu (wip),materials,webgpu_materials.html,https://threejs.org/examples/webgpu_materials.html,"webgpu, materials",medium,material effects,Three.js webgpu (wip) example demonstrating materials
361,webgpu (wip),materials / alphahash,webgpu_materials_alphahash.html,https://threejs.org/examples/webgpu_materials_alphahash.html,"webgpu, materials, alphahash",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, alphahash"
362,webgpu (wip),materials / arrays,webgpu_materials_arrays.html,https://threejs.org/examples/webgpu_materials_arrays.html,"webgpu, materials, arrays",medium,material effects; VR/AR experience,"Three.js webgpu (wip) example demonstrating materials, arrays"
363,webgpu (wip),materials / basic,webgpu_materials_basic.html,https://threejs.org/examples/webgpu_materials_basic.html,"webgpu, materials, basic",low,material effects,"Three.js webgpu (wip) example demonstrating materials, basic"
364,webgpu (wip),materials / cubemap / mipmaps,webgpu_materials_cubemap_mipmaps.html,https://threejs.org/examples/webgpu_materials_cubemap_mipmaps.html,"webgpu, materials, cubemap, mipmaps",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, cubemap, mipmaps"
365,webgpu (wip),materials / displacementmap,webgpu_materials_displacementmap.html,https://threejs.org/examples/webgpu_materials_displacementmap.html,"webgpu, materials, displacementmap",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, displacementmap"
366,webgpu (wip),materials / envmaps / bpcem,webgpu_materials_envmaps_bpcem.html,https://threejs.org/examples/webgpu_materials_envmaps_bpcem.html,"webgpu, materials, envmaps, bpcem",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, envmaps, bpcem"
367,webgpu (wip),materials / envmaps,webgpu_materials_envmaps.html,https://threejs.org/examples/webgpu_materials_envmaps.html,"webgpu, materials, envmaps",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, envmaps"
368,webgpu (wip),materials / lightmap,webgpu_materials_lightmap.html,https://threejs.org/examples/webgpu_materials_lightmap.html,"webgpu, materials, lightmap",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, lightmap"
369,webgpu (wip),materials / matcap,webgpu_materials_matcap.html,https://threejs.org/examples/webgpu_materials_matcap.html,"webgpu, materials, matcap",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, matcap"
370,webgpu (wip),materials / sss,webgpu_materials_sss.html,https://threejs.org/examples/webgpu_materials_sss.html,"webgpu, materials, sss",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, sss"
371,webgpu (wip),materials / texture / manualmipmap,webgpu_materials_texture_manualmipmap.html,https://threejs.org/examples/webgpu_materials_texture_manualmipmap.html,"webgpu, materials, texture, manualmipmap",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, texture, manualmipmap"
372,webgpu (wip),materials / transmission,webgpu_materials_transmission.html,https://threejs.org/examples/webgpu_materials_transmission.html,"webgpu, materials, transmission",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, transmission"
373,webgpu (wip),materials / toon,webgpu_materials_toon.html,https://threejs.org/examples/webgpu_materials_toon.html,"webgpu, materials, toon",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, toon"
374,webgpu (wip),materials / video,webgpu_materials_video.html,https://threejs.org/examples/webgpu_materials_video.html,"webgpu, materials, video",medium,material effects,"Three.js webgpu (wip) example demonstrating materials, video"
375,webgpu (wip),materialx / noise,webgpu_materialx_noise.html,https://threejs.org/examples/webgpu_materialx_noise.html,"webgpu, materialx, noise",medium,material effects,"Three.js webgpu (wip) example demonstrating materialx, noise"
376,webgpu (wip),mesh / batch,webgpu_mesh_batch.html,https://threejs.org/examples/webgpu_mesh_batch.html,"webgpu, mesh, batch",medium,3D visualization,"Three.js webgpu (wip) example demonstrating mesh, batch"
377,webgpu (wip),mirror,webgpu_mirror.html,https://threejs.org/examples/webgpu_mirror.html,"webgpu, mirror",medium,3D visualization,Three.js webgpu (wip) example demonstrating mirror
378,webgpu (wip),modifier / curve,webgpu_modifier_curve.html,https://threejs.org/examples/webgpu_modifier_curve.html,"webgpu, modifier, curve",medium,3D visualization,"Three.js webgpu (wip) example demonstrating modifier, curve"
379,webgpu (wip),morphtargets,webgpu_morphtargets.html,https://threejs.org/examples/webgpu_morphtargets.html,"webgpu, morphtargets",medium,VR/AR experience,Three.js webgpu (wip) example demonstrating morphtargets
380,webgpu (wip),morphtargets / face,webgpu_morphtargets_face.html,https://threejs.org/examples/webgpu_morphtargets_face.html,"webgpu, morphtargets, face",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating morphtargets, face"
381,webgpu (wip),mrt,webgpu_mrt.html,https://threejs.org/examples/webgpu_mrt.html,"webgpu, mrt",medium,3D visualization,Three.js webgpu (wip) example demonstrating mrt
382,webgpu (wip),mrt / mask,webgpu_mrt_mask.html,https://threejs.org/examples/webgpu_mrt_mask.html,"webgpu, mrt, mask",medium,3D visualization,"Three.js webgpu (wip) example demonstrating mrt, mask"
383,webgpu (wip),multiple / canvas,webgpu_multiple_canvas.html,https://threejs.org/examples/webgpu_multiple_canvas.html,"webgpu, multiple, canvas",medium,3D visualization,"Three.js webgpu (wip) example demonstrating multiple, canvas"
384,webgpu (wip),multiple / elements,webgpu_multiple_elements.html,https://threejs.org/examples/webgpu_multiple_elements.html,"webgpu, multiple, elements",medium,3D visualization,"Three.js webgpu (wip) example demonstrating multiple, elements"
385,webgpu (wip),multiple / rendertargets,webgpu_multiple_rendertargets.html,https://threejs.org/examples/webgpu_multiple_rendertargets.html,"webgpu, multiple, rendertargets",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating multiple, rendertargets"
386,webgpu (wip),multiple / rendertargets / readback,webgpu_multiple_rendertargets_readback.html,https://threejs.org/examples/webgpu_multiple_rendertargets_readback.html,"webgpu, multiple, rendertargets, readback",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating multiple, rendertargets, readback"
387,webgpu (wip),multisampled / renderbuffers,webgpu_multisampled_renderbuffers.html,https://threejs.org/examples/webgpu_multisampled_renderbuffers.html,"webgpu, multisampled, renderbuffers",medium,3D visualization,"Three.js webgpu (wip) example demonstrating multisampled, renderbuffers"
388,webgpu (wip),occlusion,webgpu_occlusion.html,https://threejs.org/examples/webgpu_occlusion.html,"webgpu, occlusion",medium,3D visualization,Three.js webgpu (wip) example demonstrating occlusion
389,webgpu (wip),ocean,webgpu_ocean.html,https://threejs.org/examples/webgpu_ocean.html,"webgpu, ocean",medium,3D visualization,Three.js webgpu (wip) example demonstrating ocean
390,webgpu (wip),parallax / uv,webgpu_parallax_uv.html,https://threejs.org/examples/webgpu_parallax_uv.html,"webgpu, parallax, uv",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating parallax, uv"
391,webgpu (wip),particles,webgpu_particles.html,https://threejs.org/examples/webgpu_particles.html,"webgpu, particles",medium,VR/AR experience; particle effects,Three.js webgpu (wip) example demonstrating particles
392,webgpu (wip),performance,webgpu_performance.html,https://threejs.org/examples/webgpu_performance.html,"webgpu, performance",medium,3D visualization,Three.js webgpu (wip) example demonstrating performance
393,webgpu (wip),performance / renderbundle,webgpu_performance_renderbundle.html,https://threejs.org/examples/webgpu_performance_renderbundle.html,"webgpu, performance, renderbundle",medium,3D visualization,"Three.js webgpu (wip) example demonstrating performance, renderbundle"
394,webgpu (wip),pmrem / cubemap,webgpu_pmrem_cubemap.html,https://threejs.org/examples/webgpu_pmrem_cubemap.html,"webgpu, pmrem, cubemap",medium,3D visualization,"Three.js webgpu (wip) example demonstrating pmrem, cubemap"
395,webgpu (wip),pmrem / equirectangular,webgpu_pmrem_equirectangular.html,https://threejs.org/examples/webgpu_pmrem_equirectangular.html,"webgpu, pmrem, equirectangular",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating pmrem, equirectangular"
396,webgpu (wip),pmrem / scene,webgpu_pmrem_scene.html,https://threejs.org/examples/webgpu_pmrem_scene.html,"webgpu, pmrem, scene",medium,3D visualization,"Three.js webgpu (wip) example demonstrating pmrem, scene"
397,webgpu (wip),portal,webgpu_portal.html,https://threejs.org/examples/webgpu_portal.html,"webgpu, portal",medium,3D visualization,Three.js webgpu (wip) example demonstrating portal
398,webgpu (wip),postprocessing,webgpu_postprocessing.html,https://threejs.org/examples/webgpu_postprocessing.html,"webgpu, postprocessing",medium,visual effects,Three.js webgpu (wip) example demonstrating postprocessing
399,webgpu (wip),postprocessing / 3dlut,webgpu_postprocessing_3dlut.html,https://threejs.org/examples/webgpu_postprocessing_3dlut.html,"webgpu, postprocessing, 3dlut",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, 3dlut"
400,webgpu (wip),postprocessing / afterimage,webgpu_postprocessing_afterimage.html,https://threejs.org/examples/webgpu_postprocessing_afterimage.html,"webgpu, postprocessing, afterimage",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, afterimage"
401,webgpu (wip),postprocessing / anamorphic,webgpu_postprocessing_anamorphic.html,https://threejs.org/examples/webgpu_postprocessing_anamorphic.html,"webgpu, postprocessing, anamorphic",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, anamorphic"
402,webgpu (wip),postprocessing / ao,webgpu_postprocessing_ao.html,https://threejs.org/examples/webgpu_postprocessing_ao.html,"webgpu, postprocessing, ao",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, ao"
403,webgpu (wip),postprocessing / bloom,webgpu_postprocessing_bloom.html,https://threejs.org/examples/webgpu_postprocessing_bloom.html,"webgpu, postprocessing, bloom",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, bloom"
404,webgpu (wip),postprocessing / bloom / emissive,webgpu_postprocessing_bloom_emissive.html,https://threejs.org/examples/webgpu_postprocessing_bloom_emissive.html,"webgpu, postprocessing, bloom, emissive",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, bloom, emissive"
405,webgpu (wip),postprocessing / bloom / selective,webgpu_postprocessing_bloom_selective.html,https://threejs.org/examples/webgpu_postprocessing_bloom_selective.html,"webgpu, postprocessing, bloom, selective",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, bloom, selective"
406,webgpu (wip),postprocessing / difference,webgpu_postprocessing_difference.html,https://threejs.org/examples/webgpu_postprocessing_difference.html,"webgpu, postprocessing, difference",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, difference"
407,webgpu (wip),postprocessing / dof,webgpu_postprocessing_dof.html,https://threejs.org/examples/webgpu_postprocessing_dof.html,"webgpu, postprocessing, dof",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, dof"
408,webgpu (wip),postprocessing / dof / basic,webgpu_postprocessing_dof_basic.html,https://threejs.org/examples/webgpu_postprocessing_dof_basic.html,"webgpu, postprocessing, dof, basic",low,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, dof, basic"
409,webgpu (wip),postprocessing / fxaa,webgpu_postprocessing_fxaa.html,https://threejs.org/examples/webgpu_postprocessing_fxaa.html,"webgpu, postprocessing, fxaa",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, fxaa"
410,webgpu (wip),postprocessing / lensflare,webgpu_postprocessing_lensflare.html,https://threejs.org/examples/webgpu_postprocessing_lensflare.html,"webgpu, postprocessing, lensflare",medium,visual effects; VR/AR experience,"Three.js webgpu (wip) example demonstrating postprocessing, lensflare"
411,webgpu (wip),postprocessing / masking,webgpu_postprocessing_masking.html,https://threejs.org/examples/webgpu_postprocessing_masking.html,"webgpu, postprocessing, masking",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, masking"
412,webgpu (wip),postprocessing / ca,webgpu_postprocessing_ca.html,https://threejs.org/examples/webgpu_postprocessing_ca.html,"webgpu, postprocessing, ca",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, ca"
413,webgpu (wip),postprocessing / motion / blur,webgpu_postprocessing_motion_blur.html,https://threejs.org/examples/webgpu_postprocessing_motion_blur.html,"webgpu, postprocessing, motion, blur",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, motion, blur"
414,webgpu (wip),postprocessing / outline,webgpu_postprocessing_outline.html,https://threejs.org/examples/webgpu_postprocessing_outline.html,"webgpu, postprocessing, outline",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, outline"
415,webgpu (wip),postprocessing / pixel,webgpu_postprocessing_pixel.html,https://threejs.org/examples/webgpu_postprocessing_pixel.html,"webgpu, postprocessing, pixel",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, pixel"
416,webgpu (wip),postprocessing / radial / blur,webgpu_postprocessing_radial_blur.html,https://threejs.org/examples/webgpu_postprocessing_radial_blur.html,"webgpu, postprocessing, radial, blur",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, radial, blur"
417,webgpu (wip),postprocessing / smaa,webgpu_postprocessing_smaa.html,https://threejs.org/examples/webgpu_postprocessing_smaa.html,"webgpu, postprocessing, smaa",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, smaa"
418,webgpu (wip),postprocessing / sobel,webgpu_postprocessing_sobel.html,https://threejs.org/examples/webgpu_postprocessing_sobel.html,"webgpu, postprocessing, sobel",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, sobel"
419,webgpu (wip),postprocessing / ssaa,webgpu_postprocessing_ssaa.html,https://threejs.org/examples/webgpu_postprocessing_ssaa.html,"webgpu, postprocessing, ssaa",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, ssaa"
420,webgpu (wip),postprocessing / ssgi,webgpu_postprocessing_ssgi.html,https://threejs.org/examples/webgpu_postprocessing_ssgi.html,"webgpu, postprocessing, ssgi",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, ssgi"
421,webgpu (wip),postprocessing / ssr,webgpu_postprocessing_ssr.html,https://threejs.org/examples/webgpu_postprocessing_ssr.html,"webgpu, postprocessing, ssr",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, ssr"
422,webgpu (wip),postprocessing / sss,webgpu_postprocessing_sss.html,https://threejs.org/examples/webgpu_postprocessing_sss.html,"webgpu, postprocessing, sss",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, sss"
423,webgpu (wip),postprocessing / traa,webgpu_postprocessing_traa.html,https://threejs.org/examples/webgpu_postprocessing_traa.html,"webgpu, postprocessing, traa",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, traa"
424,webgpu (wip),postprocessing / transition,webgpu_postprocessing_transition.html,https://threejs.org/examples/webgpu_postprocessing_transition.html,"webgpu, postprocessing, transition",medium,visual effects,"Three.js webgpu (wip) example demonstrating postprocessing, transition"
425,webgpu (wip),procedural / texture,webgpu_procedural_texture.html,https://threejs.org/examples/webgpu_procedural_texture.html,"webgpu, procedural, texture",medium,3D visualization,"Three.js webgpu (wip) example demonstrating procedural, texture"
426,webgpu (wip),reflection,webgpu_reflection.html,https://threejs.org/examples/webgpu_reflection.html,"webgpu, reflection",medium,3D visualization,Three.js webgpu (wip) example demonstrating reflection
427,webgpu (wip),reflection / blurred,webgpu_reflection_blurred.html,https://threejs.org/examples/webgpu_reflection_blurred.html,"webgpu, reflection, blurred",medium,3D visualization,"Three.js webgpu (wip) example demonstrating reflection, blurred"
428,webgpu (wip),reflection / roughness,webgpu_reflection_roughness.html,https://threejs.org/examples/webgpu_reflection_roughness.html,"webgpu, reflection, roughness",medium,3D visualization,"Three.js webgpu (wip) example demonstrating reflection, roughness"
429,webgpu (wip),refraction,webgpu_refraction.html,https://threejs.org/examples/webgpu_refraction.html,"webgpu, refraction",medium,3D visualization,Three.js webgpu (wip) example demonstrating refraction
430,webgpu (wip),rendertarget / 2d-array / 3d,webgpu_rendertarget_2d-array_3d.html,https://threejs.org/examples/webgpu_rendertarget_2d-array_3d.html,"webgpu, rendertarget, 2d-array, 3d",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating rendertarget, 2d-array, 3d"
431,webgpu (wip),rtt,webgpu_rtt.html,https://threejs.org/examples/webgpu_rtt.html,"webgpu, rtt",medium,3D visualization,Three.js webgpu (wip) example demonstrating rtt
432,webgpu (wip),sandbox,webgpu_sandbox.html,https://threejs.org/examples/webgpu_sandbox.html,"webgpu, sandbox",medium,3D visualization,Three.js webgpu (wip) example demonstrating sandbox
433,webgpu (wip),shadertoy,webgpu_shadertoy.html,https://threejs.org/examples/webgpu_shadertoy.html,"webgpu, shadertoy",medium,3D visualization,Three.js webgpu (wip) example demonstrating shadertoy
434,webgpu (wip),shadow / contact,webgpu_shadow_contact.html,https://threejs.org/examples/webgpu_shadow_contact.html,"webgpu, shadow, contact",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadow, contact"
435,webgpu (wip),shadowmap,webgpu_shadowmap.html,https://threejs.org/examples/webgpu_shadowmap.html,"webgpu, shadowmap",medium,realistic lighting,Three.js webgpu (wip) example demonstrating shadowmap
436,webgpu (wip),shadowmap / array,webgpu_shadowmap_array.html,https://threejs.org/examples/webgpu_shadowmap_array.html,"webgpu, shadowmap, array",medium,realistic lighting; VR/AR experience,"Three.js webgpu (wip) example demonstrating shadowmap, array"
437,webgpu (wip),shadowmap / csm,webgpu_shadowmap_csm.html,https://threejs.org/examples/webgpu_shadowmap_csm.html,"webgpu, shadowmap, csm",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadowmap, csm"
438,webgpu (wip),shadowmap / opacity,webgpu_shadowmap_opacity.html,https://threejs.org/examples/webgpu_shadowmap_opacity.html,"webgpu, shadowmap, opacity",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadowmap, opacity"
439,webgpu (wip),shadowmap / pointlight,webgpu_shadowmap_pointlight.html,https://threejs.org/examples/webgpu_shadowmap_pointlight.html,"webgpu, shadowmap, pointlight",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadowmap, pointlight"
440,webgpu (wip),shadowmap / progressive,webgpu_shadowmap_progressive.html,https://threejs.org/examples/webgpu_shadowmap_progressive.html,"webgpu, shadowmap, progressive",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadowmap, progressive"
441,webgpu (wip),shadowmap / vsm,webgpu_shadowmap_vsm.html,https://threejs.org/examples/webgpu_shadowmap_vsm.html,"webgpu, shadowmap, vsm",medium,realistic lighting,"Three.js webgpu (wip) example demonstrating shadowmap, vsm"
442,webgpu (wip),skinning,webgpu_skinning.html,https://threejs.org/examples/webgpu_skinning.html,"webgpu, skinning",medium,3D visualization,Three.js webgpu (wip) example demonstrating skinning
443,webgpu (wip),skinning / instancing,webgpu_skinning_instancing.html,https://threejs.org/examples/webgpu_skinning_instancing.html,"webgpu, skinning, instancing",medium,3D visualization,"Three.js webgpu (wip) example demonstrating skinning, instancing"
444,webgpu (wip),skinning / points,webgpu_skinning_points.html,https://threejs.org/examples/webgpu_skinning_points.html,"webgpu, skinning, points",medium,particle effects,"Three.js webgpu (wip) example demonstrating skinning, points"
445,webgpu (wip),sky,webgpu_sky.html,https://threejs.org/examples/webgpu_sky.html,"webgpu, sky",medium,3D visualization,Three.js webgpu (wip) example demonstrating sky
446,webgpu (wip),sprites,webgpu_sprites.html,https://threejs.org/examples/webgpu_sprites.html,"webgpu, sprites",medium,3D visualization,Three.js webgpu (wip) example demonstrating sprites
447,webgpu (wip),storage / buffer,webgpu_storage_buffer.html,https://threejs.org/examples/webgpu_storage_buffer.html,"webgpu, storage, buffer",medium,3D visualization,"Three.js webgpu (wip) example demonstrating storage, buffer"
448,webgpu (wip),struct / drawindirect,webgpu_struct_drawindirect.html,https://threejs.org/examples/webgpu_struct_drawindirect.html,"webgpu, struct, drawindirect",medium,3D visualization,"Three.js webgpu (wip) example demonstrating struct, drawindirect"
449,webgpu (wip),test / memory,webgpu_test_memory.html,https://threejs.org/examples/webgpu_test_memory.html,"webgpu, test, memory",medium,3D visualization,"Three.js webgpu (wip) example demonstrating test, memory"
450,webgpu (wip),texturegrad,webgpu_texturegrad.html,https://threejs.org/examples/webgpu_texturegrad.html,"webgpu, texturegrad",medium,3D visualization,Three.js webgpu (wip) example demonstrating texturegrad
451,webgpu (wip),textures / 2d-array,webgpu_textures_2d-array.html,https://threejs.org/examples/webgpu_textures_2d-array.html,"webgpu, textures, 2d-array",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating textures, 2d-array"
452,webgpu (wip),textures / 2d-array / compressed,webgpu_textures_2d-array_compressed.html,https://threejs.org/examples/webgpu_textures_2d-array_compressed.html,"webgpu, textures, 2d-array, compressed",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating textures, 2d-array, compressed"
453,webgpu (wip),textures / anisotropy,webgpu_textures_anisotropy.html,https://threejs.org/examples/webgpu_textures_anisotropy.html,"webgpu, textures, anisotropy",medium,3D visualization,"Three.js webgpu (wip) example demonstrating textures, anisotropy"
454,webgpu (wip),textures / partialupdate,webgpu_textures_partialupdate.html,https://threejs.org/examples/webgpu_textures_partialupdate.html,"webgpu, textures, partialupdate",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating textures, partialupdate"
455,webgpu (wip),tonemapping,webgpu_tonemapping.html,https://threejs.org/examples/webgpu_tonemapping.html,"webgpu, tonemapping",medium,3D visualization,Three.js webgpu (wip) example demonstrating tonemapping
456,webgpu (wip),tsl / angular / slicing,webgpu_tsl_angular_slicing.html,https://threejs.org/examples/webgpu_tsl_angular_slicing.html,"webgpu, tsl, angular, slicing",medium,VR/AR experience; shader programming,"Three.js webgpu (wip) example demonstrating tsl, angular, slicing"
457,webgpu (wip),tsl / compute / attractors / particles,webgpu_tsl_compute_attractors_particles.html,https://threejs.org/examples/webgpu_tsl_compute_attractors_particles.html,"webgpu, tsl, compute, attractors, particles",high,VR/AR experience; particle effects; shader programming; GPU compute,"Three.js webgpu (wip) example demonstrating tsl, compute, attractors, particles"
458,webgpu (wip),tsl / coffee / smoke,webgpu_tsl_coffee_smoke.html,https://threejs.org/examples/webgpu_tsl_coffee_smoke.html,"webgpu, tsl, coffee, smoke",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, coffee, smoke"
459,webgpu (wip),tsl / earth,webgpu_tsl_earth.html,https://threejs.org/examples/webgpu_tsl_earth.html,"webgpu, tsl, earth",medium,VR/AR experience; shader programming,"Three.js webgpu (wip) example demonstrating tsl, earth"
460,webgpu (wip),tsl / editor,webgpu_tsl_editor.html,https://threejs.org/examples/webgpu_tsl_editor.html,"webgpu, tsl, editor",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, editor"
461,webgpu (wip),tsl / galaxy,webgpu_tsl_galaxy.html,https://threejs.org/examples/webgpu_tsl_galaxy.html,"webgpu, tsl, galaxy",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, galaxy"
462,webgpu (wip),tsl / halftone,webgpu_tsl_halftone.html,https://threejs.org/examples/webgpu_tsl_halftone.html,"webgpu, tsl, halftone",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, halftone"
463,webgpu (wip),tsl / interoperability,webgpu_tsl_interoperability.html,https://threejs.org/examples/webgpu_tsl_interoperability.html,"webgpu, tsl, interoperability",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, interoperability"
464,webgpu (wip),tsl / procedural / terrain,webgpu_tsl_procedural_terrain.html,https://threejs.org/examples/webgpu_tsl_procedural_terrain.html,"webgpu, tsl, procedural, terrain",medium,procedural generation; shader programming,"Three.js webgpu (wip) example demonstrating tsl, procedural, terrain"
465,webgpu (wip),tsl / raging / sea,webgpu_tsl_raging_sea.html,https://threejs.org/examples/webgpu_tsl_raging_sea.html,"webgpu, tsl, raging, sea",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, raging, sea"
466,webgpu (wip),tsl / transpiler,webgpu_tsl_transpiler.html,https://threejs.org/examples/webgpu_tsl_transpiler.html,"webgpu, tsl, transpiler",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, transpiler"
467,webgpu (wip),tsl / vfx / flames,webgpu_tsl_vfx_flames.html,https://threejs.org/examples/webgpu_tsl_vfx_flames.html,"webgpu, tsl, vfx, flames",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, vfx, flames"
468,webgpu (wip),tsl / vfx / linkedparticles,webgpu_tsl_vfx_linkedparticles.html,https://threejs.org/examples/webgpu_tsl_vfx_linkedparticles.html,"webgpu, tsl, vfx, linkedparticles",medium,VR/AR experience; particle effects; shader programming,"Three.js webgpu (wip) example demonstrating tsl, vfx, linkedparticles"
469,webgpu (wip),tsl / vfx / tornado,webgpu_tsl_vfx_tornado.html,https://threejs.org/examples/webgpu_tsl_vfx_tornado.html,"webgpu, tsl, vfx, tornado",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, vfx, tornado"
470,webgpu (wip),tsl / wood,webgpu_tsl_wood.html,https://threejs.org/examples/webgpu_tsl_wood.html,"webgpu, tsl, wood",medium,shader programming,"Three.js webgpu (wip) example demonstrating tsl, wood"
471,webgpu (wip),video / frame,webgpu_video_frame.html,https://threejs.org/examples/webgpu_video_frame.html,"webgpu, video, frame",medium,3D visualization,"Three.js webgpu (wip) example demonstrating video, frame"
472,webgpu (wip),video / panorama,webgpu_video_panorama.html,https://threejs.org/examples/webgpu_video_panorama.html,"webgpu, video, panorama",medium,3D visualization,"Three.js webgpu (wip) example demonstrating video, panorama"
473,webgpu (wip),volume / caustics,webgpu_volume_caustics.html,https://threejs.org/examples/webgpu_volume_caustics.html,"webgpu, volume, caustics",medium,3D visualization,"Three.js webgpu (wip) example demonstrating volume, caustics"
474,webgpu (wip),volume / cloud,webgpu_volume_cloud.html,https://threejs.org/examples/webgpu_volume_cloud.html,"webgpu, volume, cloud",medium,3D visualization,"Three.js webgpu (wip) example demonstrating volume, cloud"
475,webgpu (wip),volume / lighting,webgpu_volume_lighting.html,https://threejs.org/examples/webgpu_volume_lighting.html,"webgpu, volume, lighting",medium,3D visualization,"Three.js webgpu (wip) example demonstrating volume, lighting"
476,webgpu (wip),volume / lighting / rectarea,webgpu_volume_lighting_rectarea.html,https://threejs.org/examples/webgpu_volume_lighting_rectarea.html,"webgpu, volume, lighting, rectarea",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating volume, lighting, rectarea"
477,webgpu (wip),volume / perlin,webgpu_volume_perlin.html,https://threejs.org/examples/webgpu_volume_perlin.html,"webgpu, volume, perlin",medium,3D visualization,"Three.js webgpu (wip) example demonstrating volume, perlin"
478,webgpu (wip),water,webgpu_water.html,https://threejs.org/examples/webgpu_water.html,"webgpu, water",medium,3D visualization,Three.js webgpu (wip) example demonstrating water
479,webgpu (wip),xr / cubes,webgpu_xr_cubes.html,https://threejs.org/examples/webgpu_xr_cubes.html,"webgpu, xr, cubes",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating xr, cubes"
480,webgpu (wip),xr / native / layers,webgpu_xr_native_layers.html,https://threejs.org/examples/webgpu_xr_native_layers.html,"webgpu, xr, native, layers",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating xr, native, layers"
481,webgpu (wip),xr / rollercoaster,webgpu_xr_rollercoaster.html,https://threejs.org/examples/webgpu_xr_rollercoaster.html,"webgpu, xr, rollercoaster",medium,VR/AR experience,"Three.js webgpu (wip) example demonstrating xr, rollercoaster"
482,webaudio,orientation,webaudio_orientation.html,https://threejs.org/examples/webaudio_orientation.html,"webaudio, orientation",medium,3D visualization,Three.js webaudio example demonstrating orientation
483,webaudio,sandbox,webaudio_sandbox.html,https://threejs.org/examples/webaudio_sandbox.html,"webaudio, sandbox",medium,3D visualization,Three.js webaudio example demonstrating sandbox
484,webaudio,timing,webaudio_timing.html,https://threejs.org/examples/webaudio_timing.html,"webaudio, timing",medium,3D visualization,Three.js webaudio example demonstrating timing
485,webaudio,visualizer,webaudio_visualizer.html,https://threejs.org/examples/webaudio_visualizer.html,"webaudio, visualizer",medium,3D visualization,Three.js webaudio example demonstrating visualizer
486,webxr,ar / camera / access,webxr_ar_camera_access.html,https://threejs.org/examples/webxr_ar_camera_access.html,"webxr, ar, camera, access",medium,VR/AR experience,"Three.js webxr example demonstrating ar, camera, access"
487,webxr,ar / cones,webxr_ar_cones.html,https://threejs.org/examples/webxr_ar_cones.html,"webxr, ar, cones",medium,VR/AR experience,"Three.js webxr example demonstrating ar, cones"
488,webxr,ar / hittest,webxr_ar_hittest.html,https://threejs.org/examples/webxr_ar_hittest.html,"webxr, ar, hittest",medium,VR/AR experience,"Three.js webxr example demonstrating ar, hittest"
489,webxr,ar / lighting,webxr_ar_lighting.html,https://threejs.org/examples/webxr_ar_lighting.html,"webxr, ar, lighting",medium,VR/AR experience,"Three.js webxr example demonstrating ar, lighting"
490,webxr,ar / plane / detection,webxr_ar_plane_detection.html,https://threejs.org/examples/webxr_ar_plane_detection.html,"webxr, ar, plane, detection",medium,VR/AR experience,"Three.js webxr example demonstrating ar, plane, detection"
491,webxr,vr / handinput,webxr_vr_handinput.html,https://threejs.org/examples/webxr_vr_handinput.html,"webxr, vr, handinput",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput"
492,webxr,vr / handinput / cubes,webxr_vr_handinput_cubes.html,https://threejs.org/examples/webxr_vr_handinput_cubes.html,"webxr, vr, handinput, cubes",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput, cubes"
493,webxr,vr / handinput / profiles,webxr_vr_handinput_profiles.html,https://threejs.org/examples/webxr_vr_handinput_profiles.html,"webxr, vr, handinput, profiles",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput, profiles"
494,webxr,vr / handinput / pointerclick,webxr_vr_handinput_pointerclick.html,https://threejs.org/examples/webxr_vr_handinput_pointerclick.html,"webxr, vr, handinput, pointerclick",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput, pointerclick"
495,webxr,vr / handinput / pointerdrag,webxr_vr_handinput_pointerdrag.html,https://threejs.org/examples/webxr_vr_handinput_pointerdrag.html,"webxr, vr, handinput, pointerdrag",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput, pointerdrag"
496,webxr,vr / handinput / pressbutton,webxr_vr_handinput_pressbutton.html,https://threejs.org/examples/webxr_vr_handinput_pressbutton.html,"webxr, vr, handinput, pressbutton",medium,VR/AR experience,"Three.js webxr example demonstrating vr, handinput, pressbutton"
497,webxr,vr / layers,webxr_vr_layers.html,https://threejs.org/examples/webxr_vr_layers.html,"webxr, vr, layers",medium,VR/AR experience,"Three.js webxr example demonstrating vr, layers"
498,webxr,vr / panorama,webxr_vr_panorama.html,https://threejs.org/examples/webxr_vr_panorama.html,"webxr, vr, panorama",medium,VR/AR experience,"Three.js webxr example demonstrating vr, panorama"
499,webxr,vr / panorama / depth,webxr_vr_panorama_depth.html,https://threejs.org/examples/webxr_vr_panorama_depth.html,"webxr, vr, panorama, depth",medium,VR/AR experience,"Three.js webxr example demonstrating vr, panorama, depth"
500,webxr,vr / rollercoaster,webxr_vr_rollercoaster.html,https://threejs.org/examples/webxr_vr_rollercoaster.html,"webxr, vr, rollercoaster",medium,VR/AR experience,"Three.js webxr example demonstrating vr, rollercoaster"
501,webxr,vr / sandbox,webxr_vr_sandbox.html,https://threejs.org/examples/webxr_vr_sandbox.html,"webxr, vr, sandbox",medium,VR/AR experience,"Three.js webxr example demonstrating vr, sandbox"
502,webxr,vr / teleport,webxr_vr_teleport.html,https://threejs.org/examples/webxr_vr_teleport.html,"webxr, vr, teleport",medium,VR/AR experience,"Three.js webxr example demonstrating vr, teleport"
503,webxr,vr / video,webxr_vr_video.html,https://threejs.org/examples/webxr_vr_video.html,"webxr, vr, video",medium,VR/AR experience,"Three.js webxr example demonstrating vr, video"
504,webxr,xr / ballshooter,webxr_xr_ballshooter.html,https://threejs.org/examples/webxr_xr_ballshooter.html,"webxr, xr, ballshooter",medium,VR/AR experience,"Three.js webxr example demonstrating xr, ballshooter"
505,webxr,xr / controls / transform,webxr_xr_controls_transform.html,https://threejs.org/examples/webxr_xr_controls_transform.html,"webxr, xr, controls, transform",medium,VR/AR experience,"Three.js webxr example demonstrating xr, controls, transform"
506,webxr,xr / cubes,webxr_xr_cubes.html,https://threejs.org/examples/webxr_xr_cubes.html,"webxr, xr, cubes",medium,VR/AR experience,"Three.js webxr example demonstrating xr, cubes"
507,webxr,xr / dragging,webxr_xr_dragging.html,https://threejs.org/examples/webxr_xr_dragging.html,"webxr, xr, dragging",medium,VR/AR experience,"Three.js webxr example demonstrating xr, dragging"
508,webxr,xr / dragging / custom / depth,webxr_xr_dragging_custom_depth.html,https://threejs.org/examples/webxr_xr_dragging_custom_depth.html,"webxr, xr, dragging, custom, depth",medium,VR/AR experience,"Three.js webxr example demonstrating xr, dragging, custom, depth"
509,webxr,xr / haptics,webxr_xr_haptics.html,https://threejs.org/examples/webxr_xr_haptics.html,"webxr, xr, haptics",medium,VR/AR experience,"Three.js webxr example demonstrating xr, haptics"
510,webxr,xr / paint,webxr_xr_paint.html,https://threejs.org/examples/webxr_xr_paint.html,"webxr, xr, paint",medium,VR/AR experience,"Three.js webxr example demonstrating xr, paint"
511,webxr,xr / sculpt,webxr_xr_sculpt.html,https://threejs.org/examples/webxr_xr_sculpt.html,"webxr, xr, sculpt",medium,VR/AR experience,"Three.js webxr example demonstrating xr, sculpt"
512,games,fps,games_fps.html,https://threejs.org/examples/games_fps.html,"games, fps",medium,3D visualization,Three.js games example demonstrating fps
513,physics,ammo / break,physics_ammo_break.html,https://threejs.org/examples/physics_ammo_break.html,"physics, ammo, break",medium,physics simulation,"Three.js physics example demonstrating ammo, break"
514,physics,ammo / cloth,physics_ammo_cloth.html,https://threejs.org/examples/physics_ammo_cloth.html,"physics, ammo, cloth",medium,physics simulation,"Three.js physics example demonstrating ammo, cloth"
515,physics,ammo / instancing,physics_ammo_instancing.html,https://threejs.org/examples/physics_ammo_instancing.html,"physics, ammo, instancing",medium,physics simulation,"Three.js physics example demonstrating ammo, instancing"
516,physics,ammo / rope,physics_ammo_rope.html,https://threejs.org/examples/physics_ammo_rope.html,"physics, ammo, rope",medium,physics simulation,"Three.js physics example demonstrating ammo, rope"
517,physics,ammo / terrain,physics_ammo_terrain.html,https://threejs.org/examples/physics_ammo_terrain.html,"physics, ammo, terrain",medium,physics simulation; procedural generation,"Three.js physics example demonstrating ammo, terrain"
518,physics,ammo / volume,physics_ammo_volume.html,https://threejs.org/examples/physics_ammo_volume.html,"physics, ammo, volume",medium,physics simulation,"Three.js physics example demonstrating ammo, volume"
519,physics,jolt / instancing,physics_jolt_instancing.html,https://threejs.org/examples/physics_jolt_instancing.html,"physics, jolt, instancing",medium,physics simulation,"Three.js physics example demonstrating jolt, instancing"
520,physics,rapier / basic,physics_rapier_basic.html,https://threejs.org/examples/physics_rapier_basic.html,"physics, rapier, basic",low,physics simulation,"Three.js physics example demonstrating rapier, basic"
521,physics,rapier / instancing,physics_rapier_instancing.html,https://threejs.org/examples/physics_rapier_instancing.html,"physics, rapier, instancing",medium,physics simulation,"Three.js physics example demonstrating rapier, instancing"
522,physics,rapier / joints,physics_rapier_joints.html,https://threejs.org/examples/physics_rapier_joints.html,"physics, rapier, joints",medium,physics simulation,"Three.js physics example demonstrating rapier, joints"
523,physics,rapier / character / controller,physics_rapier_character_controller.html,https://threejs.org/examples/physics_rapier_character_controller.html,"physics, rapier, character, controller",medium,physics simulation; VR/AR experience,"Three.js physics example demonstrating rapier, character, controller"
524,physics,rapier / vehicle / controller,physics_rapier_vehicle_controller.html,https://threejs.org/examples/physics_rapier_vehicle_controller.html,"physics, rapier, vehicle, controller",medium,physics simulation,"Three.js physics example demonstrating rapier, vehicle, controller"
525,physics,rapier / terrain,physics_rapier_terrain.html,https://threejs.org/examples/physics_rapier_terrain.html,"physics, rapier, terrain",medium,physics simulation; procedural generation,"Three.js physics example demonstrating rapier, terrain"
526,misc,animation / groups,misc_animation_groups.html,https://threejs.org/examples/misc_animation_groups.html,"misc, animation, groups",medium,character animation,"Three.js misc example demonstrating animation, groups"
527,misc,animation / keys,misc_animation_keys.html,https://threejs.org/examples/misc_animation_keys.html,"misc, animation, keys",medium,character animation,"Three.js misc example demonstrating animation, keys"
528,misc,boxselection,misc_boxselection.html,https://threejs.org/examples/misc_boxselection.html,"misc, boxselection",medium,3D visualization,Three.js misc example demonstrating boxselection
529,misc,controls / arcball,misc_controls_arcball.html,https://threejs.org/examples/misc_controls_arcball.html,"misc, controls, arcball",medium,VR/AR experience,"Three.js misc example demonstrating controls, arcball"
530,misc,controls / drag,misc_controls_drag.html,https://threejs.org/examples/misc_controls_drag.html,"misc, controls, drag",medium,3D visualization,"Three.js misc example demonstrating controls, drag"
531,misc,controls / fly,misc_controls_fly.html,https://threejs.org/examples/misc_controls_fly.html,"misc, controls, fly",medium,3D visualization,"Three.js misc example demonstrating controls, fly"
532,misc,controls / map,misc_controls_map.html,https://threejs.org/examples/misc_controls_map.html,"misc, controls, map",medium,3D visualization,"Three.js misc example demonstrating controls, map"
533,misc,controls / orbit,misc_controls_orbit.html,https://threejs.org/examples/misc_controls_orbit.html,"misc, controls, orbit",medium,3D visualization,"Three.js misc example demonstrating controls, orbit"
534,misc,controls / pointerlock,misc_controls_pointerlock.html,https://threejs.org/examples/misc_controls_pointerlock.html,"misc, controls, pointerlock",medium,3D visualization,"Three.js misc example demonstrating controls, pointerlock"
535,misc,controls / trackball,misc_controls_trackball.html,https://threejs.org/examples/misc_controls_trackball.html,"misc, controls, trackball",medium,3D visualization,"Three.js misc example demonstrating controls, trackball"
536,misc,controls / transform,misc_controls_transform.html,https://threejs.org/examples/misc_controls_transform.html,"misc, controls, transform",medium,3D visualization,"Three.js misc example demonstrating controls, transform"
537,misc,exporter / draco,misc_exporter_draco.html,https://threejs.org/examples/misc_exporter_draco.html,"misc, exporter, draco",medium,3D visualization,"Three.js misc example demonstrating exporter, draco"
538,misc,exporter / gltf,misc_exporter_gltf.html,https://threejs.org/examples/misc_exporter_gltf.html,"misc, exporter, gltf",medium,3D visualization,"Three.js misc example demonstrating exporter, gltf"
539,misc,exporter / obj,misc_exporter_obj.html,https://threejs.org/examples/misc_exporter_obj.html,"misc, exporter, obj",medium,3D visualization,"Three.js misc example demonstrating exporter, obj"
540,misc,exporter / ply,misc_exporter_ply.html,https://threejs.org/examples/misc_exporter_ply.html,"misc, exporter, ply",medium,3D visualization,"Three.js misc example demonstrating exporter, ply"
541,misc,exporter / stl,misc_exporter_stl.html,https://threejs.org/examples/misc_exporter_stl.html,"misc, exporter, stl",medium,3D visualization,"Three.js misc example demonstrating exporter, stl"
542,misc,exporter / usdz,misc_exporter_usdz.html,https://threejs.org/examples/misc_exporter_usdz.html,"misc, exporter, usdz",medium,3D visualization,"Three.js misc example demonstrating exporter, usdz"
543,misc,exporter / exr,misc_exporter_exr.html,https://threejs.org/examples/misc_exporter_exr.html,"misc, exporter, exr",medium,VR/AR experience,"Three.js misc example demonstrating exporter, exr"
544,misc,exporter / ktx2,misc_exporter_ktx2.html,https://threejs.org/examples/misc_exporter_ktx2.html,"misc, exporter, ktx2",medium,3D visualization,"Three.js misc example demonstrating exporter, ktx2"
545,misc,raycaster / helper,misc_raycaster_helper.html,https://threejs.org/examples/misc_raycaster_helper.html,"misc, raycaster, helper",medium,user interaction,"Three.js misc example demonstrating raycaster, helper"
546,css2d,label,css2d_label.html,https://threejs.org/examples/css2d_label.html,"css2d, label",low,3D visualization,Three.js css2d example demonstrating label
547,css3d,molecules,css3d_molecules.html,https://threejs.org/examples/css3d_molecules.html,"css3d, molecules",low,3D visualization,Three.js css3d example demonstrating molecules
548,css3d,orthographic,css3d_orthographic.html,https://threejs.org/examples/css3d_orthographic.html,"css3d, orthographic",low,3D visualization,Three.js css3d example demonstrating orthographic
549,css3d,periodictable,css3d_periodictable.html,https://threejs.org/examples/css3d_periodictable.html,"css3d, periodictable",low,3D visualization,Three.js css3d example demonstrating periodictable
550,css3d,sandbox,css3d_sandbox.html,https://threejs.org/examples/css3d_sandbox.html,"css3d, sandbox",low,3D visualization,Three.js css3d example demonstrating sandbox
551,css3d,sprites,css3d_sprites.html,https://threejs.org/examples/css3d_sprites.html,"css3d, sprites",low,3D visualization,Three.js css3d example demonstrating sprites
552,css3d,youtube,css3d_youtube.html,https://threejs.org/examples/css3d_youtube.html,"css3d, youtube",low,3D visualization,Three.js css3d example demonstrating youtube
553,svg,lines,svg_lines.html,https://threejs.org/examples/svg_lines.html,"svg, lines",low,3D visualization,Three.js svg example demonstrating lines
554,svg,sandbox,svg_sandbox.html,https://threejs.org/examples/svg_sandbox.html,"svg, sandbox",low,3D visualization,Three.js svg example demonstrating sandbox
555,tests,furnace / test,webgl_furnace_test.html,https://threejs.org/examples/webgl_furnace_test.html,"webgl, furnace, test",medium,3D visualization,"Three.js tests example demonstrating furnace, test"
556,tests,uv / tests,misc_uv_tests.html,https://threejs.org/examples/misc_uv_tests.html,"misc, uv, tests",medium,3D visualization,"Three.js tests example demonstrating uv, tests"
1 ID Category Name File URL Keywords Complexity Use Cases Description
2 1 webgl animation / keyframes webgl_animation_keyframes.html https://threejs.org/examples/webgl_animation_keyframes.html webgl, animation, keyframes medium character animation Three.js webgl example demonstrating animation, keyframes
3 2 webgl animation / skinning / blending webgl_animation_skinning_blending.html https://threejs.org/examples/webgl_animation_skinning_blending.html webgl, animation, skinning, blending medium character animation Three.js webgl example demonstrating animation, skinning, blending
4 3 webgl animation / skinning / additive / blending webgl_animation_skinning_additive_blending.html https://threejs.org/examples/webgl_animation_skinning_additive_blending.html webgl, animation, skinning, additive, blending medium character animation Three.js webgl example demonstrating animation, skinning, additive, blending
5 4 webgl animation / skinning / ik webgl_animation_skinning_ik.html https://threejs.org/examples/webgl_animation_skinning_ik.html webgl, animation, skinning, ik medium character animation Three.js webgl example demonstrating animation, skinning, ik
6 5 webgl animation / skinning / morph webgl_animation_skinning_morph.html https://threejs.org/examples/webgl_animation_skinning_morph.html webgl, animation, skinning, morph medium character animation Three.js webgl example demonstrating animation, skinning, morph
7 6 webgl animation / multiple webgl_animation_multiple.html https://threejs.org/examples/webgl_animation_multiple.html webgl, animation, multiple medium character animation Three.js webgl example demonstrating animation, multiple
8 7 webgl animation / walk webgl_animation_walk.html https://threejs.org/examples/webgl_animation_walk.html webgl, animation, walk medium character animation Three.js webgl example demonstrating animation, walk
9 8 webgl batch / lod / bvh webgl_batch_lod_bvh.html https://threejs.org/examples/webgl_batch_lod_bvh.html webgl, batch, lod, bvh medium 3D visualization Three.js webgl example demonstrating batch, lod, bvh
10 9 webgl camera webgl_camera.html https://threejs.org/examples/webgl_camera.html webgl, camera medium 3D visualization Three.js webgl example demonstrating camera
11 10 webgl camera / array webgl_camera_array.html https://threejs.org/examples/webgl_camera_array.html webgl, camera, array medium VR/AR experience Three.js webgl example demonstrating camera, array
12 11 webgl camera / logarithmicdepthbuffer webgl_camera_logarithmicdepthbuffer.html https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html webgl, camera, logarithmicdepthbuffer medium VR/AR experience Three.js webgl example demonstrating camera, logarithmicdepthbuffer
13 12 webgl clipping webgl_clipping.html https://threejs.org/examples/webgl_clipping.html webgl, clipping medium 3D visualization Three.js webgl example demonstrating clipping
14 13 webgl clipping / advanced webgl_clipping_advanced.html https://threejs.org/examples/webgl_clipping_advanced.html webgl, clipping, advanced medium 3D visualization Three.js webgl example demonstrating clipping, advanced
15 14 webgl clipping / intersection webgl_clipping_intersection.html https://threejs.org/examples/webgl_clipping_intersection.html webgl, clipping, intersection medium 3D visualization Three.js webgl example demonstrating clipping, intersection
16 15 webgl clipping / stencil webgl_clipping_stencil.html https://threejs.org/examples/webgl_clipping_stencil.html webgl, clipping, stencil medium 3D visualization Three.js webgl example demonstrating clipping, stencil
17 16 webgl decals webgl_decals.html https://threejs.org/examples/webgl_decals.html webgl, decals medium 3D visualization Three.js webgl example demonstrating decals
18 17 webgl depth / texture webgl_depth_texture.html https://threejs.org/examples/webgl_depth_texture.html webgl, depth, texture medium 3D visualization Three.js webgl example demonstrating depth, texture
19 18 webgl effects / anaglyph webgl_effects_anaglyph.html https://threejs.org/examples/webgl_effects_anaglyph.html webgl, effects, anaglyph medium 3D visualization Three.js webgl example demonstrating effects, anaglyph
20 19 webgl effects / ascii webgl_effects_ascii.html https://threejs.org/examples/webgl_effects_ascii.html webgl, effects, ascii medium 3D visualization Three.js webgl example demonstrating effects, ascii
21 20 webgl effects / parallaxbarrier webgl_effects_parallaxbarrier.html https://threejs.org/examples/webgl_effects_parallaxbarrier.html webgl, effects, parallaxbarrier medium VR/AR experience Three.js webgl example demonstrating effects, parallaxbarrier
22 21 webgl effects / stereo webgl_effects_stereo.html https://threejs.org/examples/webgl_effects_stereo.html webgl, effects, stereo medium 3D visualization Three.js webgl example demonstrating effects, stereo
23 22 webgl framebuffer / texture webgl_framebuffer_texture.html https://threejs.org/examples/webgl_framebuffer_texture.html webgl, framebuffer, texture medium 3D visualization Three.js webgl example demonstrating framebuffer, texture
24 23 webgl geometries webgl_geometries.html https://threejs.org/examples/webgl_geometries.html webgl, geometries medium 3D visualization Three.js webgl example demonstrating geometries
25 24 webgl geometry / colors webgl_geometry_colors.html https://threejs.org/examples/webgl_geometry_colors.html webgl, geometry, colors medium procedural generation Three.js webgl example demonstrating geometry, colors
26 25 webgl geometry / colors / lookuptable webgl_geometry_colors_lookuptable.html https://threejs.org/examples/webgl_geometry_colors_lookuptable.html webgl, geometry, colors, lookuptable medium procedural generation Three.js webgl example demonstrating geometry, colors, lookuptable
27 26 webgl geometry / convex webgl_geometry_convex.html https://threejs.org/examples/webgl_geometry_convex.html webgl, geometry, convex medium procedural generation Three.js webgl example demonstrating geometry, convex
28 27 webgl geometry / csg webgl_geometry_csg.html https://threejs.org/examples/webgl_geometry_csg.html webgl, geometry, csg medium procedural generation Three.js webgl example demonstrating geometry, csg
29 28 webgl geometry / cube webgl_geometry_cube.html https://threejs.org/examples/webgl_geometry_cube.html webgl, geometry, cube medium procedural generation Three.js webgl example demonstrating geometry, cube
30 29 webgl geometry / extrude / shapes webgl_geometry_extrude_shapes.html https://threejs.org/examples/webgl_geometry_extrude_shapes.html webgl, geometry, extrude, shapes medium procedural generation Three.js webgl example demonstrating geometry, extrude, shapes
31 30 webgl geometry / extrude / splines webgl_geometry_extrude_splines.html https://threejs.org/examples/webgl_geometry_extrude_splines.html webgl, geometry, extrude, splines medium procedural generation Three.js webgl example demonstrating geometry, extrude, splines
32 31 webgl geometry / minecraft webgl_geometry_minecraft.html https://threejs.org/examples/webgl_geometry_minecraft.html webgl, geometry, minecraft medium procedural generation Three.js webgl example demonstrating geometry, minecraft
33 32 webgl geometry / nurbs webgl_geometry_nurbs.html https://threejs.org/examples/webgl_geometry_nurbs.html webgl, geometry, nurbs medium procedural generation Three.js webgl example demonstrating geometry, nurbs
34 33 webgl geometry / shapes webgl_geometry_shapes.html https://threejs.org/examples/webgl_geometry_shapes.html webgl, geometry, shapes medium procedural generation Three.js webgl example demonstrating geometry, shapes
35 34 webgl geometry / spline / editor webgl_geometry_spline_editor.html https://threejs.org/examples/webgl_geometry_spline_editor.html webgl, geometry, spline, editor medium procedural generation Three.js webgl example demonstrating geometry, spline, editor
36 35 webgl geometry / teapot webgl_geometry_teapot.html https://threejs.org/examples/webgl_geometry_teapot.html webgl, geometry, teapot medium procedural generation Three.js webgl example demonstrating geometry, teapot
37 36 webgl geometry / terrain webgl_geometry_terrain.html https://threejs.org/examples/webgl_geometry_terrain.html webgl, geometry, terrain medium procedural generation Three.js webgl example demonstrating geometry, terrain
38 37 webgl geometry / terrain / raycast webgl_geometry_terrain_raycast.html https://threejs.org/examples/webgl_geometry_terrain_raycast.html webgl, geometry, terrain, raycast medium procedural generation Three.js webgl example demonstrating geometry, terrain, raycast
39 38 webgl geometry / text webgl_geometry_text.html https://threejs.org/examples/webgl_geometry_text.html webgl, geometry, text medium procedural generation Three.js webgl example demonstrating geometry, text
40 39 webgl geometry / text / shapes webgl_geometry_text_shapes.html https://threejs.org/examples/webgl_geometry_text_shapes.html webgl, geometry, text, shapes medium procedural generation Three.js webgl example demonstrating geometry, text, shapes
41 40 webgl geometry / text / stroke webgl_geometry_text_stroke.html https://threejs.org/examples/webgl_geometry_text_stroke.html webgl, geometry, text, stroke medium procedural generation Three.js webgl example demonstrating geometry, text, stroke
42 41 webgl helpers webgl_helpers.html https://threejs.org/examples/webgl_helpers.html webgl, helpers medium 3D visualization Three.js webgl example demonstrating helpers
43 42 webgl instancing / morph webgl_instancing_morph.html https://threejs.org/examples/webgl_instancing_morph.html webgl, instancing, morph medium 3D visualization Three.js webgl example demonstrating instancing, morph
44 43 webgl instancing / dynamic webgl_instancing_dynamic.html https://threejs.org/examples/webgl_instancing_dynamic.html webgl, instancing, dynamic medium 3D visualization Three.js webgl example demonstrating instancing, dynamic
45 44 webgl instancing / performance webgl_instancing_performance.html https://threejs.org/examples/webgl_instancing_performance.html webgl, instancing, performance medium 3D visualization Three.js webgl example demonstrating instancing, performance
46 45 webgl instancing / raycast webgl_instancing_raycast.html https://threejs.org/examples/webgl_instancing_raycast.html webgl, instancing, raycast medium 3D visualization Three.js webgl example demonstrating instancing, raycast
47 46 webgl instancing / scatter webgl_instancing_scatter.html https://threejs.org/examples/webgl_instancing_scatter.html webgl, instancing, scatter medium 3D visualization Three.js webgl example demonstrating instancing, scatter
48 47 webgl interactive / buffergeometry webgl_interactive_buffergeometry.html https://threejs.org/examples/webgl_interactive_buffergeometry.html webgl, interactive, buffergeometry medium user interaction; procedural generation Three.js webgl example demonstrating interactive, buffergeometry
49 48 webgl interactive / cubes webgl_interactive_cubes.html https://threejs.org/examples/webgl_interactive_cubes.html webgl, interactive, cubes medium user interaction Three.js webgl example demonstrating interactive, cubes
50 49 webgl interactive / cubes / gpu webgl_interactive_cubes_gpu.html https://threejs.org/examples/webgl_interactive_cubes_gpu.html webgl, interactive, cubes, gpu medium user interaction Three.js webgl example demonstrating interactive, cubes, gpu
51 50 webgl interactive / cubes / ortho webgl_interactive_cubes_ortho.html https://threejs.org/examples/webgl_interactive_cubes_ortho.html webgl, interactive, cubes, ortho medium user interaction Three.js webgl example demonstrating interactive, cubes, ortho
52 51 webgl interactive / lines webgl_interactive_lines.html https://threejs.org/examples/webgl_interactive_lines.html webgl, interactive, lines medium user interaction Three.js webgl example demonstrating interactive, lines
53 52 webgl interactive / points webgl_interactive_points.html https://threejs.org/examples/webgl_interactive_points.html webgl, interactive, points medium user interaction; particle effects Three.js webgl example demonstrating interactive, points
54 53 webgl interactive / raycasting / points webgl_interactive_raycasting_points.html https://threejs.org/examples/webgl_interactive_raycasting_points.html webgl, interactive, raycasting, points medium user interaction; particle effects Three.js webgl example demonstrating interactive, raycasting, points
55 54 webgl interactive / voxelpainter webgl_interactive_voxelpainter.html https://threejs.org/examples/webgl_interactive_voxelpainter.html webgl, interactive, voxelpainter medium user interaction Three.js webgl example demonstrating interactive, voxelpainter
56 55 webgl lensflares webgl_lensflares.html https://threejs.org/examples/webgl_lensflares.html webgl, lensflares medium VR/AR experience Three.js webgl example demonstrating lensflares
57 56 webgl lightprobe webgl_lightprobe.html https://threejs.org/examples/webgl_lightprobe.html webgl, lightprobe medium 3D visualization Three.js webgl example demonstrating lightprobe
58 57 webgl lightprobe / cubecamera webgl_lightprobe_cubecamera.html https://threejs.org/examples/webgl_lightprobe_cubecamera.html webgl, lightprobe, cubecamera medium 3D visualization Three.js webgl example demonstrating lightprobe, cubecamera
59 58 webgl lights / hemisphere webgl_lights_hemisphere.html https://threejs.org/examples/webgl_lights_hemisphere.html webgl, lights, hemisphere medium 3D visualization Three.js webgl example demonstrating lights, hemisphere
60 59 webgl lights / physical webgl_lights_physical.html https://threejs.org/examples/webgl_lights_physical.html webgl, lights, physical medium 3D visualization Three.js webgl example demonstrating lights, physical
61 60 webgl lights / spotlight webgl_lights_spotlight.html https://threejs.org/examples/webgl_lights_spotlight.html webgl, lights, spotlight medium 3D visualization Three.js webgl example demonstrating lights, spotlight
62 61 webgl lights / spotlights webgl_lights_spotlights.html https://threejs.org/examples/webgl_lights_spotlights.html webgl, lights, spotlights medium 3D visualization Three.js webgl example demonstrating lights, spotlights
63 62 webgl lights / pointlights webgl_lights_pointlights.html https://threejs.org/examples/webgl_lights_pointlights.html webgl, lights, pointlights medium 3D visualization Three.js webgl example demonstrating lights, pointlights
64 63 webgl lights / rectarealight webgl_lights_rectarealight.html https://threejs.org/examples/webgl_lights_rectarealight.html webgl, lights, rectarealight medium VR/AR experience Three.js webgl example demonstrating lights, rectarealight
65 64 webgl lines / colors webgl_lines_colors.html https://threejs.org/examples/webgl_lines_colors.html webgl, lines, colors medium 3D visualization Three.js webgl example demonstrating lines, colors
66 65 webgl lines / dashed webgl_lines_dashed.html https://threejs.org/examples/webgl_lines_dashed.html webgl, lines, dashed medium 3D visualization Three.js webgl example demonstrating lines, dashed
67 66 webgl lines / fat webgl_lines_fat.html https://threejs.org/examples/webgl_lines_fat.html webgl, lines, fat medium 3D visualization Three.js webgl example demonstrating lines, fat
68 67 webgl lines / fat / raycasting webgl_lines_fat_raycasting.html https://threejs.org/examples/webgl_lines_fat_raycasting.html webgl, lines, fat, raycasting medium 3D visualization Three.js webgl example demonstrating lines, fat, raycasting
69 68 webgl lines / fat / wireframe webgl_lines_fat_wireframe.html https://threejs.org/examples/webgl_lines_fat_wireframe.html webgl, lines, fat, wireframe medium 3D visualization Three.js webgl example demonstrating lines, fat, wireframe
70 69 webgl loader / 3dm webgl_loader_3dm.html https://threejs.org/examples/webgl_loader_3dm.html webgl, loader, 3dm medium model loading Three.js webgl example demonstrating loader, 3dm
71 70 webgl loader / 3ds webgl_loader_3ds.html https://threejs.org/examples/webgl_loader_3ds.html webgl, loader, 3ds medium model loading Three.js webgl example demonstrating loader, 3ds
72 71 webgl loader / 3dtiles webgl_loader_3dtiles.html https://threejs.org/examples/webgl_loader_3dtiles.html webgl, loader, 3dtiles medium model loading Three.js webgl example demonstrating loader, 3dtiles
73 72 webgl loader / 3mf webgl_loader_3mf.html https://threejs.org/examples/webgl_loader_3mf.html webgl, loader, 3mf medium model loading Three.js webgl example demonstrating loader, 3mf
74 73 webgl loader / 3mf / materials webgl_loader_3mf_materials.html https://threejs.org/examples/webgl_loader_3mf_materials.html webgl, loader, 3mf, materials medium model loading; material effects Three.js webgl example demonstrating loader, 3mf, materials
75 74 webgl loader / amf webgl_loader_amf.html https://threejs.org/examples/webgl_loader_amf.html webgl, loader, amf medium model loading Three.js webgl example demonstrating loader, amf
76 75 webgl loader / bvh webgl_loader_bvh.html https://threejs.org/examples/webgl_loader_bvh.html webgl, loader, bvh medium model loading Three.js webgl example demonstrating loader, bvh
77 76 webgl loader / collada webgl_loader_collada.html https://threejs.org/examples/webgl_loader_collada.html webgl, loader, collada medium model loading Three.js webgl example demonstrating loader, collada
78 77 webgl loader / collada / kinematics webgl_loader_collada_kinematics.html https://threejs.org/examples/webgl_loader_collada_kinematics.html webgl, loader, collada, kinematics medium model loading Three.js webgl example demonstrating loader, collada, kinematics
79 78 webgl loader / collada / skinning webgl_loader_collada_skinning.html https://threejs.org/examples/webgl_loader_collada_skinning.html webgl, loader, collada, skinning medium model loading Three.js webgl example demonstrating loader, collada, skinning
80 79 webgl loader / draco webgl_loader_draco.html https://threejs.org/examples/webgl_loader_draco.html webgl, loader, draco medium model loading Three.js webgl example demonstrating loader, draco
81 80 webgl loader / fbx webgl_loader_fbx.html https://threejs.org/examples/webgl_loader_fbx.html webgl, loader, fbx medium model loading Three.js webgl example demonstrating loader, fbx
82 81 webgl loader / fbx / nurbs webgl_loader_fbx_nurbs.html https://threejs.org/examples/webgl_loader_fbx_nurbs.html webgl, loader, fbx, nurbs medium model loading Three.js webgl example demonstrating loader, fbx, nurbs
83 82 webgl loader / gcode webgl_loader_gcode.html https://threejs.org/examples/webgl_loader_gcode.html webgl, loader, gcode medium model loading Three.js webgl example demonstrating loader, gcode
84 83 webgl loader / gltf webgl_loader_gltf.html https://threejs.org/examples/webgl_loader_gltf.html webgl, loader, gltf medium model loading Three.js webgl example demonstrating loader, gltf
85 84 webgl loader / gltf / animation / pointer webgl_loader_gltf_animation_pointer.html https://threejs.org/examples/webgl_loader_gltf_animation_pointer.html webgl, loader, gltf, animation, pointer medium character animation; model loading Three.js webgl example demonstrating loader, gltf, animation, pointer
86 85 webgl loader / gltf / progressive / lod webgl_loader_gltf_progressive_lod.html https://threejs.org/examples/webgl_loader_gltf_progressive_lod.html webgl, loader, gltf, progressive, lod medium model loading Three.js webgl example demonstrating loader, gltf, progressive, lod
87 86 webgl loader / gltf / avif webgl_loader_gltf_avif.html https://threejs.org/examples/webgl_loader_gltf_avif.html webgl, loader, gltf, avif medium model loading Three.js webgl example demonstrating loader, gltf, avif
88 87 webgl loader / gltf / compressed webgl_loader_gltf_compressed.html https://threejs.org/examples/webgl_loader_gltf_compressed.html webgl, loader, gltf, compressed medium model loading Three.js webgl example demonstrating loader, gltf, compressed
89 88 webgl loader / gltf / dispersion webgl_loader_gltf_dispersion.html https://threejs.org/examples/webgl_loader_gltf_dispersion.html webgl, loader, gltf, dispersion medium model loading Three.js webgl example demonstrating loader, gltf, dispersion
90 89 webgl loader / gltf / instancing webgl_loader_gltf_instancing.html https://threejs.org/examples/webgl_loader_gltf_instancing.html webgl, loader, gltf, instancing medium model loading Three.js webgl example demonstrating loader, gltf, instancing
91 90 webgl loader / gltf / iridescence webgl_loader_gltf_iridescence.html https://threejs.org/examples/webgl_loader_gltf_iridescence.html webgl, loader, gltf, iridescence medium model loading Three.js webgl example demonstrating loader, gltf, iridescence
92 91 webgl loader / gltf / sheen webgl_loader_gltf_sheen.html https://threejs.org/examples/webgl_loader_gltf_sheen.html webgl, loader, gltf, sheen medium model loading Three.js webgl example demonstrating loader, gltf, sheen
93 92 webgl loader / gltf / transmission webgl_loader_gltf_transmission.html https://threejs.org/examples/webgl_loader_gltf_transmission.html webgl, loader, gltf, transmission medium model loading Three.js webgl example demonstrating loader, gltf, transmission
94 93 webgl loader / gltf / variants webgl_loader_gltf_variants.html https://threejs.org/examples/webgl_loader_gltf_variants.html webgl, loader, gltf, variants medium model loading; VR/AR experience Three.js webgl example demonstrating loader, gltf, variants
95 94 webgl loader / gltf / anisotropy webgl_loader_gltf_anisotropy.html https://threejs.org/examples/webgl_loader_gltf_anisotropy.html webgl, loader, gltf, anisotropy medium model loading Three.js webgl example demonstrating loader, gltf, anisotropy
96 95 webgl loader / ifc webgl_loader_ifc.html https://threejs.org/examples/webgl_loader_ifc.html webgl, loader, ifc medium model loading Three.js webgl example demonstrating loader, ifc
97 96 webgl loader / imagebitmap webgl_loader_imagebitmap.html https://threejs.org/examples/webgl_loader_imagebitmap.html webgl, loader, imagebitmap medium model loading Three.js webgl example demonstrating loader, imagebitmap
98 97 webgl loader / kmz webgl_loader_kmz.html https://threejs.org/examples/webgl_loader_kmz.html webgl, loader, kmz medium model loading Three.js webgl example demonstrating loader, kmz
99 98 webgl loader / ldraw webgl_loader_ldraw.html https://threejs.org/examples/webgl_loader_ldraw.html webgl, loader, ldraw medium model loading Three.js webgl example demonstrating loader, ldraw
100 99 webgl loader / lwo webgl_loader_lwo.html https://threejs.org/examples/webgl_loader_lwo.html webgl, loader, lwo medium model loading Three.js webgl example demonstrating loader, lwo
101 100 webgl loader / md2 webgl_loader_md2.html https://threejs.org/examples/webgl_loader_md2.html webgl, loader, md2 medium model loading Three.js webgl example demonstrating loader, md2
102 101 webgl loader / md2 / control webgl_loader_md2_control.html https://threejs.org/examples/webgl_loader_md2_control.html webgl, loader, md2, control medium model loading Three.js webgl example demonstrating loader, md2, control
103 102 webgl loader / mdd webgl_loader_mdd.html https://threejs.org/examples/webgl_loader_mdd.html webgl, loader, mdd medium model loading Three.js webgl example demonstrating loader, mdd
104 103 webgl loader / nrrd webgl_loader_nrrd.html https://threejs.org/examples/webgl_loader_nrrd.html webgl, loader, nrrd medium model loading Three.js webgl example demonstrating loader, nrrd
105 104 webgl loader / obj webgl_loader_obj.html https://threejs.org/examples/webgl_loader_obj.html webgl, loader, obj medium model loading Three.js webgl example demonstrating loader, obj
106 105 webgl loader / pcd webgl_loader_pcd.html https://threejs.org/examples/webgl_loader_pcd.html webgl, loader, pcd medium model loading Three.js webgl example demonstrating loader, pcd
107 106 webgl loader / pdb webgl_loader_pdb.html https://threejs.org/examples/webgl_loader_pdb.html webgl, loader, pdb medium model loading Three.js webgl example demonstrating loader, pdb
108 107 webgl loader / ply webgl_loader_ply.html https://threejs.org/examples/webgl_loader_ply.html webgl, loader, ply medium model loading Three.js webgl example demonstrating loader, ply
109 108 webgl loader / stl webgl_loader_stl.html https://threejs.org/examples/webgl_loader_stl.html webgl, loader, stl medium model loading Three.js webgl example demonstrating loader, stl
110 109 webgl loader / svg webgl_loader_svg.html https://threejs.org/examples/webgl_loader_svg.html webgl, loader, svg medium model loading Three.js webgl example demonstrating loader, svg
111 110 webgl loader / texture / dds webgl_loader_texture_dds.html https://threejs.org/examples/webgl_loader_texture_dds.html webgl, loader, texture, dds medium model loading Three.js webgl example demonstrating loader, texture, dds
112 111 webgl loader / texture / exr webgl_loader_texture_exr.html https://threejs.org/examples/webgl_loader_texture_exr.html webgl, loader, texture, exr medium model loading; VR/AR experience Three.js webgl example demonstrating loader, texture, exr
113 112 webgl loader / texture / hdr webgl_loader_texture_hdr.html https://threejs.org/examples/webgl_loader_texture_hdr.html webgl, loader, texture, hdr medium model loading Three.js webgl example demonstrating loader, texture, hdr
114 113 webgl loader / texture / ktx webgl_loader_texture_ktx.html https://threejs.org/examples/webgl_loader_texture_ktx.html webgl, loader, texture, ktx medium model loading Three.js webgl example demonstrating loader, texture, ktx
115 114 webgl loader / texture / ktx2 webgl_loader_texture_ktx2.html https://threejs.org/examples/webgl_loader_texture_ktx2.html webgl, loader, texture, ktx2 medium model loading Three.js webgl example demonstrating loader, texture, ktx2
116 115 webgl loader / texture / lottie webgl_loader_texture_lottie.html https://threejs.org/examples/webgl_loader_texture_lottie.html webgl, loader, texture, lottie medium model loading Three.js webgl example demonstrating loader, texture, lottie
117 116 webgl loader / texture / pvrtc webgl_loader_texture_pvrtc.html https://threejs.org/examples/webgl_loader_texture_pvrtc.html webgl, loader, texture, pvrtc medium model loading; VR/AR experience Three.js webgl example demonstrating loader, texture, pvrtc
118 117 webgl loader / texture / rgbm webgl_loader_texture_rgbm.html https://threejs.org/examples/webgl_loader_texture_rgbm.html webgl, loader, texture, rgbm medium model loading Three.js webgl example demonstrating loader, texture, rgbm
119 118 webgl loader / texture / tga webgl_loader_texture_tga.html https://threejs.org/examples/webgl_loader_texture_tga.html webgl, loader, texture, tga medium model loading Three.js webgl example demonstrating loader, texture, tga
120 119 webgl loader / texture / tiff webgl_loader_texture_tiff.html https://threejs.org/examples/webgl_loader_texture_tiff.html webgl, loader, texture, tiff medium model loading Three.js webgl example demonstrating loader, texture, tiff
121 120 webgl loader / ttf webgl_loader_ttf.html https://threejs.org/examples/webgl_loader_ttf.html webgl, loader, ttf medium model loading Three.js webgl example demonstrating loader, ttf
122 121 webgl loader / usdz webgl_loader_usdz.html https://threejs.org/examples/webgl_loader_usdz.html webgl, loader, usdz medium model loading Three.js webgl example demonstrating loader, usdz
123 122 webgl loader / vox webgl_loader_vox.html https://threejs.org/examples/webgl_loader_vox.html webgl, loader, vox medium model loading Three.js webgl example demonstrating loader, vox
124 123 webgl loader / vrml webgl_loader_vrml.html https://threejs.org/examples/webgl_loader_vrml.html webgl, loader, vrml medium model loading; VR/AR experience Three.js webgl example demonstrating loader, vrml
125 124 webgl loader / vtk webgl_loader_vtk.html https://threejs.org/examples/webgl_loader_vtk.html webgl, loader, vtk medium model loading Three.js webgl example demonstrating loader, vtk
126 125 webgl loader / xyz webgl_loader_xyz.html https://threejs.org/examples/webgl_loader_xyz.html webgl, loader, xyz medium model loading Three.js webgl example demonstrating loader, xyz
127 126 webgl lod webgl_lod.html https://threejs.org/examples/webgl_lod.html webgl, lod medium 3D visualization Three.js webgl example demonstrating lod
128 127 webgl marchingcubes webgl_marchingcubes.html https://threejs.org/examples/webgl_marchingcubes.html webgl, marchingcubes medium VR/AR experience Three.js webgl example demonstrating marchingcubes
129 128 webgl materials / alphahash webgl_materials_alphahash.html https://threejs.org/examples/webgl_materials_alphahash.html webgl, materials, alphahash medium material effects Three.js webgl example demonstrating materials, alphahash
130 129 webgl materials / blending webgl_materials_blending.html https://threejs.org/examples/webgl_materials_blending.html webgl, materials, blending medium material effects Three.js webgl example demonstrating materials, blending
131 130 webgl materials / blending / custom webgl_materials_blending_custom.html https://threejs.org/examples/webgl_materials_blending_custom.html webgl, materials, blending, custom medium material effects Three.js webgl example demonstrating materials, blending, custom
132 131 webgl materials / bumpmap webgl_materials_bumpmap.html https://threejs.org/examples/webgl_materials_bumpmap.html webgl, materials, bumpmap medium material effects Three.js webgl example demonstrating materials, bumpmap
133 132 webgl materials / car webgl_materials_car.html https://threejs.org/examples/webgl_materials_car.html webgl, materials, car medium material effects; VR/AR experience Three.js webgl example demonstrating materials, car
134 133 webgl materials / channels webgl_materials_channels.html https://threejs.org/examples/webgl_materials_channels.html webgl, materials, channels medium material effects Three.js webgl example demonstrating materials, channels
135 134 webgl materials / cubemap webgl_materials_cubemap.html https://threejs.org/examples/webgl_materials_cubemap.html webgl, materials, cubemap medium material effects Three.js webgl example demonstrating materials, cubemap
136 135 webgl materials / cubemap / dynamic webgl_materials_cubemap_dynamic.html https://threejs.org/examples/webgl_materials_cubemap_dynamic.html webgl, materials, cubemap, dynamic medium material effects Three.js webgl example demonstrating materials, cubemap, dynamic
137 136 webgl materials / cubemap / refraction webgl_materials_cubemap_refraction.html https://threejs.org/examples/webgl_materials_cubemap_refraction.html webgl, materials, cubemap, refraction medium material effects Three.js webgl example demonstrating materials, cubemap, refraction
138 137 webgl materials / cubemap / mipmaps webgl_materials_cubemap_mipmaps.html https://threejs.org/examples/webgl_materials_cubemap_mipmaps.html webgl, materials, cubemap, mipmaps medium material effects Three.js webgl example demonstrating materials, cubemap, mipmaps
139 138 webgl materials / cubemap / render / to / mipmaps webgl_materials_cubemap_render_to_mipmaps.html https://threejs.org/examples/webgl_materials_cubemap_render_to_mipmaps.html webgl, materials, cubemap, render, to, mipmaps medium material effects Three.js webgl example demonstrating materials, cubemap, render, to, mipmaps
140 139 webgl materials / displacementmap webgl_materials_displacementmap.html https://threejs.org/examples/webgl_materials_displacementmap.html webgl, materials, displacementmap medium material effects Three.js webgl example demonstrating materials, displacementmap
141 140 webgl materials / envmaps webgl_materials_envmaps.html https://threejs.org/examples/webgl_materials_envmaps.html webgl, materials, envmaps medium material effects Three.js webgl example demonstrating materials, envmaps
142 141 webgl materials / envmaps / exr webgl_materials_envmaps_exr.html https://threejs.org/examples/webgl_materials_envmaps_exr.html webgl, materials, envmaps, exr medium material effects; VR/AR experience Three.js webgl example demonstrating materials, envmaps, exr
143 142 webgl materials / envmaps / groundprojected webgl_materials_envmaps_groundprojected.html https://threejs.org/examples/webgl_materials_envmaps_groundprojected.html webgl, materials, envmaps, groundprojected medium material effects Three.js webgl example demonstrating materials, envmaps, groundprojected
144 143 webgl materials / envmaps / hdr webgl_materials_envmaps_hdr.html https://threejs.org/examples/webgl_materials_envmaps_hdr.html webgl, materials, envmaps, hdr medium material effects Three.js webgl example demonstrating materials, envmaps, hdr
145 144 webgl materials / lightmap webgl_materials_lightmap.html https://threejs.org/examples/webgl_materials_lightmap.html webgl, materials, lightmap medium material effects Three.js webgl example demonstrating materials, lightmap
146 145 webgl materials / matcap webgl_materials_matcap.html https://threejs.org/examples/webgl_materials_matcap.html webgl, materials, matcap medium material effects Three.js webgl example demonstrating materials, matcap
147 146 webgl materials / normalmap webgl_materials_normalmap.html https://threejs.org/examples/webgl_materials_normalmap.html webgl, materials, normalmap medium material effects Three.js webgl example demonstrating materials, normalmap
148 147 webgl materials / normalmap / object / space webgl_materials_normalmap_object_space.html https://threejs.org/examples/webgl_materials_normalmap_object_space.html webgl, materials, normalmap, object, space medium material effects Three.js webgl example demonstrating materials, normalmap, object, space
149 148 webgl materials / physical / clearcoat webgl_materials_physical_clearcoat.html https://threejs.org/examples/webgl_materials_physical_clearcoat.html webgl, materials, physical, clearcoat medium material effects; VR/AR experience Three.js webgl example demonstrating materials, physical, clearcoat
150 149 webgl materials / physical / transmission webgl_materials_physical_transmission.html https://threejs.org/examples/webgl_materials_physical_transmission.html webgl, materials, physical, transmission medium material effects Three.js webgl example demonstrating materials, physical, transmission
151 150 webgl materials / physical / transmission / alpha webgl_materials_physical_transmission_alpha.html https://threejs.org/examples/webgl_materials_physical_transmission_alpha.html webgl, materials, physical, transmission, alpha medium material effects Three.js webgl example demonstrating materials, physical, transmission, alpha
152 151 webgl materials / subsurface / scattering webgl_materials_subsurface_scattering.html https://threejs.org/examples/webgl_materials_subsurface_scattering.html webgl, materials, subsurface, scattering medium material effects Three.js webgl example demonstrating materials, subsurface, scattering
153 152 webgl materials / texture / anisotropy webgl_materials_texture_anisotropy.html https://threejs.org/examples/webgl_materials_texture_anisotropy.html webgl, materials, texture, anisotropy medium material effects Three.js webgl example demonstrating materials, texture, anisotropy
154 153 webgl materials / texture / canvas webgl_materials_texture_canvas.html https://threejs.org/examples/webgl_materials_texture_canvas.html webgl, materials, texture, canvas medium material effects Three.js webgl example demonstrating materials, texture, canvas
155 154 webgl materials / texture / filters webgl_materials_texture_filters.html https://threejs.org/examples/webgl_materials_texture_filters.html webgl, materials, texture, filters medium material effects Three.js webgl example demonstrating materials, texture, filters
156 155 webgl materials / texture / manualmipmap webgl_materials_texture_manualmipmap.html https://threejs.org/examples/webgl_materials_texture_manualmipmap.html webgl, materials, texture, manualmipmap medium material effects Three.js webgl example demonstrating materials, texture, manualmipmap
157 156 webgl materials / texture / partialupdate webgl_materials_texture_partialupdate.html https://threejs.org/examples/webgl_materials_texture_partialupdate.html webgl, materials, texture, partialupdate medium material effects; VR/AR experience Three.js webgl example demonstrating materials, texture, partialupdate
158 157 webgl materials / texture / rotation webgl_materials_texture_rotation.html https://threejs.org/examples/webgl_materials_texture_rotation.html webgl, materials, texture, rotation medium material effects Three.js webgl example demonstrating materials, texture, rotation
159 158 webgl materials / toon webgl_materials_toon.html https://threejs.org/examples/webgl_materials_toon.html webgl, materials, toon medium material effects Three.js webgl example demonstrating materials, toon
160 159 webgl materials / video webgl_materials_video.html https://threejs.org/examples/webgl_materials_video.html webgl, materials, video medium material effects Three.js webgl example demonstrating materials, video
161 160 webgl materials / video / webcam webgl_materials_video_webcam.html https://threejs.org/examples/webgl_materials_video_webcam.html webgl, materials, video, webcam medium material effects Three.js webgl example demonstrating materials, video, webcam
162 161 webgl materials / wireframe webgl_materials_wireframe.html https://threejs.org/examples/webgl_materials_wireframe.html webgl, materials, wireframe medium material effects Three.js webgl example demonstrating materials, wireframe
163 162 webgl pmrem / cubemap webgl_pmrem_cubemap.html https://threejs.org/examples/webgl_pmrem_cubemap.html webgl, pmrem, cubemap medium 3D visualization Three.js webgl example demonstrating pmrem, cubemap
164 163 webgl pmrem / equirectangular webgl_pmrem_equirectangular.html https://threejs.org/examples/webgl_pmrem_equirectangular.html webgl, pmrem, equirectangular medium VR/AR experience Three.js webgl example demonstrating pmrem, equirectangular
165 164 webgl pmrem / test webgl_pmrem_test.html https://threejs.org/examples/webgl_pmrem_test.html webgl, pmrem, test medium 3D visualization Three.js webgl example demonstrating pmrem, test
166 165 webgl math / obb webgl_math_obb.html https://threejs.org/examples/webgl_math_obb.html webgl, math, obb medium 3D visualization Three.js webgl example demonstrating math, obb
167 166 webgl math / orientation / transform webgl_math_orientation_transform.html https://threejs.org/examples/webgl_math_orientation_transform.html webgl, math, orientation, transform medium 3D visualization Three.js webgl example demonstrating math, orientation, transform
168 167 webgl mesh / batch webgl_mesh_batch.html https://threejs.org/examples/webgl_mesh_batch.html webgl, mesh, batch medium 3D visualization Three.js webgl example demonstrating mesh, batch
169 168 webgl mirror webgl_mirror.html https://threejs.org/examples/webgl_mirror.html webgl, mirror medium 3D visualization Three.js webgl example demonstrating mirror
170 169 webgl modifier / curve webgl_modifier_curve.html https://threejs.org/examples/webgl_modifier_curve.html webgl, modifier, curve medium 3D visualization Three.js webgl example demonstrating modifier, curve
171 170 webgl modifier / curve / instanced webgl_modifier_curve_instanced.html https://threejs.org/examples/webgl_modifier_curve_instanced.html webgl, modifier, curve, instanced medium 3D visualization Three.js webgl example demonstrating modifier, curve, instanced
172 171 webgl modifier / edgesplit webgl_modifier_edgesplit.html https://threejs.org/examples/webgl_modifier_edgesplit.html webgl, modifier, edgesplit medium 3D visualization Three.js webgl example demonstrating modifier, edgesplit
173 172 webgl modifier / simplifier webgl_modifier_simplifier.html https://threejs.org/examples/webgl_modifier_simplifier.html webgl, modifier, simplifier medium 3D visualization Three.js webgl example demonstrating modifier, simplifier
174 173 webgl modifier / subdivision webgl_modifier_subdivision.html https://threejs.org/examples/webgl_modifier_subdivision.html webgl, modifier, subdivision medium 3D visualization Three.js webgl example demonstrating modifier, subdivision
175 174 webgl modifier / tessellation webgl_modifier_tessellation.html https://threejs.org/examples/webgl_modifier_tessellation.html webgl, modifier, tessellation medium 3D visualization Three.js webgl example demonstrating modifier, tessellation
176 175 webgl morphtargets webgl_morphtargets.html https://threejs.org/examples/webgl_morphtargets.html webgl, morphtargets medium VR/AR experience Three.js webgl example demonstrating morphtargets
177 176 webgl morphtargets / face webgl_morphtargets_face.html https://threejs.org/examples/webgl_morphtargets_face.html webgl, morphtargets, face medium VR/AR experience Three.js webgl example demonstrating morphtargets, face
178 177 webgl morphtargets / horse webgl_morphtargets_horse.html https://threejs.org/examples/webgl_morphtargets_horse.html webgl, morphtargets, horse medium VR/AR experience Three.js webgl example demonstrating morphtargets, horse
179 178 webgl morphtargets / sphere webgl_morphtargets_sphere.html https://threejs.org/examples/webgl_morphtargets_sphere.html webgl, morphtargets, sphere medium VR/AR experience Three.js webgl example demonstrating morphtargets, sphere
180 179 webgl morphtargets / webcam webgl_morphtargets_webcam.html https://threejs.org/examples/webgl_morphtargets_webcam.html webgl, morphtargets, webcam medium VR/AR experience Three.js webgl example demonstrating morphtargets, webcam
181 180 webgl multiple / elements webgl_multiple_elements.html https://threejs.org/examples/webgl_multiple_elements.html webgl, multiple, elements medium 3D visualization Three.js webgl example demonstrating multiple, elements
182 181 webgl multiple / elements / text webgl_multiple_elements_text.html https://threejs.org/examples/webgl_multiple_elements_text.html webgl, multiple, elements, text medium 3D visualization Three.js webgl example demonstrating multiple, elements, text
183 182 webgl multiple / scenes / comparison webgl_multiple_scenes_comparison.html https://threejs.org/examples/webgl_multiple_scenes_comparison.html webgl, multiple, scenes, comparison medium VR/AR experience Three.js webgl example demonstrating multiple, scenes, comparison
184 183 webgl multiple / views webgl_multiple_views.html https://threejs.org/examples/webgl_multiple_views.html webgl, multiple, views medium 3D visualization Three.js webgl example demonstrating multiple, views
185 184 webgl panorama / cube webgl_panorama_cube.html https://threejs.org/examples/webgl_panorama_cube.html webgl, panorama, cube medium 3D visualization Three.js webgl example demonstrating panorama, cube
186 185 webgl panorama / equirectangular webgl_panorama_equirectangular.html https://threejs.org/examples/webgl_panorama_equirectangular.html webgl, panorama, equirectangular medium VR/AR experience Three.js webgl example demonstrating panorama, equirectangular
187 186 webgl points / billboards webgl_points_billboards.html https://threejs.org/examples/webgl_points_billboards.html webgl, points, billboards medium VR/AR experience; particle effects Three.js webgl example demonstrating points, billboards
188 187 webgl points / dynamic webgl_points_dynamic.html https://threejs.org/examples/webgl_points_dynamic.html webgl, points, dynamic medium particle effects Three.js webgl example demonstrating points, dynamic
189 188 webgl points / sprites webgl_points_sprites.html https://threejs.org/examples/webgl_points_sprites.html webgl, points, sprites medium particle effects Three.js webgl example demonstrating points, sprites
190 189 webgl points / waves webgl_points_waves.html https://threejs.org/examples/webgl_points_waves.html webgl, points, waves medium particle effects Three.js webgl example demonstrating points, waves
191 190 webgl portal webgl_portal.html https://threejs.org/examples/webgl_portal.html webgl, portal medium 3D visualization Three.js webgl example demonstrating portal
192 191 webgl raycaster / bvh webgl_raycaster_bvh.html https://threejs.org/examples/webgl_raycaster_bvh.html webgl, raycaster, bvh medium user interaction Three.js webgl example demonstrating raycaster, bvh
193 192 webgl raycaster / sprite webgl_raycaster_sprite.html https://threejs.org/examples/webgl_raycaster_sprite.html webgl, raycaster, sprite medium user interaction Three.js webgl example demonstrating raycaster, sprite
194 193 webgl raycaster / texture webgl_raycaster_texture.html https://threejs.org/examples/webgl_raycaster_texture.html webgl, raycaster, texture medium user interaction Three.js webgl example demonstrating raycaster, texture
195 194 webgl read / float / buffer webgl_read_float_buffer.html https://threejs.org/examples/webgl_read_float_buffer.html webgl, read, float, buffer medium 3D visualization Three.js webgl example demonstrating read, float, buffer
196 195 webgl renderer / pathtracer webgl_renderer_pathtracer.html https://threejs.org/examples/webgl_renderer_pathtracer.html webgl, renderer, pathtracer medium 3D visualization Three.js webgl example demonstrating renderer, pathtracer
197 196 webgl refraction webgl_refraction.html https://threejs.org/examples/webgl_refraction.html webgl, refraction medium 3D visualization Three.js webgl example demonstrating refraction
198 197 webgl rtt webgl_rtt.html https://threejs.org/examples/webgl_rtt.html webgl, rtt medium 3D visualization Three.js webgl example demonstrating rtt
199 198 webgl shader webgl_shader.html https://threejs.org/examples/webgl_shader.html webgl, shader medium 3D visualization Three.js webgl example demonstrating shader
200 199 webgl shader / lava webgl_shader_lava.html https://threejs.org/examples/webgl_shader_lava.html webgl, shader, lava medium 3D visualization Three.js webgl example demonstrating shader, lava
201 200 webgl shaders / ocean webgl_shaders_ocean.html https://threejs.org/examples/webgl_shaders_ocean.html webgl, shaders, ocean medium 3D visualization Three.js webgl example demonstrating shaders, ocean
202 201 webgl shaders / sky webgl_shaders_sky.html https://threejs.org/examples/webgl_shaders_sky.html webgl, shaders, sky medium 3D visualization Three.js webgl example demonstrating shaders, sky
203 202 webgl shadow / contact webgl_shadow_contact.html https://threejs.org/examples/webgl_shadow_contact.html webgl, shadow, contact medium realistic lighting Three.js webgl example demonstrating shadow, contact
204 203 webgl shadowmap webgl_shadowmap.html https://threejs.org/examples/webgl_shadowmap.html webgl, shadowmap medium realistic lighting Three.js webgl example demonstrating shadowmap
205 204 webgl shadowmap / performance webgl_shadowmap_performance.html https://threejs.org/examples/webgl_shadowmap_performance.html webgl, shadowmap, performance medium realistic lighting Three.js webgl example demonstrating shadowmap, performance
206 205 webgl shadowmap / pointlight webgl_shadowmap_pointlight.html https://threejs.org/examples/webgl_shadowmap_pointlight.html webgl, shadowmap, pointlight medium realistic lighting Three.js webgl example demonstrating shadowmap, pointlight
207 206 webgl shadowmap / viewer webgl_shadowmap_viewer.html https://threejs.org/examples/webgl_shadowmap_viewer.html webgl, shadowmap, viewer medium realistic lighting Three.js webgl example demonstrating shadowmap, viewer
208 207 webgl shadowmap / vsm webgl_shadowmap_vsm.html https://threejs.org/examples/webgl_shadowmap_vsm.html webgl, shadowmap, vsm medium realistic lighting Three.js webgl example demonstrating shadowmap, vsm
209 208 webgl shadowmesh webgl_shadowmesh.html https://threejs.org/examples/webgl_shadowmesh.html webgl, shadowmesh medium realistic lighting Three.js webgl example demonstrating shadowmesh
210 209 webgl sprites webgl_sprites.html https://threejs.org/examples/webgl_sprites.html webgl, sprites medium 3D visualization Three.js webgl example demonstrating sprites
211 210 webgl test / memory webgl_test_memory.html https://threejs.org/examples/webgl_test_memory.html webgl, test, memory medium 3D visualization Three.js webgl example demonstrating test, memory
212 211 webgl test / memory2 webgl_test_memory2.html https://threejs.org/examples/webgl_test_memory2.html webgl, test, memory2 medium 3D visualization Three.js webgl example demonstrating test, memory2
213 212 webgl test / wide / gamut webgl_test_wide_gamut.html https://threejs.org/examples/webgl_test_wide_gamut.html webgl, test, wide, gamut medium 3D visualization Three.js webgl example demonstrating test, wide, gamut
214 213 webgl tonemapping webgl_tonemapping.html https://threejs.org/examples/webgl_tonemapping.html webgl, tonemapping medium 3D visualization Three.js webgl example demonstrating tonemapping
215 214 webgl video / kinect webgl_video_kinect.html https://threejs.org/examples/webgl_video_kinect.html webgl, video, kinect medium 3D visualization Three.js webgl example demonstrating video, kinect
216 215 webgl video / panorama / equirectangular webgl_video_panorama_equirectangular.html https://threejs.org/examples/webgl_video_panorama_equirectangular.html webgl, video, panorama, equirectangular medium VR/AR experience Three.js webgl example demonstrating video, panorama, equirectangular
217 216 webgl watch webgl_watch.html https://threejs.org/examples/webgl_watch.html webgl, watch medium 3D visualization Three.js webgl example demonstrating watch
218 217 webgl / postprocessing postprocessing webgl_postprocessing.html https://threejs.org/examples/webgl_postprocessing.html webgl, postprocessing medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing
219 218 webgl / postprocessing postprocessing / 3dlut webgl_postprocessing_3dlut.html https://threejs.org/examples/webgl_postprocessing_3dlut.html webgl, postprocessing, 3dlut medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, 3dlut
220 219 webgl / postprocessing postprocessing / advanced webgl_postprocessing_advanced.html https://threejs.org/examples/webgl_postprocessing_advanced.html webgl, postprocessing, advanced medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, advanced
221 220 webgl / postprocessing postprocessing / afterimage webgl_postprocessing_afterimage.html https://threejs.org/examples/webgl_postprocessing_afterimage.html webgl, postprocessing, afterimage medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, afterimage
222 221 webgl / postprocessing postprocessing / backgrounds webgl_postprocessing_backgrounds.html https://threejs.org/examples/webgl_postprocessing_backgrounds.html webgl, postprocessing, backgrounds medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, backgrounds
223 222 webgl / postprocessing postprocessing / transition webgl_postprocessing_transition.html https://threejs.org/examples/webgl_postprocessing_transition.html webgl, postprocessing, transition medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, transition
224 223 webgl / postprocessing postprocessing / dof webgl_postprocessing_dof.html https://threejs.org/examples/webgl_postprocessing_dof.html webgl, postprocessing, dof medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, dof
225 224 webgl / postprocessing postprocessing / dof2 webgl_postprocessing_dof2.html https://threejs.org/examples/webgl_postprocessing_dof2.html webgl, postprocessing, dof2 medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, dof2
226 225 webgl / postprocessing postprocessing / fxaa webgl_postprocessing_fxaa.html https://threejs.org/examples/webgl_postprocessing_fxaa.html webgl, postprocessing, fxaa medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, fxaa
227 226 webgl / postprocessing postprocessing / glitch webgl_postprocessing_glitch.html https://threejs.org/examples/webgl_postprocessing_glitch.html webgl, postprocessing, glitch medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, glitch
228 227 webgl / postprocessing postprocessing / godrays webgl_postprocessing_godrays.html https://threejs.org/examples/webgl_postprocessing_godrays.html webgl, postprocessing, godrays medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, godrays
229 228 webgl / postprocessing postprocessing / gtao webgl_postprocessing_gtao.html https://threejs.org/examples/webgl_postprocessing_gtao.html webgl, postprocessing, gtao medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, gtao
230 229 webgl / postprocessing postprocessing / rgb / halftone webgl_postprocessing_rgb_halftone.html https://threejs.org/examples/webgl_postprocessing_rgb_halftone.html webgl, postprocessing, rgb, halftone medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, rgb, halftone
231 230 webgl / postprocessing postprocessing / masking webgl_postprocessing_masking.html https://threejs.org/examples/webgl_postprocessing_masking.html webgl, postprocessing, masking medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, masking
232 231 webgl / postprocessing postprocessing / material / ao webgl_postprocessing_material_ao.html https://threejs.org/examples/webgl_postprocessing_material_ao.html webgl, postprocessing, material, ao medium material effects; visual effects Three.js webgl / postprocessing example demonstrating postprocessing, material, ao
233 232 webgl / postprocessing postprocessing / ssaa webgl_postprocessing_ssaa.html https://threejs.org/examples/webgl_postprocessing_ssaa.html webgl, postprocessing, ssaa medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, ssaa
234 233 webgl / postprocessing postprocessing / outline webgl_postprocessing_outline.html https://threejs.org/examples/webgl_postprocessing_outline.html webgl, postprocessing, outline medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, outline
235 234 webgl / postprocessing postprocessing / pixel webgl_postprocessing_pixel.html https://threejs.org/examples/webgl_postprocessing_pixel.html webgl, postprocessing, pixel medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, pixel
236 235 webgl / postprocessing postprocessing / procedural webgl_postprocessing_procedural.html https://threejs.org/examples/webgl_postprocessing_procedural.html webgl, postprocessing, procedural medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, procedural
237 236 webgl / postprocessing postprocessing / sao webgl_postprocessing_sao.html https://threejs.org/examples/webgl_postprocessing_sao.html webgl, postprocessing, sao medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, sao
238 237 webgl / postprocessing postprocessing / smaa webgl_postprocessing_smaa.html https://threejs.org/examples/webgl_postprocessing_smaa.html webgl, postprocessing, smaa medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, smaa
239 238 webgl / postprocessing postprocessing / sobel webgl_postprocessing_sobel.html https://threejs.org/examples/webgl_postprocessing_sobel.html webgl, postprocessing, sobel medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, sobel
240 239 webgl / postprocessing postprocessing / ssao webgl_postprocessing_ssao.html https://threejs.org/examples/webgl_postprocessing_ssao.html webgl, postprocessing, ssao medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, ssao
241 240 webgl / postprocessing postprocessing / ssr webgl_postprocessing_ssr.html https://threejs.org/examples/webgl_postprocessing_ssr.html webgl, postprocessing, ssr medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, ssr
242 241 webgl / postprocessing postprocessing / taa webgl_postprocessing_taa.html https://threejs.org/examples/webgl_postprocessing_taa.html webgl, postprocessing, taa medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, taa
243 242 webgl / postprocessing postprocessing / unreal / bloom webgl_postprocessing_unreal_bloom.html https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html webgl, postprocessing, unreal, bloom medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, unreal, bloom
244 243 webgl / postprocessing postprocessing / unreal / bloom / selective webgl_postprocessing_unreal_bloom_selective.html https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html webgl, postprocessing, unreal, bloom, selective medium visual effects Three.js webgl / postprocessing example demonstrating postprocessing, unreal, bloom, selective
245 244 webgl / advanced buffergeometry webgl_buffergeometry.html https://threejs.org/examples/webgl_buffergeometry.html webgl, buffergeometry high procedural generation Three.js webgl / advanced example demonstrating buffergeometry
246 245 webgl / advanced buffergeometry / attributes / integer webgl_buffergeometry_attributes_integer.html https://threejs.org/examples/webgl_buffergeometry_attributes_integer.html webgl, buffergeometry, attributes, integer high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, attributes, integer
247 246 webgl / advanced buffergeometry / attributes / none webgl_buffergeometry_attributes_none.html https://threejs.org/examples/webgl_buffergeometry_attributes_none.html webgl, buffergeometry, attributes, none high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, attributes, none
248 247 webgl / advanced buffergeometry / custom / attributes / particles webgl_buffergeometry_custom_attributes_particles.html https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html webgl, buffergeometry, custom, attributes, particles high VR/AR experience; particle effects; procedural generation Three.js webgl / advanced example demonstrating buffergeometry, custom, attributes, particles
249 248 webgl / advanced buffergeometry / drawrange webgl_buffergeometry_drawrange.html https://threejs.org/examples/webgl_buffergeometry_drawrange.html webgl, buffergeometry, drawrange high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, drawrange
250 249 webgl / advanced buffergeometry / glbufferattribute webgl_buffergeometry_glbufferattribute.html https://threejs.org/examples/webgl_buffergeometry_glbufferattribute.html webgl, buffergeometry, glbufferattribute high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, glbufferattribute
251 250 webgl / advanced buffergeometry / indexed webgl_buffergeometry_indexed.html https://threejs.org/examples/webgl_buffergeometry_indexed.html webgl, buffergeometry, indexed high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, indexed
252 251 webgl / advanced buffergeometry / instancing webgl_buffergeometry_instancing.html https://threejs.org/examples/webgl_buffergeometry_instancing.html webgl, buffergeometry, instancing high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, instancing
253 252 webgl / advanced buffergeometry / instancing / billboards webgl_buffergeometry_instancing_billboards.html https://threejs.org/examples/webgl_buffergeometry_instancing_billboards.html webgl, buffergeometry, instancing, billboards high VR/AR experience; procedural generation Three.js webgl / advanced example demonstrating buffergeometry, instancing, billboards
254 253 webgl / advanced buffergeometry / instancing / interleaved webgl_buffergeometry_instancing_interleaved.html https://threejs.org/examples/webgl_buffergeometry_instancing_interleaved.html webgl, buffergeometry, instancing, interleaved high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, instancing, interleaved
255 254 webgl / advanced buffergeometry / lines webgl_buffergeometry_lines.html https://threejs.org/examples/webgl_buffergeometry_lines.html webgl, buffergeometry, lines high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, lines
256 255 webgl / advanced buffergeometry / lines / indexed webgl_buffergeometry_lines_indexed.html https://threejs.org/examples/webgl_buffergeometry_lines_indexed.html webgl, buffergeometry, lines, indexed high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, lines, indexed
257 256 webgl / advanced buffergeometry / points webgl_buffergeometry_points.html https://threejs.org/examples/webgl_buffergeometry_points.html webgl, buffergeometry, points high particle effects; procedural generation Three.js webgl / advanced example demonstrating buffergeometry, points
258 257 webgl / advanced buffergeometry / points / interleaved webgl_buffergeometry_points_interleaved.html https://threejs.org/examples/webgl_buffergeometry_points_interleaved.html webgl, buffergeometry, points, interleaved high particle effects; procedural generation Three.js webgl / advanced example demonstrating buffergeometry, points, interleaved
259 258 webgl / advanced buffergeometry / rawshader webgl_buffergeometry_rawshader.html https://threejs.org/examples/webgl_buffergeometry_rawshader.html webgl, buffergeometry, rawshader high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, rawshader
260 259 webgl / advanced buffergeometry / selective / draw webgl_buffergeometry_selective_draw.html https://threejs.org/examples/webgl_buffergeometry_selective_draw.html webgl, buffergeometry, selective, draw high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, selective, draw
261 260 webgl / advanced buffergeometry / uint webgl_buffergeometry_uint.html https://threejs.org/examples/webgl_buffergeometry_uint.html webgl, buffergeometry, uint high procedural generation Three.js webgl / advanced example demonstrating buffergeometry, uint
262 261 webgl / advanced clipculldistance webgl_clipculldistance.html https://threejs.org/examples/webgl_clipculldistance.html webgl, clipculldistance high 3D visualization Three.js webgl / advanced example demonstrating clipculldistance
263 262 webgl / advanced custom / attributes webgl_custom_attributes.html https://threejs.org/examples/webgl_custom_attributes.html webgl, custom, attributes high 3D visualization Three.js webgl / advanced example demonstrating custom, attributes
264 263 webgl / advanced custom / attributes / lines webgl_custom_attributes_lines.html https://threejs.org/examples/webgl_custom_attributes_lines.html webgl, custom, attributes, lines high 3D visualization Three.js webgl / advanced example demonstrating custom, attributes, lines
265 264 webgl / advanced custom / attributes / points webgl_custom_attributes_points.html https://threejs.org/examples/webgl_custom_attributes_points.html webgl, custom, attributes, points high particle effects Three.js webgl / advanced example demonstrating custom, attributes, points
266 265 webgl / advanced custom / attributes / points2 webgl_custom_attributes_points2.html https://threejs.org/examples/webgl_custom_attributes_points2.html webgl, custom, attributes, points2 high particle effects Three.js webgl / advanced example demonstrating custom, attributes, points2
267 266 webgl / advanced custom / attributes / points3 webgl_custom_attributes_points3.html https://threejs.org/examples/webgl_custom_attributes_points3.html webgl, custom, attributes, points3 high particle effects Three.js webgl / advanced example demonstrating custom, attributes, points3
268 267 webgl / advanced gpgpu / birds webgl_gpgpu_birds.html https://threejs.org/examples/webgl_gpgpu_birds.html webgl, gpgpu, birds high 3D visualization Three.js webgl / advanced example demonstrating gpgpu, birds
269 268 webgl / advanced gpgpu / birds / gltf webgl_gpgpu_birds_gltf.html https://threejs.org/examples/webgl_gpgpu_birds_gltf.html webgl, gpgpu, birds, gltf high 3D visualization Three.js webgl / advanced example demonstrating gpgpu, birds, gltf
270 269 webgl / advanced gpgpu / water webgl_gpgpu_water.html https://threejs.org/examples/webgl_gpgpu_water.html webgl, gpgpu, water high 3D visualization Three.js webgl / advanced example demonstrating gpgpu, water
271 270 webgl / advanced gpgpu / protoplanet webgl_gpgpu_protoplanet.html https://threejs.org/examples/webgl_gpgpu_protoplanet.html webgl, gpgpu, protoplanet high 3D visualization Three.js webgl / advanced example demonstrating gpgpu, protoplanet
272 271 webgl / advanced materials / modified webgl_materials_modified.html https://threejs.org/examples/webgl_materials_modified.html webgl, materials, modified high material effects Three.js webgl / advanced example demonstrating materials, modified
273 272 webgl / advanced multiple / rendertargets webgl_multiple_rendertargets.html https://threejs.org/examples/webgl_multiple_rendertargets.html webgl, multiple, rendertargets high VR/AR experience Three.js webgl / advanced example demonstrating multiple, rendertargets
274 273 webgl / advanced multisampled / renderbuffers webgl_multisampled_renderbuffers.html https://threejs.org/examples/webgl_multisampled_renderbuffers.html webgl, multisampled, renderbuffers high 3D visualization Three.js webgl / advanced example demonstrating multisampled, renderbuffers
275 274 webgl / advanced rendertarget / texture2darray webgl_rendertarget_texture2darray.html https://threejs.org/examples/webgl_rendertarget_texture2darray.html webgl, rendertarget, texture2darray high VR/AR experience Three.js webgl / advanced example demonstrating rendertarget, texture2darray
276 275 webgl / advanced reversed / depth / buffer webgl_reversed_depth_buffer.html https://threejs.org/examples/webgl_reversed_depth_buffer.html webgl, reversed, depth, buffer high 3D visualization Three.js webgl / advanced example demonstrating reversed, depth, buffer
277 276 webgl / advanced shadowmap / csm webgl_shadowmap_csm.html https://threejs.org/examples/webgl_shadowmap_csm.html webgl, shadowmap, csm high realistic lighting Three.js webgl / advanced example demonstrating shadowmap, csm
278 277 webgl / advanced shadowmap / pcss webgl_shadowmap_pcss.html https://threejs.org/examples/webgl_shadowmap_pcss.html webgl, shadowmap, pcss high realistic lighting Three.js webgl / advanced example demonstrating shadowmap, pcss
279 278 webgl / advanced shadowmap / progressive webgl_shadowmap_progressive.html https://threejs.org/examples/webgl_shadowmap_progressive.html webgl, shadowmap, progressive high realistic lighting Three.js webgl / advanced example demonstrating shadowmap, progressive
280 279 webgl / advanced simple / gi webgl_simple_gi.html https://threejs.org/examples/webgl_simple_gi.html webgl, simple, gi high 3D visualization Three.js webgl / advanced example demonstrating simple, gi
281 280 webgl / advanced texture2darray webgl_texture2darray.html https://threejs.org/examples/webgl_texture2darray.html webgl, texture2darray high VR/AR experience Three.js webgl / advanced example demonstrating texture2darray
282 281 webgl / advanced texture2darray / compressed webgl_texture2darray_compressed.html https://threejs.org/examples/webgl_texture2darray_compressed.html webgl, texture2darray, compressed high VR/AR experience Three.js webgl / advanced example demonstrating texture2darray, compressed
283 282 webgl / advanced texture2darray / layerupdate webgl_texture2darray_layerupdate.html https://threejs.org/examples/webgl_texture2darray_layerupdate.html webgl, texture2darray, layerupdate high VR/AR experience Three.js webgl / advanced example demonstrating texture2darray, layerupdate
284 283 webgl / advanced texture3d webgl_texture3d.html https://threejs.org/examples/webgl_texture3d.html webgl, texture3d high 3D visualization Three.js webgl / advanced example demonstrating texture3d
285 284 webgl / advanced texture3d / partialupdate webgl_texture3d_partialupdate.html https://threejs.org/examples/webgl_texture3d_partialupdate.html webgl, texture3d, partialupdate high VR/AR experience Three.js webgl / advanced example demonstrating texture3d, partialupdate
286 285 webgl / advanced ubo webgl_ubo.html https://threejs.org/examples/webgl_ubo.html webgl, ubo high 3D visualization Three.js webgl / advanced example demonstrating ubo
287 286 webgl / advanced ubo / arrays webgl_ubo_arrays.html https://threejs.org/examples/webgl_ubo_arrays.html webgl, ubo, arrays high VR/AR experience Three.js webgl / advanced example demonstrating ubo, arrays
288 287 webgl / advanced volume / cloud webgl_volume_cloud.html https://threejs.org/examples/webgl_volume_cloud.html webgl, volume, cloud high 3D visualization Three.js webgl / advanced example demonstrating volume, cloud
289 288 webgl / advanced volume / instancing webgl_volume_instancing.html https://threejs.org/examples/webgl_volume_instancing.html webgl, volume, instancing high 3D visualization Three.js webgl / advanced example demonstrating volume, instancing
290 289 webgl / advanced volume / perlin webgl_volume_perlin.html https://threejs.org/examples/webgl_volume_perlin.html webgl, volume, perlin high 3D visualization Three.js webgl / advanced example demonstrating volume, perlin
291 290 webgl / advanced worker / offscreencanvas webgl_worker_offscreencanvas.html https://threejs.org/examples/webgl_worker_offscreencanvas.html webgl, worker, offscreencanvas high 3D visualization Three.js webgl / advanced example demonstrating worker, offscreencanvas
292 291 webgl / advanced performance webgl_performance.html https://threejs.org/examples/webgl_performance.html webgl, performance high 3D visualization Three.js webgl / advanced example demonstrating performance
293 292 webgpu (wip) animation / retargeting webgpu_animation_retargeting.html https://threejs.org/examples/webgpu_animation_retargeting.html webgpu, animation, retargeting medium character animation; VR/AR experience Three.js webgpu (wip) example demonstrating animation, retargeting
294 293 webgpu (wip) animation / retargeting / readyplayer webgpu_animation_retargeting_readyplayer.html https://threejs.org/examples/webgpu_animation_retargeting_readyplayer.html webgpu, animation, retargeting, readyplayer medium character animation; VR/AR experience Three.js webgpu (wip) example demonstrating animation, retargeting, readyplayer
295 294 webgpu (wip) backdrop webgpu_backdrop.html https://threejs.org/examples/webgpu_backdrop.html webgpu, backdrop medium 3D visualization Three.js webgpu (wip) example demonstrating backdrop
296 295 webgpu (wip) backdrop / area webgpu_backdrop_area.html https://threejs.org/examples/webgpu_backdrop_area.html webgpu, backdrop, area medium VR/AR experience Three.js webgpu (wip) example demonstrating backdrop, area
297 296 webgpu (wip) backdrop / water webgpu_backdrop_water.html https://threejs.org/examples/webgpu_backdrop_water.html webgpu, backdrop, water medium 3D visualization Three.js webgpu (wip) example demonstrating backdrop, water
298 297 webgpu (wip) camera webgpu_camera.html https://threejs.org/examples/webgpu_camera.html webgpu, camera medium 3D visualization Three.js webgpu (wip) example demonstrating camera
299 298 webgpu (wip) camera / array webgpu_camera_array.html https://threejs.org/examples/webgpu_camera_array.html webgpu, camera, array medium VR/AR experience Three.js webgpu (wip) example demonstrating camera, array
300 299 webgpu (wip) camera / logarithmicdepthbuffer webgpu_camera_logarithmicdepthbuffer.html https://threejs.org/examples/webgpu_camera_logarithmicdepthbuffer.html webgpu, camera, logarithmicdepthbuffer medium VR/AR experience Three.js webgpu (wip) example demonstrating camera, logarithmicdepthbuffer
301 300 webgpu (wip) caustics webgpu_caustics.html https://threejs.org/examples/webgpu_caustics.html webgpu, caustics medium 3D visualization Three.js webgpu (wip) example demonstrating caustics
302 301 webgpu (wip) centroid / sampling webgpu_centroid_sampling.html https://threejs.org/examples/webgpu_centroid_sampling.html webgpu, centroid, sampling medium 3D visualization Three.js webgpu (wip) example demonstrating centroid, sampling
303 302 webgpu (wip) clearcoat webgpu_clearcoat.html https://threejs.org/examples/webgpu_clearcoat.html webgpu, clearcoat medium VR/AR experience Three.js webgpu (wip) example demonstrating clearcoat
304 303 webgpu (wip) clipping webgpu_clipping.html https://threejs.org/examples/webgpu_clipping.html webgpu, clipping medium 3D visualization Three.js webgpu (wip) example demonstrating clipping
305 304 webgpu (wip) compute / audio webgpu_compute_audio.html https://threejs.org/examples/webgpu_compute_audio.html webgpu, compute, audio high GPU compute Three.js webgpu (wip) example demonstrating compute, audio
306 305 webgpu (wip) compute / birds webgpu_compute_birds.html https://threejs.org/examples/webgpu_compute_birds.html webgpu, compute, birds high GPU compute Three.js webgpu (wip) example demonstrating compute, birds
307 306 webgpu (wip) compute / cloth webgpu_compute_cloth.html https://threejs.org/examples/webgpu_compute_cloth.html webgpu, compute, cloth high GPU compute Three.js webgpu (wip) example demonstrating compute, cloth
308 307 webgpu (wip) compute / geometry webgpu_compute_geometry.html https://threejs.org/examples/webgpu_compute_geometry.html webgpu, compute, geometry high procedural generation; GPU compute Three.js webgpu (wip) example demonstrating compute, geometry
309 308 webgpu (wip) compute / particles webgpu_compute_particles.html https://threejs.org/examples/webgpu_compute_particles.html webgpu, compute, particles high VR/AR experience; particle effects; GPU compute Three.js webgpu (wip) example demonstrating compute, particles
310 309 webgpu (wip) compute / particles / fluid webgpu_compute_particles_fluid.html https://threejs.org/examples/webgpu_compute_particles_fluid.html webgpu, compute, particles, fluid high VR/AR experience; particle effects; GPU compute Three.js webgpu (wip) example demonstrating compute, particles, fluid
311 310 webgpu (wip) compute / particles / rain webgpu_compute_particles_rain.html https://threejs.org/examples/webgpu_compute_particles_rain.html webgpu, compute, particles, rain high VR/AR experience; particle effects; GPU compute Three.js webgpu (wip) example demonstrating compute, particles, rain
312 311 webgpu (wip) compute / particles / snow webgpu_compute_particles_snow.html https://threejs.org/examples/webgpu_compute_particles_snow.html webgpu, compute, particles, snow high VR/AR experience; particle effects; GPU compute Three.js webgpu (wip) example demonstrating compute, particles, snow
313 312 webgpu (wip) compute / points webgpu_compute_points.html https://threejs.org/examples/webgpu_compute_points.html webgpu, compute, points high particle effects; GPU compute Three.js webgpu (wip) example demonstrating compute, points
314 313 webgpu (wip) compute / reduce webgpu_compute_reduce.html https://threejs.org/examples/webgpu_compute_reduce.html webgpu, compute, reduce high GPU compute Three.js webgpu (wip) example demonstrating compute, reduce
315 314 webgpu (wip) compute / sort / bitonic webgpu_compute_sort_bitonic.html https://threejs.org/examples/webgpu_compute_sort_bitonic.html webgpu, compute, sort, bitonic high GPU compute Three.js webgpu (wip) example demonstrating compute, sort, bitonic
316 315 webgpu (wip) compute / texture webgpu_compute_texture.html https://threejs.org/examples/webgpu_compute_texture.html webgpu, compute, texture high GPU compute Three.js webgpu (wip) example demonstrating compute, texture
317 316 webgpu (wip) compute / texture / 3d webgpu_compute_texture_3d.html https://threejs.org/examples/webgpu_compute_texture_3d.html webgpu, compute, texture, 3d high GPU compute Three.js webgpu (wip) example demonstrating compute, texture, 3d
318 317 webgpu (wip) compute / texture / pingpong webgpu_compute_texture_pingpong.html https://threejs.org/examples/webgpu_compute_texture_pingpong.html webgpu, compute, texture, pingpong high GPU compute Three.js webgpu (wip) example demonstrating compute, texture, pingpong
319 318 webgpu (wip) compute / water webgpu_compute_water.html https://threejs.org/examples/webgpu_compute_water.html webgpu, compute, water high GPU compute Three.js webgpu (wip) example demonstrating compute, water
320 319 webgpu (wip) cubemap / adjustments webgpu_cubemap_adjustments.html https://threejs.org/examples/webgpu_cubemap_adjustments.html webgpu, cubemap, adjustments medium 3D visualization Three.js webgpu (wip) example demonstrating cubemap, adjustments
321 320 webgpu (wip) cubemap / dynamic webgpu_cubemap_dynamic.html https://threejs.org/examples/webgpu_cubemap_dynamic.html webgpu, cubemap, dynamic medium 3D visualization Three.js webgpu (wip) example demonstrating cubemap, dynamic
322 321 webgpu (wip) cubemap / mix webgpu_cubemap_mix.html https://threejs.org/examples/webgpu_cubemap_mix.html webgpu, cubemap, mix medium 3D visualization Three.js webgpu (wip) example demonstrating cubemap, mix
323 322 webgpu (wip) custom / fog webgpu_custom_fog.html https://threejs.org/examples/webgpu_custom_fog.html webgpu, custom, fog medium 3D visualization Three.js webgpu (wip) example demonstrating custom, fog
324 323 webgpu (wip) custom / fog / background webgpu_custom_fog_background.html https://threejs.org/examples/webgpu_custom_fog_background.html webgpu, custom, fog, background medium 3D visualization Three.js webgpu (wip) example demonstrating custom, fog, background
325 324 webgpu (wip) depth / texture webgpu_depth_texture.html https://threejs.org/examples/webgpu_depth_texture.html webgpu, depth, texture medium 3D visualization Three.js webgpu (wip) example demonstrating depth, texture
326 325 webgpu (wip) display / stereo webgpu_display_stereo.html https://threejs.org/examples/webgpu_display_stereo.html webgpu, display, stereo medium 3D visualization Three.js webgpu (wip) example demonstrating display, stereo
327 326 webgpu (wip) equirectangular webgpu_equirectangular.html https://threejs.org/examples/webgpu_equirectangular.html webgpu, equirectangular medium VR/AR experience Three.js webgpu (wip) example demonstrating equirectangular
328 327 webgpu (wip) hdr webgpu_hdr.html https://threejs.org/examples/webgpu_hdr.html webgpu, hdr medium 3D visualization Three.js webgpu (wip) example demonstrating hdr
329 328 webgpu (wip) instance / mesh webgpu_instance_mesh.html https://threejs.org/examples/webgpu_instance_mesh.html webgpu, instance, mesh medium 3D visualization Three.js webgpu (wip) example demonstrating instance, mesh
330 329 webgpu (wip) instance / path webgpu_instance_path.html https://threejs.org/examples/webgpu_instance_path.html webgpu, instance, path medium 3D visualization Three.js webgpu (wip) example demonstrating instance, path
331 330 webgpu (wip) instance / points webgpu_instance_points.html https://threejs.org/examples/webgpu_instance_points.html webgpu, instance, points medium particle effects Three.js webgpu (wip) example demonstrating instance, points
332 331 webgpu (wip) instance / sprites webgpu_instance_sprites.html https://threejs.org/examples/webgpu_instance_sprites.html webgpu, instance, sprites medium 3D visualization Three.js webgpu (wip) example demonstrating instance, sprites
333 332 webgpu (wip) instance / uniform webgpu_instance_uniform.html https://threejs.org/examples/webgpu_instance_uniform.html webgpu, instance, uniform medium 3D visualization Three.js webgpu (wip) example demonstrating instance, uniform
334 333 webgpu (wip) instancing / morph webgpu_instancing_morph.html https://threejs.org/examples/webgpu_instancing_morph.html webgpu, instancing, morph medium 3D visualization Three.js webgpu (wip) example demonstrating instancing, morph
335 334 webgpu (wip) layers webgpu_layers.html https://threejs.org/examples/webgpu_layers.html webgpu, layers medium 3D visualization Three.js webgpu (wip) example demonstrating layers
336 335 webgpu (wip) lensflares webgpu_lensflares.html https://threejs.org/examples/webgpu_lensflares.html webgpu, lensflares medium VR/AR experience Three.js webgpu (wip) example demonstrating lensflares
337 336 webgpu (wip) lightprobe webgpu_lightprobe.html https://threejs.org/examples/webgpu_lightprobe.html webgpu, lightprobe medium 3D visualization Three.js webgpu (wip) example demonstrating lightprobe
338 337 webgpu (wip) lightprobe / cubecamera webgpu_lightprobe_cubecamera.html https://threejs.org/examples/webgpu_lightprobe_cubecamera.html webgpu, lightprobe, cubecamera medium 3D visualization Three.js webgpu (wip) example demonstrating lightprobe, cubecamera
339 338 webgpu (wip) lights / custom webgpu_lights_custom.html https://threejs.org/examples/webgpu_lights_custom.html webgpu, lights, custom medium 3D visualization Three.js webgpu (wip) example demonstrating lights, custom
340 339 webgpu (wip) lights / ies / spotlight webgpu_lights_ies_spotlight.html https://threejs.org/examples/webgpu_lights_ies_spotlight.html webgpu, lights, ies, spotlight medium 3D visualization Three.js webgpu (wip) example demonstrating lights, ies, spotlight
341 340 webgpu (wip) lights / phong webgpu_lights_phong.html https://threejs.org/examples/webgpu_lights_phong.html webgpu, lights, phong medium 3D visualization Three.js webgpu (wip) example demonstrating lights, phong
342 341 webgpu (wip) lights / physical webgpu_lights_physical.html https://threejs.org/examples/webgpu_lights_physical.html webgpu, lights, physical medium 3D visualization Three.js webgpu (wip) example demonstrating lights, physical
343 342 webgpu (wip) lights / pointlights webgpu_lights_pointlights.html https://threejs.org/examples/webgpu_lights_pointlights.html webgpu, lights, pointlights medium 3D visualization Three.js webgpu (wip) example demonstrating lights, pointlights
344 343 webgpu (wip) lights / projector webgpu_lights_projector.html https://threejs.org/examples/webgpu_lights_projector.html webgpu, lights, projector medium 3D visualization Three.js webgpu (wip) example demonstrating lights, projector
345 344 webgpu (wip) lights / rectarealight webgpu_lights_rectarealight.html https://threejs.org/examples/webgpu_lights_rectarealight.html webgpu, lights, rectarealight medium VR/AR experience Three.js webgpu (wip) example demonstrating lights, rectarealight
346 345 webgpu (wip) lights / selective webgpu_lights_selective.html https://threejs.org/examples/webgpu_lights_selective.html webgpu, lights, selective medium 3D visualization Three.js webgpu (wip) example demonstrating lights, selective
347 346 webgpu (wip) lights / spotlight webgpu_lights_spotlight.html https://threejs.org/examples/webgpu_lights_spotlight.html webgpu, lights, spotlight medium 3D visualization Three.js webgpu (wip) example demonstrating lights, spotlight
348 347 webgpu (wip) lights / tiled webgpu_lights_tiled.html https://threejs.org/examples/webgpu_lights_tiled.html webgpu, lights, tiled medium 3D visualization Three.js webgpu (wip) example demonstrating lights, tiled
349 348 webgpu (wip) lines / fat webgpu_lines_fat.html https://threejs.org/examples/webgpu_lines_fat.html webgpu, lines, fat medium 3D visualization Three.js webgpu (wip) example demonstrating lines, fat
350 349 webgpu (wip) lines / fat / raycasting webgpu_lines_fat_raycasting.html https://threejs.org/examples/webgpu_lines_fat_raycasting.html webgpu, lines, fat, raycasting medium 3D visualization Three.js webgpu (wip) example demonstrating lines, fat, raycasting
351 350 webgpu (wip) lines / fat / wireframe webgpu_lines_fat_wireframe.html https://threejs.org/examples/webgpu_lines_fat_wireframe.html webgpu, lines, fat, wireframe medium 3D visualization Three.js webgpu (wip) example demonstrating lines, fat, wireframe
352 351 webgpu (wip) loader / gltf webgpu_loader_gltf.html https://threejs.org/examples/webgpu_loader_gltf.html webgpu, loader, gltf medium model loading Three.js webgpu (wip) example demonstrating loader, gltf
353 352 webgpu (wip) loader / gltf / anisotropy webgpu_loader_gltf_anisotropy.html https://threejs.org/examples/webgpu_loader_gltf_anisotropy.html webgpu, loader, gltf, anisotropy medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, anisotropy
354 353 webgpu (wip) loader / gltf / compressed webgpu_loader_gltf_compressed.html https://threejs.org/examples/webgpu_loader_gltf_compressed.html webgpu, loader, gltf, compressed medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, compressed
355 354 webgpu (wip) loader / gltf / dispersion webgpu_loader_gltf_dispersion.html https://threejs.org/examples/webgpu_loader_gltf_dispersion.html webgpu, loader, gltf, dispersion medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, dispersion
356 355 webgpu (wip) loader / gltf / iridescence webgpu_loader_gltf_iridescence.html https://threejs.org/examples/webgpu_loader_gltf_iridescence.html webgpu, loader, gltf, iridescence medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, iridescence
357 356 webgpu (wip) loader / gltf / sheen webgpu_loader_gltf_sheen.html https://threejs.org/examples/webgpu_loader_gltf_sheen.html webgpu, loader, gltf, sheen medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, sheen
358 357 webgpu (wip) loader / gltf / transmission webgpu_loader_gltf_transmission.html https://threejs.org/examples/webgpu_loader_gltf_transmission.html webgpu, loader, gltf, transmission medium model loading Three.js webgpu (wip) example demonstrating loader, gltf, transmission
359 358 webgpu (wip) loader / materialx webgpu_loader_materialx.html https://threejs.org/examples/webgpu_loader_materialx.html webgpu, loader, materialx medium model loading; material effects Three.js webgpu (wip) example demonstrating loader, materialx
360 359 webgpu (wip) loader / texture / ktx2 webgpu_loader_texture_ktx2.html https://threejs.org/examples/webgpu_loader_texture_ktx2.html webgpu, loader, texture, ktx2 medium model loading Three.js webgpu (wip) example demonstrating loader, texture, ktx2
361 360 webgpu (wip) materials webgpu_materials.html https://threejs.org/examples/webgpu_materials.html webgpu, materials medium material effects Three.js webgpu (wip) example demonstrating materials
362 361 webgpu (wip) materials / alphahash webgpu_materials_alphahash.html https://threejs.org/examples/webgpu_materials_alphahash.html webgpu, materials, alphahash medium material effects Three.js webgpu (wip) example demonstrating materials, alphahash
363 362 webgpu (wip) materials / arrays webgpu_materials_arrays.html https://threejs.org/examples/webgpu_materials_arrays.html webgpu, materials, arrays medium material effects; VR/AR experience Three.js webgpu (wip) example demonstrating materials, arrays
364 363 webgpu (wip) materials / basic webgpu_materials_basic.html https://threejs.org/examples/webgpu_materials_basic.html webgpu, materials, basic low material effects Three.js webgpu (wip) example demonstrating materials, basic
365 364 webgpu (wip) materials / cubemap / mipmaps webgpu_materials_cubemap_mipmaps.html https://threejs.org/examples/webgpu_materials_cubemap_mipmaps.html webgpu, materials, cubemap, mipmaps medium material effects Three.js webgpu (wip) example demonstrating materials, cubemap, mipmaps
366 365 webgpu (wip) materials / displacementmap webgpu_materials_displacementmap.html https://threejs.org/examples/webgpu_materials_displacementmap.html webgpu, materials, displacementmap medium material effects Three.js webgpu (wip) example demonstrating materials, displacementmap
367 366 webgpu (wip) materials / envmaps / bpcem webgpu_materials_envmaps_bpcem.html https://threejs.org/examples/webgpu_materials_envmaps_bpcem.html webgpu, materials, envmaps, bpcem medium material effects Three.js webgpu (wip) example demonstrating materials, envmaps, bpcem
368 367 webgpu (wip) materials / envmaps webgpu_materials_envmaps.html https://threejs.org/examples/webgpu_materials_envmaps.html webgpu, materials, envmaps medium material effects Three.js webgpu (wip) example demonstrating materials, envmaps
369 368 webgpu (wip) materials / lightmap webgpu_materials_lightmap.html https://threejs.org/examples/webgpu_materials_lightmap.html webgpu, materials, lightmap medium material effects Three.js webgpu (wip) example demonstrating materials, lightmap
370 369 webgpu (wip) materials / matcap webgpu_materials_matcap.html https://threejs.org/examples/webgpu_materials_matcap.html webgpu, materials, matcap medium material effects Three.js webgpu (wip) example demonstrating materials, matcap
371 370 webgpu (wip) materials / sss webgpu_materials_sss.html https://threejs.org/examples/webgpu_materials_sss.html webgpu, materials, sss medium material effects Three.js webgpu (wip) example demonstrating materials, sss
372 371 webgpu (wip) materials / texture / manualmipmap webgpu_materials_texture_manualmipmap.html https://threejs.org/examples/webgpu_materials_texture_manualmipmap.html webgpu, materials, texture, manualmipmap medium material effects Three.js webgpu (wip) example demonstrating materials, texture, manualmipmap
373 372 webgpu (wip) materials / transmission webgpu_materials_transmission.html https://threejs.org/examples/webgpu_materials_transmission.html webgpu, materials, transmission medium material effects Three.js webgpu (wip) example demonstrating materials, transmission
374 373 webgpu (wip) materials / toon webgpu_materials_toon.html https://threejs.org/examples/webgpu_materials_toon.html webgpu, materials, toon medium material effects Three.js webgpu (wip) example demonstrating materials, toon
375 374 webgpu (wip) materials / video webgpu_materials_video.html https://threejs.org/examples/webgpu_materials_video.html webgpu, materials, video medium material effects Three.js webgpu (wip) example demonstrating materials, video
376 375 webgpu (wip) materialx / noise webgpu_materialx_noise.html https://threejs.org/examples/webgpu_materialx_noise.html webgpu, materialx, noise medium material effects Three.js webgpu (wip) example demonstrating materialx, noise
377 376 webgpu (wip) mesh / batch webgpu_mesh_batch.html https://threejs.org/examples/webgpu_mesh_batch.html webgpu, mesh, batch medium 3D visualization Three.js webgpu (wip) example demonstrating mesh, batch
378 377 webgpu (wip) mirror webgpu_mirror.html https://threejs.org/examples/webgpu_mirror.html webgpu, mirror medium 3D visualization Three.js webgpu (wip) example demonstrating mirror
379 378 webgpu (wip) modifier / curve webgpu_modifier_curve.html https://threejs.org/examples/webgpu_modifier_curve.html webgpu, modifier, curve medium 3D visualization Three.js webgpu (wip) example demonstrating modifier, curve
380 379 webgpu (wip) morphtargets webgpu_morphtargets.html https://threejs.org/examples/webgpu_morphtargets.html webgpu, morphtargets medium VR/AR experience Three.js webgpu (wip) example demonstrating morphtargets
381 380 webgpu (wip) morphtargets / face webgpu_morphtargets_face.html https://threejs.org/examples/webgpu_morphtargets_face.html webgpu, morphtargets, face medium VR/AR experience Three.js webgpu (wip) example demonstrating morphtargets, face
382 381 webgpu (wip) mrt webgpu_mrt.html https://threejs.org/examples/webgpu_mrt.html webgpu, mrt medium 3D visualization Three.js webgpu (wip) example demonstrating mrt
383 382 webgpu (wip) mrt / mask webgpu_mrt_mask.html https://threejs.org/examples/webgpu_mrt_mask.html webgpu, mrt, mask medium 3D visualization Three.js webgpu (wip) example demonstrating mrt, mask
384 383 webgpu (wip) multiple / canvas webgpu_multiple_canvas.html https://threejs.org/examples/webgpu_multiple_canvas.html webgpu, multiple, canvas medium 3D visualization Three.js webgpu (wip) example demonstrating multiple, canvas
385 384 webgpu (wip) multiple / elements webgpu_multiple_elements.html https://threejs.org/examples/webgpu_multiple_elements.html webgpu, multiple, elements medium 3D visualization Three.js webgpu (wip) example demonstrating multiple, elements
386 385 webgpu (wip) multiple / rendertargets webgpu_multiple_rendertargets.html https://threejs.org/examples/webgpu_multiple_rendertargets.html webgpu, multiple, rendertargets medium VR/AR experience Three.js webgpu (wip) example demonstrating multiple, rendertargets
387 386 webgpu (wip) multiple / rendertargets / readback webgpu_multiple_rendertargets_readback.html https://threejs.org/examples/webgpu_multiple_rendertargets_readback.html webgpu, multiple, rendertargets, readback medium VR/AR experience Three.js webgpu (wip) example demonstrating multiple, rendertargets, readback
388 387 webgpu (wip) multisampled / renderbuffers webgpu_multisampled_renderbuffers.html https://threejs.org/examples/webgpu_multisampled_renderbuffers.html webgpu, multisampled, renderbuffers medium 3D visualization Three.js webgpu (wip) example demonstrating multisampled, renderbuffers
389 388 webgpu (wip) occlusion webgpu_occlusion.html https://threejs.org/examples/webgpu_occlusion.html webgpu, occlusion medium 3D visualization Three.js webgpu (wip) example demonstrating occlusion
390 389 webgpu (wip) ocean webgpu_ocean.html https://threejs.org/examples/webgpu_ocean.html webgpu, ocean medium 3D visualization Three.js webgpu (wip) example demonstrating ocean
391 390 webgpu (wip) parallax / uv webgpu_parallax_uv.html https://threejs.org/examples/webgpu_parallax_uv.html webgpu, parallax, uv medium VR/AR experience Three.js webgpu (wip) example demonstrating parallax, uv
392 391 webgpu (wip) particles webgpu_particles.html https://threejs.org/examples/webgpu_particles.html webgpu, particles medium VR/AR experience; particle effects Three.js webgpu (wip) example demonstrating particles
393 392 webgpu (wip) performance webgpu_performance.html https://threejs.org/examples/webgpu_performance.html webgpu, performance medium 3D visualization Three.js webgpu (wip) example demonstrating performance
394 393 webgpu (wip) performance / renderbundle webgpu_performance_renderbundle.html https://threejs.org/examples/webgpu_performance_renderbundle.html webgpu, performance, renderbundle medium 3D visualization Three.js webgpu (wip) example demonstrating performance, renderbundle
395 394 webgpu (wip) pmrem / cubemap webgpu_pmrem_cubemap.html https://threejs.org/examples/webgpu_pmrem_cubemap.html webgpu, pmrem, cubemap medium 3D visualization Three.js webgpu (wip) example demonstrating pmrem, cubemap
396 395 webgpu (wip) pmrem / equirectangular webgpu_pmrem_equirectangular.html https://threejs.org/examples/webgpu_pmrem_equirectangular.html webgpu, pmrem, equirectangular medium VR/AR experience Three.js webgpu (wip) example demonstrating pmrem, equirectangular
397 396 webgpu (wip) pmrem / scene webgpu_pmrem_scene.html https://threejs.org/examples/webgpu_pmrem_scene.html webgpu, pmrem, scene medium 3D visualization Three.js webgpu (wip) example demonstrating pmrem, scene
398 397 webgpu (wip) portal webgpu_portal.html https://threejs.org/examples/webgpu_portal.html webgpu, portal medium 3D visualization Three.js webgpu (wip) example demonstrating portal
399 398 webgpu (wip) postprocessing webgpu_postprocessing.html https://threejs.org/examples/webgpu_postprocessing.html webgpu, postprocessing medium visual effects Three.js webgpu (wip) example demonstrating postprocessing
400 399 webgpu (wip) postprocessing / 3dlut webgpu_postprocessing_3dlut.html https://threejs.org/examples/webgpu_postprocessing_3dlut.html webgpu, postprocessing, 3dlut medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, 3dlut
401 400 webgpu (wip) postprocessing / afterimage webgpu_postprocessing_afterimage.html https://threejs.org/examples/webgpu_postprocessing_afterimage.html webgpu, postprocessing, afterimage medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, afterimage
402 401 webgpu (wip) postprocessing / anamorphic webgpu_postprocessing_anamorphic.html https://threejs.org/examples/webgpu_postprocessing_anamorphic.html webgpu, postprocessing, anamorphic medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, anamorphic
403 402 webgpu (wip) postprocessing / ao webgpu_postprocessing_ao.html https://threejs.org/examples/webgpu_postprocessing_ao.html webgpu, postprocessing, ao medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, ao
404 403 webgpu (wip) postprocessing / bloom webgpu_postprocessing_bloom.html https://threejs.org/examples/webgpu_postprocessing_bloom.html webgpu, postprocessing, bloom medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, bloom
405 404 webgpu (wip) postprocessing / bloom / emissive webgpu_postprocessing_bloom_emissive.html https://threejs.org/examples/webgpu_postprocessing_bloom_emissive.html webgpu, postprocessing, bloom, emissive medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, bloom, emissive
406 405 webgpu (wip) postprocessing / bloom / selective webgpu_postprocessing_bloom_selective.html https://threejs.org/examples/webgpu_postprocessing_bloom_selective.html webgpu, postprocessing, bloom, selective medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, bloom, selective
407 406 webgpu (wip) postprocessing / difference webgpu_postprocessing_difference.html https://threejs.org/examples/webgpu_postprocessing_difference.html webgpu, postprocessing, difference medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, difference
408 407 webgpu (wip) postprocessing / dof webgpu_postprocessing_dof.html https://threejs.org/examples/webgpu_postprocessing_dof.html webgpu, postprocessing, dof medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, dof
409 408 webgpu (wip) postprocessing / dof / basic webgpu_postprocessing_dof_basic.html https://threejs.org/examples/webgpu_postprocessing_dof_basic.html webgpu, postprocessing, dof, basic low visual effects Three.js webgpu (wip) example demonstrating postprocessing, dof, basic
410 409 webgpu (wip) postprocessing / fxaa webgpu_postprocessing_fxaa.html https://threejs.org/examples/webgpu_postprocessing_fxaa.html webgpu, postprocessing, fxaa medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, fxaa
411 410 webgpu (wip) postprocessing / lensflare webgpu_postprocessing_lensflare.html https://threejs.org/examples/webgpu_postprocessing_lensflare.html webgpu, postprocessing, lensflare medium visual effects; VR/AR experience Three.js webgpu (wip) example demonstrating postprocessing, lensflare
412 411 webgpu (wip) postprocessing / masking webgpu_postprocessing_masking.html https://threejs.org/examples/webgpu_postprocessing_masking.html webgpu, postprocessing, masking medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, masking
413 412 webgpu (wip) postprocessing / ca webgpu_postprocessing_ca.html https://threejs.org/examples/webgpu_postprocessing_ca.html webgpu, postprocessing, ca medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, ca
414 413 webgpu (wip) postprocessing / motion / blur webgpu_postprocessing_motion_blur.html https://threejs.org/examples/webgpu_postprocessing_motion_blur.html webgpu, postprocessing, motion, blur medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, motion, blur
415 414 webgpu (wip) postprocessing / outline webgpu_postprocessing_outline.html https://threejs.org/examples/webgpu_postprocessing_outline.html webgpu, postprocessing, outline medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, outline
416 415 webgpu (wip) postprocessing / pixel webgpu_postprocessing_pixel.html https://threejs.org/examples/webgpu_postprocessing_pixel.html webgpu, postprocessing, pixel medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, pixel
417 416 webgpu (wip) postprocessing / radial / blur webgpu_postprocessing_radial_blur.html https://threejs.org/examples/webgpu_postprocessing_radial_blur.html webgpu, postprocessing, radial, blur medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, radial, blur
418 417 webgpu (wip) postprocessing / smaa webgpu_postprocessing_smaa.html https://threejs.org/examples/webgpu_postprocessing_smaa.html webgpu, postprocessing, smaa medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, smaa
419 418 webgpu (wip) postprocessing / sobel webgpu_postprocessing_sobel.html https://threejs.org/examples/webgpu_postprocessing_sobel.html webgpu, postprocessing, sobel medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, sobel
420 419 webgpu (wip) postprocessing / ssaa webgpu_postprocessing_ssaa.html https://threejs.org/examples/webgpu_postprocessing_ssaa.html webgpu, postprocessing, ssaa medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, ssaa
421 420 webgpu (wip) postprocessing / ssgi webgpu_postprocessing_ssgi.html https://threejs.org/examples/webgpu_postprocessing_ssgi.html webgpu, postprocessing, ssgi medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, ssgi
422 421 webgpu (wip) postprocessing / ssr webgpu_postprocessing_ssr.html https://threejs.org/examples/webgpu_postprocessing_ssr.html webgpu, postprocessing, ssr medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, ssr
423 422 webgpu (wip) postprocessing / sss webgpu_postprocessing_sss.html https://threejs.org/examples/webgpu_postprocessing_sss.html webgpu, postprocessing, sss medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, sss
424 423 webgpu (wip) postprocessing / traa webgpu_postprocessing_traa.html https://threejs.org/examples/webgpu_postprocessing_traa.html webgpu, postprocessing, traa medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, traa
425 424 webgpu (wip) postprocessing / transition webgpu_postprocessing_transition.html https://threejs.org/examples/webgpu_postprocessing_transition.html webgpu, postprocessing, transition medium visual effects Three.js webgpu (wip) example demonstrating postprocessing, transition
426 425 webgpu (wip) procedural / texture webgpu_procedural_texture.html https://threejs.org/examples/webgpu_procedural_texture.html webgpu, procedural, texture medium 3D visualization Three.js webgpu (wip) example demonstrating procedural, texture
427 426 webgpu (wip) reflection webgpu_reflection.html https://threejs.org/examples/webgpu_reflection.html webgpu, reflection medium 3D visualization Three.js webgpu (wip) example demonstrating reflection
428 427 webgpu (wip) reflection / blurred webgpu_reflection_blurred.html https://threejs.org/examples/webgpu_reflection_blurred.html webgpu, reflection, blurred medium 3D visualization Three.js webgpu (wip) example demonstrating reflection, blurred
429 428 webgpu (wip) reflection / roughness webgpu_reflection_roughness.html https://threejs.org/examples/webgpu_reflection_roughness.html webgpu, reflection, roughness medium 3D visualization Three.js webgpu (wip) example demonstrating reflection, roughness
430 429 webgpu (wip) refraction webgpu_refraction.html https://threejs.org/examples/webgpu_refraction.html webgpu, refraction medium 3D visualization Three.js webgpu (wip) example demonstrating refraction
431 430 webgpu (wip) rendertarget / 2d-array / 3d webgpu_rendertarget_2d-array_3d.html https://threejs.org/examples/webgpu_rendertarget_2d-array_3d.html webgpu, rendertarget, 2d-array, 3d medium VR/AR experience Three.js webgpu (wip) example demonstrating rendertarget, 2d-array, 3d
432 431 webgpu (wip) rtt webgpu_rtt.html https://threejs.org/examples/webgpu_rtt.html webgpu, rtt medium 3D visualization Three.js webgpu (wip) example demonstrating rtt
433 432 webgpu (wip) sandbox webgpu_sandbox.html https://threejs.org/examples/webgpu_sandbox.html webgpu, sandbox medium 3D visualization Three.js webgpu (wip) example demonstrating sandbox
434 433 webgpu (wip) shadertoy webgpu_shadertoy.html https://threejs.org/examples/webgpu_shadertoy.html webgpu, shadertoy medium 3D visualization Three.js webgpu (wip) example demonstrating shadertoy
435 434 webgpu (wip) shadow / contact webgpu_shadow_contact.html https://threejs.org/examples/webgpu_shadow_contact.html webgpu, shadow, contact medium realistic lighting Three.js webgpu (wip) example demonstrating shadow, contact
436 435 webgpu (wip) shadowmap webgpu_shadowmap.html https://threejs.org/examples/webgpu_shadowmap.html webgpu, shadowmap medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap
437 436 webgpu (wip) shadowmap / array webgpu_shadowmap_array.html https://threejs.org/examples/webgpu_shadowmap_array.html webgpu, shadowmap, array medium realistic lighting; VR/AR experience Three.js webgpu (wip) example demonstrating shadowmap, array
438 437 webgpu (wip) shadowmap / csm webgpu_shadowmap_csm.html https://threejs.org/examples/webgpu_shadowmap_csm.html webgpu, shadowmap, csm medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap, csm
439 438 webgpu (wip) shadowmap / opacity webgpu_shadowmap_opacity.html https://threejs.org/examples/webgpu_shadowmap_opacity.html webgpu, shadowmap, opacity medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap, opacity
440 439 webgpu (wip) shadowmap / pointlight webgpu_shadowmap_pointlight.html https://threejs.org/examples/webgpu_shadowmap_pointlight.html webgpu, shadowmap, pointlight medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap, pointlight
441 440 webgpu (wip) shadowmap / progressive webgpu_shadowmap_progressive.html https://threejs.org/examples/webgpu_shadowmap_progressive.html webgpu, shadowmap, progressive medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap, progressive
442 441 webgpu (wip) shadowmap / vsm webgpu_shadowmap_vsm.html https://threejs.org/examples/webgpu_shadowmap_vsm.html webgpu, shadowmap, vsm medium realistic lighting Three.js webgpu (wip) example demonstrating shadowmap, vsm
443 442 webgpu (wip) skinning webgpu_skinning.html https://threejs.org/examples/webgpu_skinning.html webgpu, skinning medium 3D visualization Three.js webgpu (wip) example demonstrating skinning
444 443 webgpu (wip) skinning / instancing webgpu_skinning_instancing.html https://threejs.org/examples/webgpu_skinning_instancing.html webgpu, skinning, instancing medium 3D visualization Three.js webgpu (wip) example demonstrating skinning, instancing
445 444 webgpu (wip) skinning / points webgpu_skinning_points.html https://threejs.org/examples/webgpu_skinning_points.html webgpu, skinning, points medium particle effects Three.js webgpu (wip) example demonstrating skinning, points
446 445 webgpu (wip) sky webgpu_sky.html https://threejs.org/examples/webgpu_sky.html webgpu, sky medium 3D visualization Three.js webgpu (wip) example demonstrating sky
447 446 webgpu (wip) sprites webgpu_sprites.html https://threejs.org/examples/webgpu_sprites.html webgpu, sprites medium 3D visualization Three.js webgpu (wip) example demonstrating sprites
448 447 webgpu (wip) storage / buffer webgpu_storage_buffer.html https://threejs.org/examples/webgpu_storage_buffer.html webgpu, storage, buffer medium 3D visualization Three.js webgpu (wip) example demonstrating storage, buffer
449 448 webgpu (wip) struct / drawindirect webgpu_struct_drawindirect.html https://threejs.org/examples/webgpu_struct_drawindirect.html webgpu, struct, drawindirect medium 3D visualization Three.js webgpu (wip) example demonstrating struct, drawindirect
450 449 webgpu (wip) test / memory webgpu_test_memory.html https://threejs.org/examples/webgpu_test_memory.html webgpu, test, memory medium 3D visualization Three.js webgpu (wip) example demonstrating test, memory
451 450 webgpu (wip) texturegrad webgpu_texturegrad.html https://threejs.org/examples/webgpu_texturegrad.html webgpu, texturegrad medium 3D visualization Three.js webgpu (wip) example demonstrating texturegrad
452 451 webgpu (wip) textures / 2d-array webgpu_textures_2d-array.html https://threejs.org/examples/webgpu_textures_2d-array.html webgpu, textures, 2d-array medium VR/AR experience Three.js webgpu (wip) example demonstrating textures, 2d-array
453 452 webgpu (wip) textures / 2d-array / compressed webgpu_textures_2d-array_compressed.html https://threejs.org/examples/webgpu_textures_2d-array_compressed.html webgpu, textures, 2d-array, compressed medium VR/AR experience Three.js webgpu (wip) example demonstrating textures, 2d-array, compressed
454 453 webgpu (wip) textures / anisotropy webgpu_textures_anisotropy.html https://threejs.org/examples/webgpu_textures_anisotropy.html webgpu, textures, anisotropy medium 3D visualization Three.js webgpu (wip) example demonstrating textures, anisotropy
455 454 webgpu (wip) textures / partialupdate webgpu_textures_partialupdate.html https://threejs.org/examples/webgpu_textures_partialupdate.html webgpu, textures, partialupdate medium VR/AR experience Three.js webgpu (wip) example demonstrating textures, partialupdate
456 455 webgpu (wip) tonemapping webgpu_tonemapping.html https://threejs.org/examples/webgpu_tonemapping.html webgpu, tonemapping medium 3D visualization Three.js webgpu (wip) example demonstrating tonemapping
457 456 webgpu (wip) tsl / angular / slicing webgpu_tsl_angular_slicing.html https://threejs.org/examples/webgpu_tsl_angular_slicing.html webgpu, tsl, angular, slicing medium VR/AR experience; shader programming Three.js webgpu (wip) example demonstrating tsl, angular, slicing
458 457 webgpu (wip) tsl / compute / attractors / particles webgpu_tsl_compute_attractors_particles.html https://threejs.org/examples/webgpu_tsl_compute_attractors_particles.html webgpu, tsl, compute, attractors, particles high VR/AR experience; particle effects; shader programming; GPU compute Three.js webgpu (wip) example demonstrating tsl, compute, attractors, particles
459 458 webgpu (wip) tsl / coffee / smoke webgpu_tsl_coffee_smoke.html https://threejs.org/examples/webgpu_tsl_coffee_smoke.html webgpu, tsl, coffee, smoke medium shader programming Three.js webgpu (wip) example demonstrating tsl, coffee, smoke
460 459 webgpu (wip) tsl / earth webgpu_tsl_earth.html https://threejs.org/examples/webgpu_tsl_earth.html webgpu, tsl, earth medium VR/AR experience; shader programming Three.js webgpu (wip) example demonstrating tsl, earth
461 460 webgpu (wip) tsl / editor webgpu_tsl_editor.html https://threejs.org/examples/webgpu_tsl_editor.html webgpu, tsl, editor medium shader programming Three.js webgpu (wip) example demonstrating tsl, editor
462 461 webgpu (wip) tsl / galaxy webgpu_tsl_galaxy.html https://threejs.org/examples/webgpu_tsl_galaxy.html webgpu, tsl, galaxy medium shader programming Three.js webgpu (wip) example demonstrating tsl, galaxy
463 462 webgpu (wip) tsl / halftone webgpu_tsl_halftone.html https://threejs.org/examples/webgpu_tsl_halftone.html webgpu, tsl, halftone medium shader programming Three.js webgpu (wip) example demonstrating tsl, halftone
464 463 webgpu (wip) tsl / interoperability webgpu_tsl_interoperability.html https://threejs.org/examples/webgpu_tsl_interoperability.html webgpu, tsl, interoperability medium shader programming Three.js webgpu (wip) example demonstrating tsl, interoperability
465 464 webgpu (wip) tsl / procedural / terrain webgpu_tsl_procedural_terrain.html https://threejs.org/examples/webgpu_tsl_procedural_terrain.html webgpu, tsl, procedural, terrain medium procedural generation; shader programming Three.js webgpu (wip) example demonstrating tsl, procedural, terrain
466 465 webgpu (wip) tsl / raging / sea webgpu_tsl_raging_sea.html https://threejs.org/examples/webgpu_tsl_raging_sea.html webgpu, tsl, raging, sea medium shader programming Three.js webgpu (wip) example demonstrating tsl, raging, sea
467 466 webgpu (wip) tsl / transpiler webgpu_tsl_transpiler.html https://threejs.org/examples/webgpu_tsl_transpiler.html webgpu, tsl, transpiler medium shader programming Three.js webgpu (wip) example demonstrating tsl, transpiler
468 467 webgpu (wip) tsl / vfx / flames webgpu_tsl_vfx_flames.html https://threejs.org/examples/webgpu_tsl_vfx_flames.html webgpu, tsl, vfx, flames medium shader programming Three.js webgpu (wip) example demonstrating tsl, vfx, flames
469 468 webgpu (wip) tsl / vfx / linkedparticles webgpu_tsl_vfx_linkedparticles.html https://threejs.org/examples/webgpu_tsl_vfx_linkedparticles.html webgpu, tsl, vfx, linkedparticles medium VR/AR experience; particle effects; shader programming Three.js webgpu (wip) example demonstrating tsl, vfx, linkedparticles
470 469 webgpu (wip) tsl / vfx / tornado webgpu_tsl_vfx_tornado.html https://threejs.org/examples/webgpu_tsl_vfx_tornado.html webgpu, tsl, vfx, tornado medium shader programming Three.js webgpu (wip) example demonstrating tsl, vfx, tornado
471 470 webgpu (wip) tsl / wood webgpu_tsl_wood.html https://threejs.org/examples/webgpu_tsl_wood.html webgpu, tsl, wood medium shader programming Three.js webgpu (wip) example demonstrating tsl, wood
472 471 webgpu (wip) video / frame webgpu_video_frame.html https://threejs.org/examples/webgpu_video_frame.html webgpu, video, frame medium 3D visualization Three.js webgpu (wip) example demonstrating video, frame
473 472 webgpu (wip) video / panorama webgpu_video_panorama.html https://threejs.org/examples/webgpu_video_panorama.html webgpu, video, panorama medium 3D visualization Three.js webgpu (wip) example demonstrating video, panorama
474 473 webgpu (wip) volume / caustics webgpu_volume_caustics.html https://threejs.org/examples/webgpu_volume_caustics.html webgpu, volume, caustics medium 3D visualization Three.js webgpu (wip) example demonstrating volume, caustics
475 474 webgpu (wip) volume / cloud webgpu_volume_cloud.html https://threejs.org/examples/webgpu_volume_cloud.html webgpu, volume, cloud medium 3D visualization Three.js webgpu (wip) example demonstrating volume, cloud
476 475 webgpu (wip) volume / lighting webgpu_volume_lighting.html https://threejs.org/examples/webgpu_volume_lighting.html webgpu, volume, lighting medium 3D visualization Three.js webgpu (wip) example demonstrating volume, lighting
477 476 webgpu (wip) volume / lighting / rectarea webgpu_volume_lighting_rectarea.html https://threejs.org/examples/webgpu_volume_lighting_rectarea.html webgpu, volume, lighting, rectarea medium VR/AR experience Three.js webgpu (wip) example demonstrating volume, lighting, rectarea
478 477 webgpu (wip) volume / perlin webgpu_volume_perlin.html https://threejs.org/examples/webgpu_volume_perlin.html webgpu, volume, perlin medium 3D visualization Three.js webgpu (wip) example demonstrating volume, perlin
479 478 webgpu (wip) water webgpu_water.html https://threejs.org/examples/webgpu_water.html webgpu, water medium 3D visualization Three.js webgpu (wip) example demonstrating water
480 479 webgpu (wip) xr / cubes webgpu_xr_cubes.html https://threejs.org/examples/webgpu_xr_cubes.html webgpu, xr, cubes medium VR/AR experience Three.js webgpu (wip) example demonstrating xr, cubes
481 480 webgpu (wip) xr / native / layers webgpu_xr_native_layers.html https://threejs.org/examples/webgpu_xr_native_layers.html webgpu, xr, native, layers medium VR/AR experience Three.js webgpu (wip) example demonstrating xr, native, layers
482 481 webgpu (wip) xr / rollercoaster webgpu_xr_rollercoaster.html https://threejs.org/examples/webgpu_xr_rollercoaster.html webgpu, xr, rollercoaster medium VR/AR experience Three.js webgpu (wip) example demonstrating xr, rollercoaster
483 482 webaudio orientation webaudio_orientation.html https://threejs.org/examples/webaudio_orientation.html webaudio, orientation medium 3D visualization Three.js webaudio example demonstrating orientation
484 483 webaudio sandbox webaudio_sandbox.html https://threejs.org/examples/webaudio_sandbox.html webaudio, sandbox medium 3D visualization Three.js webaudio example demonstrating sandbox
485 484 webaudio timing webaudio_timing.html https://threejs.org/examples/webaudio_timing.html webaudio, timing medium 3D visualization Three.js webaudio example demonstrating timing
486 485 webaudio visualizer webaudio_visualizer.html https://threejs.org/examples/webaudio_visualizer.html webaudio, visualizer medium 3D visualization Three.js webaudio example demonstrating visualizer
487 486 webxr ar / camera / access webxr_ar_camera_access.html https://threejs.org/examples/webxr_ar_camera_access.html webxr, ar, camera, access medium VR/AR experience Three.js webxr example demonstrating ar, camera, access
488 487 webxr ar / cones webxr_ar_cones.html https://threejs.org/examples/webxr_ar_cones.html webxr, ar, cones medium VR/AR experience Three.js webxr example demonstrating ar, cones
489 488 webxr ar / hittest webxr_ar_hittest.html https://threejs.org/examples/webxr_ar_hittest.html webxr, ar, hittest medium VR/AR experience Three.js webxr example demonstrating ar, hittest
490 489 webxr ar / lighting webxr_ar_lighting.html https://threejs.org/examples/webxr_ar_lighting.html webxr, ar, lighting medium VR/AR experience Three.js webxr example demonstrating ar, lighting
491 490 webxr ar / plane / detection webxr_ar_plane_detection.html https://threejs.org/examples/webxr_ar_plane_detection.html webxr, ar, plane, detection medium VR/AR experience Three.js webxr example demonstrating ar, plane, detection
492 491 webxr vr / handinput webxr_vr_handinput.html https://threejs.org/examples/webxr_vr_handinput.html webxr, vr, handinput medium VR/AR experience Three.js webxr example demonstrating vr, handinput
493 492 webxr vr / handinput / cubes webxr_vr_handinput_cubes.html https://threejs.org/examples/webxr_vr_handinput_cubes.html webxr, vr, handinput, cubes medium VR/AR experience Three.js webxr example demonstrating vr, handinput, cubes
494 493 webxr vr / handinput / profiles webxr_vr_handinput_profiles.html https://threejs.org/examples/webxr_vr_handinput_profiles.html webxr, vr, handinput, profiles medium VR/AR experience Three.js webxr example demonstrating vr, handinput, profiles
495 494 webxr vr / handinput / pointerclick webxr_vr_handinput_pointerclick.html https://threejs.org/examples/webxr_vr_handinput_pointerclick.html webxr, vr, handinput, pointerclick medium VR/AR experience Three.js webxr example demonstrating vr, handinput, pointerclick
496 495 webxr vr / handinput / pointerdrag webxr_vr_handinput_pointerdrag.html https://threejs.org/examples/webxr_vr_handinput_pointerdrag.html webxr, vr, handinput, pointerdrag medium VR/AR experience Three.js webxr example demonstrating vr, handinput, pointerdrag
497 496 webxr vr / handinput / pressbutton webxr_vr_handinput_pressbutton.html https://threejs.org/examples/webxr_vr_handinput_pressbutton.html webxr, vr, handinput, pressbutton medium VR/AR experience Three.js webxr example demonstrating vr, handinput, pressbutton
498 497 webxr vr / layers webxr_vr_layers.html https://threejs.org/examples/webxr_vr_layers.html webxr, vr, layers medium VR/AR experience Three.js webxr example demonstrating vr, layers
499 498 webxr vr / panorama webxr_vr_panorama.html https://threejs.org/examples/webxr_vr_panorama.html webxr, vr, panorama medium VR/AR experience Three.js webxr example demonstrating vr, panorama
500 499 webxr vr / panorama / depth webxr_vr_panorama_depth.html https://threejs.org/examples/webxr_vr_panorama_depth.html webxr, vr, panorama, depth medium VR/AR experience Three.js webxr example demonstrating vr, panorama, depth
501 500 webxr vr / rollercoaster webxr_vr_rollercoaster.html https://threejs.org/examples/webxr_vr_rollercoaster.html webxr, vr, rollercoaster medium VR/AR experience Three.js webxr example demonstrating vr, rollercoaster
502 501 webxr vr / sandbox webxr_vr_sandbox.html https://threejs.org/examples/webxr_vr_sandbox.html webxr, vr, sandbox medium VR/AR experience Three.js webxr example demonstrating vr, sandbox
503 502 webxr vr / teleport webxr_vr_teleport.html https://threejs.org/examples/webxr_vr_teleport.html webxr, vr, teleport medium VR/AR experience Three.js webxr example demonstrating vr, teleport
504 503 webxr vr / video webxr_vr_video.html https://threejs.org/examples/webxr_vr_video.html webxr, vr, video medium VR/AR experience Three.js webxr example demonstrating vr, video
505 504 webxr xr / ballshooter webxr_xr_ballshooter.html https://threejs.org/examples/webxr_xr_ballshooter.html webxr, xr, ballshooter medium VR/AR experience Three.js webxr example demonstrating xr, ballshooter
506 505 webxr xr / controls / transform webxr_xr_controls_transform.html https://threejs.org/examples/webxr_xr_controls_transform.html webxr, xr, controls, transform medium VR/AR experience Three.js webxr example demonstrating xr, controls, transform
507 506 webxr xr / cubes webxr_xr_cubes.html https://threejs.org/examples/webxr_xr_cubes.html webxr, xr, cubes medium VR/AR experience Three.js webxr example demonstrating xr, cubes
508 507 webxr xr / dragging webxr_xr_dragging.html https://threejs.org/examples/webxr_xr_dragging.html webxr, xr, dragging medium VR/AR experience Three.js webxr example demonstrating xr, dragging
509 508 webxr xr / dragging / custom / depth webxr_xr_dragging_custom_depth.html https://threejs.org/examples/webxr_xr_dragging_custom_depth.html webxr, xr, dragging, custom, depth medium VR/AR experience Three.js webxr example demonstrating xr, dragging, custom, depth
510 509 webxr xr / haptics webxr_xr_haptics.html https://threejs.org/examples/webxr_xr_haptics.html webxr, xr, haptics medium VR/AR experience Three.js webxr example demonstrating xr, haptics
511 510 webxr xr / paint webxr_xr_paint.html https://threejs.org/examples/webxr_xr_paint.html webxr, xr, paint medium VR/AR experience Three.js webxr example demonstrating xr, paint
512 511 webxr xr / sculpt webxr_xr_sculpt.html https://threejs.org/examples/webxr_xr_sculpt.html webxr, xr, sculpt medium VR/AR experience Three.js webxr example demonstrating xr, sculpt
513 512 games fps games_fps.html https://threejs.org/examples/games_fps.html games, fps medium 3D visualization Three.js games example demonstrating fps
514 513 physics ammo / break physics_ammo_break.html https://threejs.org/examples/physics_ammo_break.html physics, ammo, break medium physics simulation Three.js physics example demonstrating ammo, break
515 514 physics ammo / cloth physics_ammo_cloth.html https://threejs.org/examples/physics_ammo_cloth.html physics, ammo, cloth medium physics simulation Three.js physics example demonstrating ammo, cloth
516 515 physics ammo / instancing physics_ammo_instancing.html https://threejs.org/examples/physics_ammo_instancing.html physics, ammo, instancing medium physics simulation Three.js physics example demonstrating ammo, instancing
517 516 physics ammo / rope physics_ammo_rope.html https://threejs.org/examples/physics_ammo_rope.html physics, ammo, rope medium physics simulation Three.js physics example demonstrating ammo, rope
518 517 physics ammo / terrain physics_ammo_terrain.html https://threejs.org/examples/physics_ammo_terrain.html physics, ammo, terrain medium physics simulation; procedural generation Three.js physics example demonstrating ammo, terrain
519 518 physics ammo / volume physics_ammo_volume.html https://threejs.org/examples/physics_ammo_volume.html physics, ammo, volume medium physics simulation Three.js physics example demonstrating ammo, volume
520 519 physics jolt / instancing physics_jolt_instancing.html https://threejs.org/examples/physics_jolt_instancing.html physics, jolt, instancing medium physics simulation Three.js physics example demonstrating jolt, instancing
521 520 physics rapier / basic physics_rapier_basic.html https://threejs.org/examples/physics_rapier_basic.html physics, rapier, basic low physics simulation Three.js physics example demonstrating rapier, basic
522 521 physics rapier / instancing physics_rapier_instancing.html https://threejs.org/examples/physics_rapier_instancing.html physics, rapier, instancing medium physics simulation Three.js physics example demonstrating rapier, instancing
523 522 physics rapier / joints physics_rapier_joints.html https://threejs.org/examples/physics_rapier_joints.html physics, rapier, joints medium physics simulation Three.js physics example demonstrating rapier, joints
524 523 physics rapier / character / controller physics_rapier_character_controller.html https://threejs.org/examples/physics_rapier_character_controller.html physics, rapier, character, controller medium physics simulation; VR/AR experience Three.js physics example demonstrating rapier, character, controller
525 524 physics rapier / vehicle / controller physics_rapier_vehicle_controller.html https://threejs.org/examples/physics_rapier_vehicle_controller.html physics, rapier, vehicle, controller medium physics simulation Three.js physics example demonstrating rapier, vehicle, controller
526 525 physics rapier / terrain physics_rapier_terrain.html https://threejs.org/examples/physics_rapier_terrain.html physics, rapier, terrain medium physics simulation; procedural generation Three.js physics example demonstrating rapier, terrain
527 526 misc animation / groups misc_animation_groups.html https://threejs.org/examples/misc_animation_groups.html misc, animation, groups medium character animation Three.js misc example demonstrating animation, groups
528 527 misc animation / keys misc_animation_keys.html https://threejs.org/examples/misc_animation_keys.html misc, animation, keys medium character animation Three.js misc example demonstrating animation, keys
529 528 misc boxselection misc_boxselection.html https://threejs.org/examples/misc_boxselection.html misc, boxselection medium 3D visualization Three.js misc example demonstrating boxselection
530 529 misc controls / arcball misc_controls_arcball.html https://threejs.org/examples/misc_controls_arcball.html misc, controls, arcball medium VR/AR experience Three.js misc example demonstrating controls, arcball
531 530 misc controls / drag misc_controls_drag.html https://threejs.org/examples/misc_controls_drag.html misc, controls, drag medium 3D visualization Three.js misc example demonstrating controls, drag
532 531 misc controls / fly misc_controls_fly.html https://threejs.org/examples/misc_controls_fly.html misc, controls, fly medium 3D visualization Three.js misc example demonstrating controls, fly
533 532 misc controls / map misc_controls_map.html https://threejs.org/examples/misc_controls_map.html misc, controls, map medium 3D visualization Three.js misc example demonstrating controls, map
534 533 misc controls / orbit misc_controls_orbit.html https://threejs.org/examples/misc_controls_orbit.html misc, controls, orbit medium 3D visualization Three.js misc example demonstrating controls, orbit
535 534 misc controls / pointerlock misc_controls_pointerlock.html https://threejs.org/examples/misc_controls_pointerlock.html misc, controls, pointerlock medium 3D visualization Three.js misc example demonstrating controls, pointerlock
536 535 misc controls / trackball misc_controls_trackball.html https://threejs.org/examples/misc_controls_trackball.html misc, controls, trackball medium 3D visualization Three.js misc example demonstrating controls, trackball
537 536 misc controls / transform misc_controls_transform.html https://threejs.org/examples/misc_controls_transform.html misc, controls, transform medium 3D visualization Three.js misc example demonstrating controls, transform
538 537 misc exporter / draco misc_exporter_draco.html https://threejs.org/examples/misc_exporter_draco.html misc, exporter, draco medium 3D visualization Three.js misc example demonstrating exporter, draco
539 538 misc exporter / gltf misc_exporter_gltf.html https://threejs.org/examples/misc_exporter_gltf.html misc, exporter, gltf medium 3D visualization Three.js misc example demonstrating exporter, gltf
540 539 misc exporter / obj misc_exporter_obj.html https://threejs.org/examples/misc_exporter_obj.html misc, exporter, obj medium 3D visualization Three.js misc example demonstrating exporter, obj
541 540 misc exporter / ply misc_exporter_ply.html https://threejs.org/examples/misc_exporter_ply.html misc, exporter, ply medium 3D visualization Three.js misc example demonstrating exporter, ply
542 541 misc exporter / stl misc_exporter_stl.html https://threejs.org/examples/misc_exporter_stl.html misc, exporter, stl medium 3D visualization Three.js misc example demonstrating exporter, stl
543 542 misc exporter / usdz misc_exporter_usdz.html https://threejs.org/examples/misc_exporter_usdz.html misc, exporter, usdz medium 3D visualization Three.js misc example demonstrating exporter, usdz
544 543 misc exporter / exr misc_exporter_exr.html https://threejs.org/examples/misc_exporter_exr.html misc, exporter, exr medium VR/AR experience Three.js misc example demonstrating exporter, exr
545 544 misc exporter / ktx2 misc_exporter_ktx2.html https://threejs.org/examples/misc_exporter_ktx2.html misc, exporter, ktx2 medium 3D visualization Three.js misc example demonstrating exporter, ktx2
546 545 misc raycaster / helper misc_raycaster_helper.html https://threejs.org/examples/misc_raycaster_helper.html misc, raycaster, helper medium user interaction Three.js misc example demonstrating raycaster, helper
547 546 css2d label css2d_label.html https://threejs.org/examples/css2d_label.html css2d, label low 3D visualization Three.js css2d example demonstrating label
548 547 css3d molecules css3d_molecules.html https://threejs.org/examples/css3d_molecules.html css3d, molecules low 3D visualization Three.js css3d example demonstrating molecules
549 548 css3d orthographic css3d_orthographic.html https://threejs.org/examples/css3d_orthographic.html css3d, orthographic low 3D visualization Three.js css3d example demonstrating orthographic
550 549 css3d periodictable css3d_periodictable.html https://threejs.org/examples/css3d_periodictable.html css3d, periodictable low 3D visualization Three.js css3d example demonstrating periodictable
551 550 css3d sandbox css3d_sandbox.html https://threejs.org/examples/css3d_sandbox.html css3d, sandbox low 3D visualization Three.js css3d example demonstrating sandbox
552 551 css3d sprites css3d_sprites.html https://threejs.org/examples/css3d_sprites.html css3d, sprites low 3D visualization Three.js css3d example demonstrating sprites
553 552 css3d youtube css3d_youtube.html https://threejs.org/examples/css3d_youtube.html css3d, youtube low 3D visualization Three.js css3d example demonstrating youtube
554 553 svg lines svg_lines.html https://threejs.org/examples/svg_lines.html svg, lines low 3D visualization Three.js svg example demonstrating lines
555 554 svg sandbox svg_sandbox.html https://threejs.org/examples/svg_sandbox.html svg, sandbox low 3D visualization Three.js svg example demonstrating sandbox
556 555 tests furnace / test webgl_furnace_test.html https://threejs.org/examples/webgl_furnace_test.html webgl, furnace, test medium 3D visualization Three.js tests example demonstrating furnace, test
557 556 tests uv / tests misc_uv_tests.html https://threejs.org/examples/misc_uv_tests.html misc, uv, tests medium 3D visualization Three.js tests example demonstrating uv, tests

21
.opencode/skills/threejs/data/use-cases.csv Normal file
View File

@@ -0,0 +1,21 @@
ID,Use Case,Keywords,Recommended Examples,Complexity,Technologies,Description
1,Product Configurator,"configurator, e-commerce, product, 3d viewer",webgl_loader_gltf; webgl_materials_variations_physical; webgl_lights_rectarealight,Medium,"GLTF, PBR Materials, Environment Maps",Interactive product visualization with material/color options
2,Data Visualization,"data viz, charts, 3d graphs, analytics",webgl_buffergeometry_points; webgl_interactive_points; webgl_geometry_dynamic,Medium,"BufferGeometry, Points, Custom Shaders",3D data visualization and interactive charts
3,Architectural Visualization,"archviz, building, interior, real estate",webgl_loader_gltf; webgl_materials_envmaps_hdr; webgl_shadowmap_csm; webgl_postprocessing_ssr,High,"GLTF, HDR, CSM Shadows, SSR",Architectural and interior design visualization
4,Game Development,"game, fps, rpg, interactive",webgl_animation_skinning_blending; physics; webgpu_compute_birds; webgl_portal,High,"Animation, Physics, Compute, Controls",Game mechanics and interactive experiences
5,Medical Visualization,"medical, anatomy, ct scan, volume",webgl_loader_nrrd; webgl_volume_cloud; webgl_loader_pdb,High,"Volume Rendering, NRRD, PDB",Medical imaging and anatomical visualization
6,Scientific Visualization,"scientific, simulation, physics, research",webgl_gpgpu_protoplanet; webgl_gpgpu_water; webgpu_compute_particles,High,"GPGPU, Compute Shaders, Simulation",Scientific data and physics simulation
7,360 Panorama Viewer,"360, panorama, vr, virtual tour",webgl_panorama_equirectangular; webgl_video_panorama_equirectangular; webxr_vr_panorama,Low-Medium,"Equirectangular, Video, WebXR",360-degree photo and video viewing
8,E-commerce 3D,"e-commerce, shopping, ar, product view",webgl_loader_gltf; webgl_loader_usdz; webgl_materials_physical_transmission,Medium,"GLTF, USDZ, Transmission",Product viewing for online shopping
9,Character Animation,"character, avatar, animation, rigging",webgl_animation_keyframes; webgl_animation_skinning_ik; webgl_morphtargets_face,Medium-High,"Animation, IK, Morph Targets",Character animation and avatar systems
10,Particle Effects,"particles, effects, vfx, simulation",webgl_gpgpu_birds; webgl_points_dynamic; webgpu_compute_particles_rain,Medium-High,"GPGPU, Points, Compute",Particle systems and visual effects
11,CAD Viewer,"cad, engineering, step, iges",webgl_loader_3mf; webgl_loader_stl; webgl_geometry_nurbs; webgl_clipping,Medium,"Loaders, NURBS, Clipping",CAD and engineering model viewing
12,Virtual Reality,"vr, immersive, headset, quest",webxr_vr_sandbox; webxr_vr_teleport; webxr_vr_rollercoaster,High,"WebXR, Controllers, Hand Tracking",VR experiences and applications
13,Augmented Reality,"ar, mobile, camera, overlay",webxr_ar_cones; webxr_ar_hittest; webxr_ar_lighting,High,"WebXR AR, Hit Test, Lighting Estimation",AR experiences on mobile devices
14,Portfolio Website,"portfolio, creative, art, showcase",webgl_postprocessing_unreal_bloom; webgl_shaders_ocean; webgl_trails,Medium,"Post-processing, Custom Shaders, Effects",Creative portfolio and artistic showcases
15,Real-time Collaboration,"collaboration, multiplayer, networking",webgl_multiple_scenes_comparison; webgl_multiple_views,Medium,"Multiple Scenes, Sync, State",Multi-user collaborative 3D environments
16,Point Cloud Visualization,"point cloud, lidar, scan, photogrammetry",webgl_loader_pcd; webgl_loader_ply; webgl_points_sprites,Medium,"PCD, PLY, Point Rendering",Point cloud data visualization
17,Terrain and Landscape,"terrain, landscape, heightmap, outdoor",webgl_geometry_terrain; webgl_geometry_minecraft; webgl_water,Medium,"Heightmap, LOD, Water",Outdoor and terrain visualization
18,Car Configurator,"car, automotive, paint, configurator",webgl_materials_car; webgl_materials_physical_clearcoat; webgl_materials_envmaps_groundprojected,High,"Clearcoat, Environment, Reflection",Automotive visualization and configuration
19,Educational 3D,"education, learning, interactive, simulation",webgl_loader_pdb; webgl_morphtargets; webgl_geometry_text,Low-Medium,"Models, Animation, Interaction",Educational and learning applications
20,WebGPU Modern,"webgpu, modern, compute, next-gen",webgpu_compute_birds; webgpu_tsl_editor; webgpu_postprocessing_bloom,High,"WebGPU, TSL, Compute Shaders",Modern WebGPU-based applications
1 ID Use Case Keywords Recommended Examples Complexity Technologies Description
2 1 Product Configurator configurator, e-commerce, product, 3d viewer webgl_loader_gltf; webgl_materials_variations_physical; webgl_lights_rectarealight Medium GLTF, PBR Materials, Environment Maps Interactive product visualization with material/color options
3 2 Data Visualization data viz, charts, 3d graphs, analytics webgl_buffergeometry_points; webgl_interactive_points; webgl_geometry_dynamic Medium BufferGeometry, Points, Custom Shaders 3D data visualization and interactive charts
4 3 Architectural Visualization archviz, building, interior, real estate webgl_loader_gltf; webgl_materials_envmaps_hdr; webgl_shadowmap_csm; webgl_postprocessing_ssr High GLTF, HDR, CSM Shadows, SSR Architectural and interior design visualization
5 4 Game Development game, fps, rpg, interactive webgl_animation_skinning_blending; physics; webgpu_compute_birds; webgl_portal High Animation, Physics, Compute, Controls Game mechanics and interactive experiences
6 5 Medical Visualization medical, anatomy, ct scan, volume webgl_loader_nrrd; webgl_volume_cloud; webgl_loader_pdb High Volume Rendering, NRRD, PDB Medical imaging and anatomical visualization
7 6 Scientific Visualization scientific, simulation, physics, research webgl_gpgpu_protoplanet; webgl_gpgpu_water; webgpu_compute_particles High GPGPU, Compute Shaders, Simulation Scientific data and physics simulation
8 7 360 Panorama Viewer 360, panorama, vr, virtual tour webgl_panorama_equirectangular; webgl_video_panorama_equirectangular; webxr_vr_panorama Low-Medium Equirectangular, Video, WebXR 360-degree photo and video viewing
9 8 E-commerce 3D e-commerce, shopping, ar, product view webgl_loader_gltf; webgl_loader_usdz; webgl_materials_physical_transmission Medium GLTF, USDZ, Transmission Product viewing for online shopping
10 9 Character Animation character, avatar, animation, rigging webgl_animation_keyframes; webgl_animation_skinning_ik; webgl_morphtargets_face Medium-High Animation, IK, Morph Targets Character animation and avatar systems
11 10 Particle Effects particles, effects, vfx, simulation webgl_gpgpu_birds; webgl_points_dynamic; webgpu_compute_particles_rain Medium-High GPGPU, Points, Compute Particle systems and visual effects
12 11 CAD Viewer cad, engineering, step, iges webgl_loader_3mf; webgl_loader_stl; webgl_geometry_nurbs; webgl_clipping Medium Loaders, NURBS, Clipping CAD and engineering model viewing
13 12 Virtual Reality vr, immersive, headset, quest webxr_vr_sandbox; webxr_vr_teleport; webxr_vr_rollercoaster High WebXR, Controllers, Hand Tracking VR experiences and applications
14 13 Augmented Reality ar, mobile, camera, overlay webxr_ar_cones; webxr_ar_hittest; webxr_ar_lighting High WebXR AR, Hit Test, Lighting Estimation AR experiences on mobile devices
15 14 Portfolio Website portfolio, creative, art, showcase webgl_postprocessing_unreal_bloom; webgl_shaders_ocean; webgl_trails Medium Post-processing, Custom Shaders, Effects Creative portfolio and artistic showcases
16 15 Real-time Collaboration collaboration, multiplayer, networking webgl_multiple_scenes_comparison; webgl_multiple_views Medium Multiple Scenes, Sync, State Multi-user collaborative 3D environments
17 16 Point Cloud Visualization point cloud, lidar, scan, photogrammetry webgl_loader_pcd; webgl_loader_ply; webgl_points_sprites Medium PCD, PLY, Point Rendering Point cloud data visualization
18 17 Terrain and Landscape terrain, landscape, heightmap, outdoor webgl_geometry_terrain; webgl_geometry_minecraft; webgl_water Medium Heightmap, LOD, Water Outdoor and terrain visualization
19 18 Car Configurator car, automotive, paint, configurator webgl_materials_car; webgl_materials_physical_clearcoat; webgl_materials_envmaps_groundprojected High Clearcoat, Environment, Reflection Automotive visualization and configuration
20 19 Educational 3D education, learning, interactive, simulation webgl_loader_pdb; webgl_morphtargets; webgl_geometry_text Low-Medium Models, Animation, Interaction Educational and learning applications
21 20 WebGPU Modern webgpu, modern, compute, next-gen webgpu_compute_birds; webgpu_tsl_editor; webgpu_postprocessing_bloom High WebGPU, TSL, Compute Shaders Modern WebGPU-based applications

487
.opencode/skills/threejs/references/00-fundamentals.md Normal file
View File

@@ -0,0 +1,487 @@
# Three.js Fundamentals
## Overview
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
## Quick Start
```javascript
import * as THREE from "three";
// Create 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(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
// Add a mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Add light
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// Handle resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
```
## Core Classes
### Scene
Container for all 3D objects, lights, and cameras.
```javascript
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Solid color
scene.background = texture; // Skybox texture
scene.background = cubeTexture; // Cubemap
scene.environment = envMap; // Environment map for PBR
scene.fog = new THREE.Fog(0xffffff, 1, 100); // Linear fog
scene.fog = new THREE.FogExp2(0xffffff, 0.02); // Exponential fog
```
### Cameras
**PerspectiveCamera** - Most common, simulates human eye.
```javascript
// PerspectiveCamera(fov, aspect, near, far)
const camera = new THREE.PerspectiveCamera(
75, // Field of view (degrees)
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near clipping plane
1000, // Far clipping plane
);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
camera.updateProjectionMatrix(); // Call after changing fov, aspect, near, far
```
**OrthographicCamera** - No perspective distortion, good for 2D/isometric.
```javascript
// OrthographicCamera(left, right, top, bottom, near, far)
const aspect = window.innerWidth / window.innerHeight;
const frustumSize = 10;
const camera = new THREE.OrthographicCamera(
(frustumSize * aspect) / -2,
(frustumSize * aspect) / 2,
frustumSize / 2,
frustumSize / -2,
0.1,
1000,
);
```
**ArrayCamera** - Multiple viewports with sub-cameras.
```javascript
const cameras = [];
for (let i = 0; i < 4; i++) {
const subcamera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);
subcamera.viewport = new THREE.Vector4(
Math.floor(i % 2) * 0.5,
Math.floor(i / 2) * 0.5,
0.5,
0.5,
);
cameras.push(subcamera);
}
const arrayCamera = new THREE.ArrayCamera(cameras);
```
**CubeCamera** - Renders environment maps for reflections.
```javascript
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);
scene.add(cubeCamera);
// Use for reflections
material.envMap = cubeRenderTarget.texture;
// Update each frame (expensive!)
cubeCamera.position.copy(reflectiveMesh.position);
cubeCamera.update(renderer, scene);
```
### WebGLRenderer
```javascript
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#canvas"), // Optional existing canvas
antialias: true, // Smooth edges
alpha: true, // Transparent background
powerPreference: "high-performance", // GPU hint
preserveDrawingBuffer: true, // For screenshots
});
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Tone mapping
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
// Color space (Three.js r152+)
renderer.outputColorSpace = THREE.SRGBColorSpace;
// Shadows
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// Clear color
renderer.setClearColor(0x000000, 1);
// Render
renderer.render(scene, camera);
```
### Object3D
Base class for all 3D objects. Mesh, Group, Light, Camera all extend Object3D.
```javascript
const obj = new THREE.Object3D();
// Transform
obj.position.set(x, y, z);
obj.rotation.set(x, y, z); // Euler angles (radians)
obj.quaternion.set(x, y, z, w); // Quaternion rotation
obj.scale.set(x, y, z);
// Local vs World transforms
obj.getWorldPosition(targetVector);
obj.getWorldQuaternion(targetQuaternion);
obj.getWorldDirection(targetVector);
// Hierarchy
obj.add(child);
obj.remove(child);
obj.parent;
obj.children;
// Visibility
obj.visible = false;
// Layers (for selective rendering/raycasting)
obj.layers.set(1);
obj.layers.enable(2);
obj.layers.disable(0);
// Traverse hierarchy
obj.traverse((child) => {
if (child.isMesh) child.material.color.set(0xff0000);
});
// Matrix updates
obj.matrixAutoUpdate = true; // Default: auto-update matrices
obj.updateMatrix(); // Manual matrix update
obj.updateMatrixWorld(true); // Update world matrix recursively
```
### Group
Empty container for organizing objects.
```javascript
const group = new THREE.Group();
group.add(mesh1);
group.add(mesh2);
scene.add(group);
// Transform entire group
group.position.x = 5;
group.rotation.y = Math.PI / 4;
```
### Mesh
Combines geometry and material.
```javascript
const mesh = new THREE.Mesh(geometry, material);
// Multiple materials (one per geometry group)
const mesh = new THREE.Mesh(geometry, [material1, material2]);
// Useful properties
mesh.geometry;
mesh.material;
mesh.castShadow = true;
mesh.receiveShadow = true;
// Frustum culling
mesh.frustumCulled = true; // Default: skip if outside camera view
// Render order
mesh.renderOrder = 10; // Higher = rendered later
```
## Coordinate System
Three.js uses a **right-handed coordinate system**:
- **+X** points right
- **+Y** points up
- **+Z** points toward viewer (out of screen)
```javascript
// Axes helper
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); // Red=X, Green=Y, Blue=Z
```
## Math Utilities
### Vector3
```javascript
const v = new THREE.Vector3(x, y, z);
v.set(x, y, z);
v.copy(otherVector);
v.clone();
// Operations (modify in place)
v.add(v2);
v.sub(v2);
v.multiply(v2);
v.multiplyScalar(2);
v.divideScalar(2);
v.normalize();
v.negate();
v.clamp(min, max);
v.lerp(target, alpha);
// Calculations (return new value)
v.length();
v.lengthSq(); // Faster than length()
v.distanceTo(v2);
v.dot(v2);
v.cross(v2); // Modifies v
v.angleTo(v2);
// Transform
v.applyMatrix4(matrix);
v.applyQuaternion(q);
v.project(camera); // World to NDC
v.unproject(camera); // NDC to world
```
### Matrix4
```javascript
const m = new THREE.Matrix4();
m.identity();
m.copy(other);
m.clone();
// Build transforms
m.makeTranslation(x, y, z);
m.makeRotationX(theta);
m.makeRotationY(theta);
m.makeRotationZ(theta);
m.makeRotationFromQuaternion(q);
m.makeScale(x, y, z);
// Compose/decompose
m.compose(position, quaternion, scale);
m.decompose(position, quaternion, scale);
// Operations
m.multiply(m2); // m = m * m2
m.premultiply(m2); // m = m2 * m
m.invert();
m.transpose();
// Camera matrices
m.makePerspective(left, right, top, bottom, near, far);
m.makeOrthographic(left, right, top, bottom, near, far);
m.lookAt(eye, target, up);
```
### Quaternion
```javascript
const q = new THREE.Quaternion();
q.setFromEuler(euler);
q.setFromAxisAngle(axis, angle);
q.setFromRotationMatrix(matrix);
q.multiply(q2);
q.slerp(target, t); // Spherical interpolation
q.normalize();
q.invert();
```
### Euler
```javascript
const euler = new THREE.Euler(x, y, z, "XYZ"); // Order matters!
euler.setFromQuaternion(q);
euler.setFromRotationMatrix(m);
// Rotation orders: 'XYZ', 'YXZ', 'ZXY', 'XZY', 'YZX', 'ZYX'
```
### Color
```javascript
const color = new THREE.Color(0xff0000);
const color = new THREE.Color("red");
const color = new THREE.Color("rgb(255, 0, 0)");
const color = new THREE.Color("#ff0000");
color.setHex(0x00ff00);
color.setRGB(r, g, b); // 0-1 range
color.setHSL(h, s, l); // 0-1 range
color.lerp(otherColor, alpha);
color.multiply(otherColor);
color.multiplyScalar(2);
```
### MathUtils
```javascript
THREE.MathUtils.clamp(value, min, max);
THREE.MathUtils.lerp(start, end, alpha);
THREE.MathUtils.mapLinear(value, inMin, inMax, outMin, outMax);
THREE.MathUtils.degToRad(degrees);
THREE.MathUtils.radToDeg(radians);
THREE.MathUtils.randFloat(min, max);
THREE.MathUtils.randInt(min, max);
THREE.MathUtils.smoothstep(x, min, max);
THREE.MathUtils.smootherstep(x, min, max);
```
## Common Patterns
### Proper Cleanup
```javascript
function dispose() {
// Dispose geometries
mesh.geometry.dispose();
// Dispose materials
if (Array.isArray(mesh.material)) {
mesh.material.forEach((m) => m.dispose());
} else {
mesh.material.dispose();
}
// Dispose textures
texture.dispose();
// Remove from scene
scene.remove(mesh);
// Dispose renderer
renderer.dispose();
}
```
### Clock for Animation
```javascript
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta(); // Time since last frame (seconds)
const elapsed = clock.getElapsedTime(); // Total time (seconds)
mesh.rotation.y += delta * 0.5; // Consistent speed regardless of framerate
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
```
### Responsive Canvas
```javascript
function onWindowResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}
window.addEventListener("resize", onWindowResize);
```
### Loading Manager
```javascript
const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => console.log("Started loading");
manager.onLoad = () => console.log("All loaded");
manager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total}`);
manager.onError = (url) => console.error(`Error loading ${url}`);
const textureLoader = new THREE.TextureLoader(manager);
const gltfLoader = new GLTFLoader(manager);
```
## Performance Tips
1. **Limit draw calls**: Merge geometries, use instancing, atlas textures
2. **Frustum culling**: Enabled by default, ensure bounding boxes are correct
3. **LOD (Level of Detail)**: Use `THREE.LOD` for distance-based mesh switching
4. **Object pooling**: Reuse objects instead of creating/destroying
5. **Avoid `getWorldPosition` in loops**: Cache results
```javascript
// Merge static geometries
import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
const merged = mergeGeometries([geo1, geo2, geo3]);
// LOD
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(medDetailMesh, 50);
lod.addLevel(lowDetailMesh, 100);
scene.add(lod);
```
## See Also
- `threejs-geometry` - Geometry creation and manipulation
- `threejs-materials` - Material types and properties
- `threejs-lighting` - Light types and shadows

177
.opencode/skills/threejs/references/01-getting-started.md Normal file
View File

@@ -0,0 +1,177 @@
# Getting Started with Three.js
Core concepts for building your first 3D scene.
## Essential Components
Every Three.js app needs 3 core elements:
### 1. Scene
Container for all 3D objects, lights, cameras.
```javascript
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // black background
scene.fog = new THREE.Fog(0xffffff, 1, 5000); // distance fog
```
### 2. Camera
Viewpoint into the 3D scene.
**PerspectiveCamera** (realistic, most common):
```javascript
const camera = new THREE.PerspectiveCamera(
75, // fov - field of view in degrees
window.innerWidth / window.innerHeight, // aspect ratio
0.1, // near clipping plane
1000 // far clipping plane
);
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);
```
**OrthographicCamera** (no perspective distortion):
```javascript
const camera = new THREE.OrthographicCamera(
left, right, top, bottom, near, far
);
```
### 3. Renderer
Renders scene using camera perspective.
```javascript
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
```
## Basic Geometries
Primitive shapes ready to use:
```javascript
// Box
new THREE.BoxGeometry(width, height, depth);
// Sphere
new THREE.SphereGeometry(radius, widthSegments, heightSegments);
// Plane
new THREE.PlaneGeometry(width, height);
// Cylinder
new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments);
// Cone
new THREE.ConeGeometry(radius, height, radialSegments);
// Torus
new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments);
```
## Basic Materials
Materials define surface appearance:
**MeshBasicMaterial** - unlit, flat color:
```javascript
new THREE.MeshBasicMaterial({ color: 0xff0000 });
```
**MeshStandardMaterial** - PBR, responds to lights:
```javascript
new THREE.MeshStandardMaterial({
color: 0x00ff00,
metalness: 0.5,
roughness: 0.5
});
```
**MeshPhongMaterial** - specular highlights:
```javascript
new THREE.MeshPhongMaterial({
color: 0x0000ff,
shininess: 100
});
```
## Creating Mesh
Combine geometry + material:
```javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
```
## Basic Lights
Materials (except Basic) need lights to be visible:
```javascript
// Ambient - global illumination
const ambient = new THREE.AmbientLight(0x404040); // soft white
scene.add(ambient);
// Directional - sun-like, infinite distance
const directional = new THREE.DirectionalLight(0xffffff, 1);
directional.position.set(5, 5, 5);
scene.add(directional);
// Point - lightbulb, radiates in all directions
const point = new THREE.PointLight(0xff0000, 1, 100);
point.position.set(0, 10, 0);
scene.add(point);
```
## Animation Loop
Continuously render and update scene:
```javascript
function animate() {
requestAnimationFrame(animate);
// Update objects
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Render
renderer.render(scene, camera);
}
animate();
```
## Handle Window Resize
Keep aspect ratio correct:
```javascript
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
```
## Object3D Hierarchy
Transform and group objects:
```javascript
const group = new THREE.Group();
group.add(cube1);
group.add(cube2);
scene.add(group);
// Transform
object.position.set(x, y, z);
object.rotation.set(x, y, z); // Euler angles
object.scale.set(x, y, z);
// Hierarchy transforms are relative to parent
```

169
.opencode/skills/threejs/references/02-loaders.md Normal file
View File

@@ -0,0 +1,169 @@
# Asset Loading
Load 3D models, textures, and other assets.
## Loading Manager
Coordinate multiple loads, track progress:
```javascript
const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => console.log('Loading:', url);
manager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total}`);
manager.onLoad = () => console.log('Complete');
manager.onError = (url) => console.error('Error:', url);
const loader = new THREE.TextureLoader(manager);
```
## GLTF Loader (Recommended Format)
Industry standard, supports PBR materials, animations, bones:
```javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
'model.gltf',
(gltf) => {
scene.add(gltf.scene);
// Access animations
const mixer = new THREE.AnimationMixer(gltf.scene);
gltf.animations.forEach((clip) => mixer.clipAction(clip).play());
},
(xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
(error) => console.error(error)
);
```
## FBX Loader
Autodesk format, common in game dev:
```javascript
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
const loader = new FBXLoader();
loader.load('model.fbx', (object) => {
scene.add(object);
});
```
## OBJ Loader
Simple geometry format:
```javascript
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
const loader = new OBJLoader();
loader.load('model.obj', (object) => {
scene.add(object);
});
// With MTL (material library)
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
const mtlLoader = new MTLLoader();
mtlLoader.load('model.mtl', (materials) => {
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('model.obj', (object) => scene.add(object));
});
```
## Texture Loader
Load images as textures:
```javascript
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
// Use in material
const material = new THREE.MeshStandardMaterial({ map: texture });
// Load with callback
textureLoader.load(
'texture.jpg',
(texture) => {
material.map = texture;
material.needsUpdate = true;
},
(xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
(error) => console.error(error)
);
```
## Cube Texture Loader
Load environment maps (skybox):
```javascript
const cubeLoader = new THREE.CubeTextureLoader();
const envMap = cubeLoader.load([
'px.jpg', 'nx.jpg', // positive x, negative x
'py.jpg', 'ny.jpg', // positive y, negative y
'pz.jpg', 'nz.jpg' // positive z, negative z
]);
scene.background = envMap;
material.envMap = envMap;
```
## DRACO Compressed Models
Smaller file sizes for GLTF:
```javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('compressed.gltf', (gltf) => scene.add(gltf.scene));
```
## KTX2 Compressed Textures
GPU-optimized texture compression:
```javascript
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('path/to/basis/');
ktx2Loader.detectSupport(renderer);
ktx2Loader.load('texture.ktx2', (texture) => {
material.map = texture;
material.needsUpdate = true;
});
```
## Common Other Loaders
```javascript
// STL (3D printing)
import { STLLoader } from 'three/addons/loaders/STLLoader.js';
// Collada (.dae)
import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
// 3DS Max
import { TDSLoader } from 'three/addons/loaders/TDSLoader.js';
```
## Best Practices
- Use GLTF/GLB for web (best compression, features)
- Compress with DRACO for large models
- Use KTX2 for textures (GPU-friendly)
- Enable caching: `THREE.Cache.enabled = true;`
- Show loading progress to users
- Handle errors gracefully

170
.opencode/skills/threejs/references/03-textures.md Normal file
View File

@@ -0,0 +1,170 @@
# Textures
Map images and data onto 3D surfaces.
## Texture Types
### Standard 2D Texture
```javascript
const texture = new THREE.Texture(image);
texture.needsUpdate = true; // required after manual creation
// Or use loader (auto-updates)
const texture = new THREE.TextureLoader().load('image.jpg');
```
### Canvas Texture
```javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Draw on canvas...
const texture = new THREE.CanvasTexture(canvas);
```
### Video Texture
```javascript
const video = document.createElement('video');
video.src = 'video.mp4';
video.play();
const texture = new THREE.VideoTexture(video);
```
### Data Texture
```javascript
const size = 512;
const data = new Uint8Array(size * size * 4);
// Fill data with RGBA values...
const texture = new THREE.DataTexture(data, size, size);
texture.needsUpdate = true;
```
### Cube Texture (Environment/Skybox)
```javascript
const loader = new THREE.CubeTextureLoader();
const texture = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
```
## Material Maps
Multiple texture types for different effects:
```javascript
const material = new THREE.MeshStandardMaterial({
map: diffuseTexture, // base color
normalMap: normalTexture, // surface detail
roughnessMap: roughnessTexture, // surface roughness variation
metalnessMap: metalnessTexture, // metallic areas
aoMap: aoTexture, // ambient occlusion
emissiveMap: emissiveTexture, // glow areas
alphaMap: alphaTexture, // transparency
bumpMap: bumpTexture, // height variation
displacementMap: dispTexture // vertex displacement
});
// AO map requires second UV set
geometry.setAttribute('uv2', geometry.attributes.uv);
```
## Wrapping Modes
Control texture repeat behavior:
```javascript
texture.wrapS = THREE.RepeatWrapping; // horizontal
texture.wrapT = THREE.RepeatWrapping; // vertical
// Options:
// THREE.RepeatWrapping - tile infinitely
// THREE.ClampToEdgeWrapping - stretch edge pixels
// THREE.MirroredRepeatWrapping - mirror on each repeat
// Set repeat count
texture.repeat.set(4, 4);
// Offset texture
texture.offset.set(0.5, 0.5);
```
## Filtering
Control texture sampling quality:
```javascript
// Magnification (when texel < pixel)
texture.magFilter = THREE.LinearFilter; // smooth
// or THREE.NearestFilter // pixelated
// Minification (when texel > pixel)
texture.minFilter = THREE.LinearMipmapLinearFilter; // best quality
// Options:
// THREE.NearestFilter
// THREE.LinearFilter
// THREE.NearestMipmapNearestFilter
// THREE.NearestMipmapLinearFilter
// THREE.LinearMipmapNearestFilter
// THREE.LinearMipmapLinearFilter
// Anisotropic filtering (better at angles)
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
```
## UV Mapping
Control how texture is mapped to geometry:
```javascript
// Flip texture vertically
texture.flipY = false;
// Rotate texture
texture.rotation = Math.PI / 4; // 45 degrees
texture.center.set(0.5, 0.5); // rotation center
// Transform UV coordinates
const uvAttribute = geometry.attributes.uv;
for (let i = 0; i < uvAttribute.count; i++) {
let u = uvAttribute.getX(i);
let v = uvAttribute.getY(i);
uvAttribute.setXY(i, u * 2, v * 2); // scale UVs
}
uvAttribute.needsUpdate = true;
```
## Color Space
Handle color space correctly:
```javascript
// For color data (diffuse, emissive)
texture.colorSpace = THREE.SRGBColorSpace;
// For non-color data (normal, roughness, etc.)
texture.colorSpace = THREE.NoColorSpace; // or LinearSRGBColorSpace
```
## Performance Optimization
```javascript
// Use mipmaps (auto-generated by default)
texture.generateMipmaps = true;
// Dispose when done
texture.dispose();
// Compress textures (use KTX2Loader for .ktx2 files)
// Reduce resolution for distant objects
// Use texture atlases to reduce draw calls
```
## Advanced Textures
```javascript
// 3D Texture (volumetric)
const texture3d = new THREE.Data3DTexture(data, width, height, depth);
// Depth Texture (for advanced effects)
const depthTexture = new THREE.DepthTexture(width, height);
// Compressed Texture
const compressedTexture = new THREE.CompressedTexture(...);
```

195
.opencode/skills/threejs/references/04-cameras.md Normal file
View File

@@ -0,0 +1,195 @@
# Cameras
Define viewpoint and projection for rendering.
## Perspective Camera
Realistic camera with field of view (most common):
```javascript
const camera = new THREE.PerspectiveCamera(
fov, // field of view in degrees (typically 45-75)
aspect, // width / height
near, // near clipping plane (typically 0.1)
far // far clipping plane (typically 1000)
);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
// Update after changing parameters
camera.fov = 60;
camera.updateProjectionMatrix();
```
## Orthographic Camera
No perspective distortion (parallel projection):
```javascript
const frustumSize = 10;
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
frustumSize * aspect / -2, // left
frustumSize * aspect / 2, // right
frustumSize / 2, // top
frustumSize / -2, // bottom
0.1, // near
1000 // far
);
// Useful for: 2D games, CAD, isometric views
```
## Camera Controls (Addons)
### OrbitControls (Most Common)
```javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true; // smooth motion
controls.dampingFactor = 0.05;
controls.minDistance = 5;
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2; // prevent going below ground
// In animation loop
function animate() {
controls.update(); // required if enableDamping = true
renderer.render(scene, camera);
}
```
### FirstPersonControls
```javascript
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
}
```
### FlyControls
```javascript
import { FlyControls } from 'three/addons/controls/FlyControls.js';
const controls = new FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;
```
### TransformControls
```javascript
import { TransformControls } from 'three/addons/controls/TransformControls.js';
const controls = new TransformControls(camera, renderer.domElement);
controls.attach(mesh);
scene.add(controls);
// Switch modes
controls.setMode('translate'); // or 'rotate', 'scale'
// Events
controls.addEventListener('change', () => renderer.render(scene, camera));
controls.addEventListener('dragging-changed', (event) => {
orbitControls.enabled = !event.value;
});
```
## Camera Methods
```javascript
// Position and orientation
camera.position.set(x, y, z);
camera.lookAt(x, y, z); // or lookAt(vector3) or lookAt(object.position)
camera.up.set(0, 1, 0); // define "up" direction
// Get world direction
const direction = new THREE.Vector3();
camera.getWorldDirection(direction);
// Screen to world conversion
const mouse = new THREE.Vector2(x, y); // normalized device coords (-1 to 1)
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
// World to screen
const vector = new THREE.Vector3(x, y, z);
vector.project(camera); // now in normalized device coords
```
## Layers
Selective rendering with layers:
```javascript
// Set object layers
mesh.layers.set(1);
// Set camera layers
camera.layers.enable(0); // render layer 0
camera.layers.enable(1); // render layer 1
camera.layers.disable(2); // don't render layer 2
// Objects on disabled layers won't be rendered
```
## Frustum Culling
Automatic optimization (objects outside view are not rendered):
```javascript
// Manually check if object is in view
const frustum = new THREE.Frustum();
const matrix = new THREE.Matrix4().multiplyMatrices(
camera.projectionMatrix,
camera.matrixWorldInverse
);
frustum.setFromProjectionMatrix(matrix);
if (frustum.containsPoint(object.position)) {
// Object is visible
}
```
## Multiple Cameras
```javascript
const mainCamera = new THREE.PerspectiveCamera(...);
const minimapCamera = new THREE.OrthographicCamera(...);
// Render with different viewports
renderer.setViewport(0, 0, width, height);
renderer.render(scene, mainCamera);
renderer.setViewport(width - 200, height - 200, 200, 200);
renderer.render(scene, minimapCamera);
```
## Resize Handling
```javascript
window.addEventListener('resize', () => {
// Perspective camera
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// Orthographic camera
const aspect = window.innerWidth / window.innerHeight;
camera.left = -frustumSize * aspect / 2;
camera.right = frustumSize * aspect / 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
```

183
.opencode/skills/threejs/references/05-lights.md Normal file
View File

@@ -0,0 +1,183 @@
# Lights
Illuminate 3D scenes with various light types.
## Ambient Light
Global illumination affecting all objects equally:
```javascript
const light = new THREE.AmbientLight(0x404040); // soft white
scene.add(light);
// Often used as base illumination with other lights
```
## Directional Light
Infinite distance light with parallel rays (sun-like):
```javascript
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 5);
light.target.position.set(0, 0, 0);
scene.add(light);
scene.add(light.target); // target must be in scene
// With shadows
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
// Visualize shadow camera
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);
```
## Point Light
Omnidirectional light from a point (lightbulb-like):
```javascript
const light = new THREE.PointLight(0xff0000, 1, 100, 2);
// params: color, intensity, distance (0 = infinite), decay
light.position.set(0, 10, 0);
scene.add(light);
// With shadows
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 100;
```
## Spot Light
Cone-shaped light (spotlight-like):
```javascript
const light = new THREE.SpotLight(0xffffff, 1);
light.position.set(0, 10, 0);
light.target.position.set(0, 0, 0);
scene.add(light);
scene.add(light.target);
// Cone parameters
light.angle = Math.PI / 6; // cone angle
light.penumbra = 0.1; // edge softness (0-1)
light.decay = 2; // light falloff
light.distance = 100; // max range (0 = infinite)
// With shadows
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
```
## Hemisphere Light
Sky/ground two-color lighting:
```javascript
const light = new THREE.HemisphereLight(
0x0000ff, // sky color (blue)
0x00ff00, // ground color (green)
0.6 // intensity
);
scene.add(light);
// Good for outdoor scenes
```
## RectArea Light (Addon)
Rectangular area light (realistic surface illumination):
```javascript
import { RectAreaLight } from 'three/addons/lights/RectAreaLight.js';
const light = new RectAreaLight(0xffffff, 5, 10, 10);
// params: color, intensity, width, height
light.position.set(0, 5, 0);
light.lookAt(0, 0, 0);
scene.add(light);
// Requires WebGL 2.0
```
## Shadow Configuration
Global renderer settings:
```javascript
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // soft shadows
// Shadow types:
// THREE.BasicShadowMap - fast, aliased
// THREE.PCFShadowMap - smoother
// THREE.PCFSoftShadowMap - softer (default)
// THREE.VSMShadowMap - variance shadow maps
// Objects must opt-in to shadows
mesh.castShadow = true; // object casts shadows
mesh.receiveShadow = true; // object receives shadows
```
## Light Helpers
Visualize light positions and directions:
```javascript
// Directional light
const helper = new THREE.DirectionalLightHelper(light, 5);
scene.add(helper);
// Point light
const helper = new THREE.PointLightHelper(light, 1);
scene.add(helper);
// Spot light
const helper = new THREE.SpotLightHelper(light);
scene.add(helper);
// Hemisphere light
const helper = new THREE.HemisphereLightHelper(light, 5);
scene.add(helper);
// RectArea light
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
const helper = new RectAreaLightHelper(light);
light.add(helper);
```
## Light Intensity & Units
```javascript
// Intensity values depend on physically-based rendering:
// - Lower values (0.1-1) for ambient/hemisphere
// - Higher values (1-10) for directional/point/spot
// - Very high (10-100+) for small area lights
// Physical light units (optional)
renderer.physicallyCorrectLights = true; // deprecated in newer versions
// Use intensity in candelas (cd) for point/spot lights
```
## Performance Tips
- Limit number of lights (3-5 for good performance)
- Use ambient + 1-2 directional lights for outdoor scenes
- Bake lighting into textures for static scenes
- Use lightmaps for complex static lighting
- Shadows are expensive - use selectively
- Lower shadow map resolution for better performance

214
.opencode/skills/threejs/references/06-animations.md Normal file
View File

@@ -0,0 +1,214 @@
# Animations
Animate objects, cameras, and imported models.
## Animation System
Three.js uses AnimationMixer for playback:
```javascript
// Create mixer for object
const mixer = new THREE.AnimationMixer(object);
// Play animation clip
const action = mixer.clipAction(animationClip);
action.play();
// Update in render loop
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Loading Animations
From GLTF/FBX files:
```javascript
const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
scene.add(gltf.scene);
const mixer = new THREE.AnimationMixer(gltf.scene);
// Play all animations
gltf.animations.forEach((clip) => {
mixer.clipAction(clip).play();
});
// Or play specific animation
const clip = THREE.AnimationClip.findByName(gltf.animations, 'Walk');
const action = mixer.clipAction(clip);
action.play();
});
```
## Animation Actions
Control playback:
```javascript
const action = mixer.clipAction(clip);
// Playback control
action.play();
action.stop();
action.pause();
action.reset();
// Loop modes
action.setLoop(THREE.LoopRepeat, Infinity); // loop forever
action.setLoop(THREE.LoopOnce, 1); // play once, stop at end
action.setLoop(THREE.LoopPingPong, Infinity); // reverse on each loop
// Speed control
action.timeScale = 1.5; // 1.5x speed
action.timeScale = -1; // reverse
// Weight (for blending)
action.setEffectiveWeight(0.5); // 50% influence
// Enable/disable
action.enabled = true;
```
## Animation Blending
Smooth transitions between animations:
```javascript
// Crossfade between two actions
currentAction.crossFadeTo(nextAction, 0.5, true); // 0.5 second transition
// Or manually control weights
currentAction.fadeOut(0.5);
nextAction.reset().fadeIn(0.5).play();
```
## Creating Custom Animations
Using KeyframeTracks:
```javascript
// Position animation
const times = [0, 1, 2]; // keyframe times in seconds
const values = [0, 0, 0, 10, 0, 0, 0, 0, 0]; // x,y,z for each time
const positionKF = new THREE.VectorKeyframeTrack(
'.position', // property path
times,
values
);
// Rotation animation (quaternions)
const quaternion1 = new THREE.Quaternion();
const quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0));
const rotationKF = new THREE.QuaternionKeyframeTrack(
'.quaternion',
[0, 1],
[
quaternion1.x, quaternion1.y, quaternion1.z, quaternion1.w,
quaternion2.x, quaternion2.y, quaternion2.z, quaternion2.w
]
);
// Create clip from tracks
const clip = new THREE.AnimationClip('custom', 2, [positionKF, rotationKF]);
const mixer = new THREE.AnimationMixer(object);
mixer.clipAction(clip).play();
```
## Keyframe Track Types
```javascript
// Different track types for different properties
new THREE.VectorKeyframeTrack('.position', times, values);
new THREE.VectorKeyframeTrack('.scale', times, values);
new THREE.QuaternionKeyframeTrack('.quaternion', times, values);
new THREE.ColorKeyframeTrack('.material.color', times, values);
new THREE.NumberKeyframeTrack('.material.opacity', times, values);
new THREE.BooleanKeyframeTrack('.visible', times, values);
```
## Skeletal Animation
For rigged characters:
```javascript
// Object must be SkinnedMesh with skeleton
const mesh = gltf.scene.children.find(child => child.isSkinnedMesh);
// Access bones
const skeleton = mesh.skeleton;
const bones = skeleton.bones;
// Manually control bones
bones[0].rotation.x = Math.PI / 4;
// Use SkeletonHelper to visualize
const helper = new THREE.SkeletonHelper(mesh);
scene.add(helper);
```
## Morph Target Animation
Blend shapes:
```javascript
// Morph targets are defined in geometry
const mesh = new THREE.Mesh(geometry, material);
// Animate morph influences
mesh.morphTargetInfluences[0] = 0.5; // 50% of first morph target
// Create animation clip for morphs
const track = new THREE.NumberKeyframeTrack(
'.morphTargetInfluences[0]',
[0, 1, 2],
[0, 1, 0]
);
const clip = new THREE.AnimationClip('morph', 2, [track]);
```
## Manual Animation
Simple transform animations:
```javascript
const clock = new THREE.Clock();
function animate() {
const elapsed = clock.getElapsedTime();
// Rotate
object.rotation.y = elapsed;
// Oscillate position
object.position.y = Math.sin(elapsed * 2) * 5;
// Pulse scale
const scale = 1 + Math.sin(elapsed * 3) * 0.1;
object.scale.set(scale, scale, scale);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Tween Libraries
For complex easing (use with external lib like GSAP):
```javascript
// With GSAP
gsap.to(object.position, {
duration: 1,
x: 10,
ease: "power2.inOut"
});
```

260
.opencode/skills/threejs/references/07-math.md Normal file
View File

@@ -0,0 +1,260 @@
# Math Utilities
Essential mathematical objects for 3D programming.
## Vector3
3D position, direction, or scale:
```javascript
const v = new THREE.Vector3(x, y, z);
// Operations
v.add(otherVector);
v.sub(otherVector);
v.multiply(otherVector);
v.multiplyScalar(scalar);
v.divide(otherVector);
v.divideScalar(scalar);
// Analysis
v.length(); // magnitude
v.lengthSq(); // magnitude squared (faster)
v.normalize(); // make length = 1
v.dot(otherVector); // dot product
v.cross(otherVector); // cross product
v.distanceTo(otherVector);
v.angleTo(otherVector);
// Interpolation
v.lerp(targetVector, alpha); // linear interpolation
v.lerpVectors(v1, v2, alpha);
// Clamping
v.clamp(minVector, maxVector);
v.clampLength(minLength, maxLength);
```
## Vector2 & Vector4
Similar to Vector3 but 2D and 4D:
```javascript
const v2 = new THREE.Vector2(x, y);
const v4 = new THREE.Vector4(x, y, z, w);
```
## Quaternion
Rotation representation (avoids gimbal lock):
```javascript
const q = new THREE.Quaternion(x, y, z, w);
// From Euler angles
q.setFromEuler(new THREE.Euler(x, y, z, 'XYZ'));
// From axis-angle
const axis = new THREE.Vector3(0, 1, 0);
q.setFromAxisAngle(axis, Math.PI / 2);
// From rotation matrix
q.setFromRotationMatrix(matrix);
// Interpolation
q.slerp(targetQuaternion, alpha); // spherical linear interpolation
// Apply to vector
const v = new THREE.Vector3(1, 0, 0);
v.applyQuaternion(q);
```
## Euler
Rotation as XYZ angles (degrees):
```javascript
const euler = new THREE.Euler(x, y, z, 'XYZ');
// Order: 'XYZ', 'YXZ', 'ZXY', 'ZYX', 'YZX', 'XZY'
// From quaternion
euler.setFromQuaternion(q);
// From rotation matrix
euler.setFromRotationMatrix(matrix);
// Apply to object
object.rotation.copy(euler);
```
## Matrix4
4x4 transformation matrix:
```javascript
const m = new THREE.Matrix4();
// Compose transformation
m.compose(position, quaternion, scale);
// Decompose
const pos = new THREE.Vector3();
const quat = new THREE.Quaternion();
const scale = new THREE.Vector3();
m.decompose(pos, quat, scale);
// Transform operations
m.makeTranslation(x, y, z);
m.makeRotationX(theta);
m.makeRotationY(theta);
m.makeRotationZ(theta);
m.makeScale(x, y, z);
// Combine matrices
m.multiply(otherMatrix);
m.premultiply(otherMatrix);
// Invert
m.invert();
// Apply to vector
const v = new THREE.Vector3(1, 2, 3);
v.applyMatrix4(m);
```
## Color
Color manipulation:
```javascript
const color = new THREE.Color(0xff0000); // hex
const color = new THREE.Color('red'); // CSS
const color = new THREE.Color(1, 0, 0); // RGB 0-1
// Conversions
color.getHex(); // 0xff0000
color.getHexString(); // "ff0000"
color.getStyle(); // "rgb(255,0,0)"
// Color spaces
color.setHSL(h, s, l); // hue, saturation, lightness
const hsl = {};
color.getHSL(hsl); // fills hsl object
// Operations
color.add(otherColor);
color.multiply(otherColor);
color.lerp(targetColor, alpha);
```
## Raycaster
Ray intersection testing:
```javascript
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// Convert mouse to normalized device coordinates
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// Set ray from camera
raycaster.setFromCamera(mouse, camera);
// Find intersections
const intersects = raycaster.intersectObjects(scene.children, true);
// recursive = true to check children
if (intersects.length > 0) {
const hit = intersects[0];
console.log(hit.object); // intersected object
console.log(hit.point); // intersection point (Vector3)
console.log(hit.distance); // distance from camera
console.log(hit.face); // intersected face
}
```
## Box3
Axis-aligned bounding box:
```javascript
const box = new THREE.Box3();
// From object
box.setFromObject(mesh);
// From points
box.setFromPoints(arrayOfVector3);
// Properties
box.min; // Vector3
box.max; // Vector3
box.getCenter(target); // fills target Vector3
box.getSize(target); // fills target Vector3
// Tests
box.containsPoint(point);
box.intersectsBox(otherBox);
```
## Sphere
Bounding sphere:
```javascript
const sphere = new THREE.Sphere(center, radius);
// From box
sphere.setFromPoints(arrayOfVector3);
// From object
const box = new THREE.Box3().setFromObject(mesh);
box.getBoundingSphere(sphere);
// Tests
sphere.containsPoint(point);
sphere.intersectsSphere(otherSphere);
```
## Plane
Infinite plane:
```javascript
const plane = new THREE.Plane(normal, constant);
// normal: Vector3, constant: distance from origin
// From coplanar points
plane.setFromCoplanarPoints(p1, p2, p3);
// Distance to point
plane.distanceToPoint(point);
// Project point onto plane
const projected = new THREE.Vector3();
plane.projectPoint(point, projected);
```
## Curves
Parametric curves:
```javascript
// Bezier curve
const curve = new THREE.CubicBezierCurve3(
new THREE.Vector3(-10, 0, 0),
new THREE.Vector3(-5, 15, 0),
new THREE.Vector3(20, 15, 0),
new THREE.Vector3(10, 0, 0)
);
// Sample points
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
// Get point at t (0-1)
const point = curve.getPoint(0.5);
```

267
.opencode/skills/threejs/references/08-interaction.md Normal file
View File

@@ -0,0 +1,267 @@
# Interaction & Picking
Handle user input and object interaction.
## Mouse/Touch Raycasting
Detect which object user clicked:
```javascript
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const clickableObjects = []; // array of meshes
function onPointerMove(event) {
// Normalize mouse coordinates (-1 to +1)
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// Update raycaster
raycaster.setFromCamera(mouse, camera);
// Find intersections
const intersects = raycaster.intersectObjects(clickableObjects);
if (intersects.length > 0) {
// Hover effect
intersects[0].object.material.emissive.setHex(0xff0000);
}
}
function onClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(clickableObjects);
if (intersects.length > 0) {
const object = intersects[0].object;
console.log('Clicked:', object.name);
console.log('Point:', intersects[0].point);
}
}
renderer.domElement.addEventListener('pointermove', onPointerMove);
renderer.domElement.addEventListener('click', onClick);
```
## DragControls (Addon)
Drag objects with mouse:
```javascript
import { DragControls } from 'three/addons/controls/DragControls.js';
const controls = new DragControls(objectsArray, camera, renderer.domElement);
// Events
controls.addEventListener('dragstart', (event) => {
orbitControls.enabled = false; // disable camera controls during drag
event.object.material.emissive.set(0xaaaaaa);
});
controls.addEventListener('drag', (event) => {
console.log(event.object.position);
});
controls.addEventListener('dragend', (event) => {
orbitControls.enabled = true;
event.object.material.emissive.set(0x000000);
});
```
## TransformControls (Addon)
Interactive 3D gizmo for translate/rotate/scale:
```javascript
import { TransformControls } from 'three/addons/controls/TransformControls.js';
const transformControls = new TransformControls(camera, renderer.domElement);
scene.add(transformControls);
// Attach to object
transformControls.attach(mesh);
// Switch modes
transformControls.setMode('translate'); // or 'rotate', 'scale'
// Switch space
transformControls.setSpace('world'); // or 'local'
// Events
transformControls.addEventListener('change', () => {
renderer.render(scene, camera);
});
transformControls.addEventListener('dragging-changed', (event) => {
orbitControls.enabled = !event.value; // disable orbit during transform
});
// Keyboard shortcuts
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'g': transformControls.setMode('translate'); break;
case 'r': transformControls.setMode('rotate'); break;
case 's': transformControls.setMode('scale'); break;
case 'x': transformControls.showX = !transformControls.showX; break;
case 'Escape': transformControls.detach(); break;
}
});
```
## Selection Box (Addon)
Box selection for multiple objects:
```javascript
import { SelectionBox } from 'three/addons/interactive/SelectionBox.js';
import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js';
const selectionBox = new SelectionBox(camera, scene);
const helper = new SelectionHelper(renderer, 'selectBox');
let isSelecting = false;
renderer.domElement.addEventListener('pointerdown', (event) => {
isSelecting = true;
selectionBox.startPoint.set(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
);
});
renderer.domElement.addEventListener('pointermove', (event) => {
if (isSelecting) {
selectionBox.endPoint.set(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
);
const allSelected = selectionBox.select();
console.log('Selected:', allSelected.length);
}
});
renderer.domElement.addEventListener('pointerup', () => {
isSelecting = false;
});
```
## Keyboard Input
Handle keyboard controls:
```javascript
const keysPressed = {};
window.addEventListener('keydown', (event) => {
keysPressed[event.key] = true;
});
window.addEventListener('keyup', (event) => {
keysPressed[event.key] = false;
});
// In animation loop
function animate() {
const speed = 0.1;
if (keysPressed['w']) object.position.z -= speed;
if (keysPressed['s']) object.position.z += speed;
if (keysPressed['a']) object.position.x -= speed;
if (keysPressed['d']) object.position.x += speed;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Pointer Lock (First Person)
Lock pointer for FPS controls:
```javascript
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
const controls = new PointerLockControls(camera, renderer.domElement);
// Lock on click
renderer.domElement.addEventListener('click', () => {
controls.lock();
});
controls.addEventListener('lock', () => {
console.log('Pointer locked');
});
controls.addEventListener('unlock', () => {
console.log('Pointer unlocked');
});
// Movement
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
function animate() {
if (controls.isLocked) {
// Apply movement
controls.moveForward(velocity.z);
controls.moveRight(velocity.x);
}
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Object Highlighting
Visual feedback on hover/selection:
```javascript
let hoveredObject = null;
const originalEmissive = new THREE.Color();
function onPointerMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
// Reset previous
if (hoveredObject) {
hoveredObject.material.emissive.copy(originalEmissive);
hoveredObject = null;
}
// Highlight new
if (intersects.length > 0) {
hoveredObject = intersects[0].object;
originalEmissive.copy(hoveredObject.material.emissive);
hoveredObject.material.emissive.setHex(0x555555);
}
renderer.domElement.style.cursor = hoveredObject ? 'pointer' : 'default';
}
```
## Tooltips & UI Overlays
Show HTML tooltip at 3D position:
```javascript
function updateTooltip(object3D, text) {
const vector = object3D.position.clone();
vector.project(camera);
const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
const y = (-vector.y * 0.5 + 0.5) * window.innerHeight;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
tooltip.textContent = text;
}
```

240
.opencode/skills/threejs/references/09-postprocessing.md Normal file
View File

@@ -0,0 +1,240 @@
# Post-Processing
Apply visual effects after rendering.
## EffectComposer Setup
Post-processing pipeline (addon):
```javascript
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
// Create composer
const composer = new EffectComposer(renderer);
// Add render pass (required first pass)
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add effect passes
// ... (see below)
// Add output pass (required last pass)
const outputPass = new OutputPass();
composer.addPass(outputPass);
// Render with composer instead of renderer
function animate() {
requestAnimationFrame(animate);
composer.render();
}
// Handle resize
window.addEventListener('resize', () => {
composer.setSize(window.innerWidth, window.innerHeight);
});
```
## Bloom Effect
Glow effect for bright areas:
```javascript
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, // strength
0.4, // radius
0.85 // threshold (brightness trigger)
);
composer.addPass(bloomPass);
// Adjust parameters
bloomPass.strength = 2.0;
bloomPass.radius = 1.0;
bloomPass.threshold = 0.5;
```
## SSAO (Screen Space Ambient Occlusion)
Realistic shadowing in crevices:
```javascript
import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
const ssaoPass = new SSAOPass(scene, camera, width, height);
ssaoPass.kernelRadius = 16;
ssaoPass.minDistance = 0.005;
ssaoPass.maxDistance = 0.1;
composer.addPass(ssaoPass);
```
## SSR (Screen Space Reflections)
Real-time reflections:
```javascript
import { SSRPass } from 'three/addons/postprocessing/SSRPass.js';
const ssrPass = new SSRPass({
renderer,
scene,
camera,
width: window.innerWidth,
height: window.innerHeight
});
ssrPass.opacity = 0.5;
ssrPass.maxDistance = 0.1;
composer.addPass(ssrPass);
```
## Depth of Field (Bokeh)
Blur based on depth:
```javascript
import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
const bokehPass = new BokehPass(scene, camera, {
focus: 10.0, // focal distance
aperture: 0.025, // blur amount
maxblur: 0.01 // max blur size
});
composer.addPass(bokehPass);
```
## FXAA (Anti-Aliasing)
Smooth jagged edges:
```javascript
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
const fxaaPass = new ShaderPass(FXAAShader);
fxaaPass.material.uniforms['resolution'].value.x = 1 / window.innerWidth;
fxaaPass.material.uniforms['resolution'].value.y = 1 / window.innerHeight;
composer.addPass(fxaaPass);
```
## Outline Pass
Highlight selected objects:
```javascript
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
const outlinePass = new OutlinePass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
scene,
camera
);
outlinePass.edgeStrength = 3;
outlinePass.edgeGlow = 0.5;
outlinePass.edgeThickness = 1;
outlinePass.visibleEdgeColor.set('#ffffff');
outlinePass.hiddenEdgeColor.set('#190a05');
// Set objects to outline
outlinePass.selectedObjects = [mesh1, mesh2];
composer.addPass(outlinePass);
```
## Film/Grain Effect
Add film grain and scanlines:
```javascript
import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
const filmPass = new FilmPass(
0.35, // noise intensity
0.5, // scanline intensity
648, // scanline count
false // grayscale
);
composer.addPass(filmPass);
```
## Glitch Effect
Digital glitch distortion:
```javascript
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);
```
## Custom Shader Pass
Create custom effects:
```javascript
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
const customShader = {
uniforms: {
tDiffuse: { value: null },
amount: { value: 1.0 }
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D tDiffuse;
uniform float amount;
varying vec2 vUv;
void main() {
vec4 color = texture2D(tDiffuse, vUv);
// Apply custom effect
color.r *= amount;
gl_FragColor = color;
}
`
};
const customPass = new ShaderPass(customShader);
customPass.material.uniforms.amount.value = 1.5;
composer.addPass(customPass);
```
## Common Pass Patterns
```javascript
// Combine multiple effects
composer.addPass(renderPass);
composer.addPass(ssaoPass);
composer.addPass(bloomPass);
composer.addPass(fxaaPass);
composer.addPass(outputPass);
// Selective rendering
bloomPass.renderToScreen = false; // render to texture, not screen
// Clear pass
import { ClearPass } from 'three/addons/postprocessing/ClearPass.js';
const clearPass = new ClearPass();
composer.addPass(clearPass);
```
## Performance Tips
- Post-processing is GPU-intensive
- Use lower resolution for expensive effects (SSAO, SSR)
- Limit number of passes (3-5 for good performance)
- Disable passes when not needed
- Use FXAA instead of MSAA (cheaper)
- Test on target devices

259
.opencode/skills/threejs/references/10-controls.md Normal file
View File

@@ -0,0 +1,259 @@
# Camera Controls (Addons)
Interactive camera navigation systems.
## OrbitControls (Most Common)
Orbit camera around a target:
```javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
// Target point
controls.target.set(0, 0, 0);
// Damping (smooth motion)
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Zoom limits
controls.minDistance = 5;
controls.maxDistance = 50;
// Rotation limits
controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI / 2; // prevent going below ground
controls.minAzimuthAngle = -Math.PI / 4; // horizontal limit
controls.maxAzimuthAngle = Math.PI / 4;
// Behavior
controls.enablePan = true;
controls.enableZoom = true;
controls.enableRotate = true;
controls.autoRotate = true;
controls.autoRotateSpeed = 2.0;
// Mouse buttons
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
};
// In animation loop (required if damping enabled)
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
// Events
controls.addEventListener('change', () => {
renderer.render(scene, camera);
});
```
## MapControls
Bird's-eye map navigation (like OrbitControls but different mouse behavior):
```javascript
import { MapControls } from 'three/addons/controls/MapControls.js';
const controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;
// Mouse buttons
controls.mouseButtons = {
LEFT: THREE.MOUSE.PAN,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.ROTATE
};
```
## FirstPersonControls
FPS-style camera movement:
```javascript
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.0;
controls.verticalMax = 2.0;
// Requires delta time
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## FlyControls
Free-form flying navigation:
```javascript
import { FlyControls } from 'three/addons/controls/FlyControls.js';
const controls = new FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 24;
controls.autoForward = false;
controls.dragToLook = false;
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## PointerLockControls
Locked pointer FPS controls:
```javascript
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
const controls = new PointerLockControls(camera, renderer.domElement);
// Lock pointer on click
renderer.domElement.addEventListener('click', () => {
controls.lock();
});
controls.addEventListener('lock', () => {
console.log('Locked');
});
controls.addEventListener('unlock', () => {
console.log('Unlocked');
});
// Movement
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
window.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward = true; break;
case 'KeyS': moveBackward = true; break;
case 'KeyA': moveLeft = true; break;
case 'KeyD': moveRight = true; break;
}
});
function animate() {
if (controls.isLocked) {
// Calculate movement
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize();
controls.moveForward(direction.z * 10);
controls.moveRight(direction.x * 10);
}
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## TrackballControls
Intuitive rotation (no gimbal lock):
```javascript
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
const controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## ArcballControls
3D rotation with virtual ball metaphor:
```javascript
import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
const controls = new ArcballControls(camera, renderer.domElement, scene);
controls.enablePan = true;
controls.enableZoom = true;
controls.enableRotate = true;
controls.cursorZoom = true;
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Controls Comparison
**OrbitControls**: Product viewers, 3D models, general use
**MapControls**: Top-down maps, strategy games
**FirstPersonControls**: Architectural walkthroughs
**FlyControls**: Space navigation, creative tools
**PointerLockControls**: FPS games
**TrackballControls**: CAD applications
**ArcballControls**: Scientific visualization
## Common Patterns
```javascript
// Disable controls during UI interaction
transformControls.addEventListener('dragging-changed', (event) => {
orbitControls.enabled = !event.value;
});
// Reset camera position
function resetCamera() {
controls.reset();
}
// Animate camera to position
function moveCameraTo(position, target) {
gsap.to(camera.position, {
duration: 1,
x: position.x,
y: position.y,
z: position.z,
onUpdate: () => controls.update()
});
gsap.to(controls.target, {
duration: 1,
x: target.x,
y: target.y,
z: target.z
});
}
```

270
.opencode/skills/threejs/references/11-materials-advanced.md Normal file
View File

@@ -0,0 +1,270 @@
# Three.js - Advanced Materials
PBR materials and custom shaders.
## MeshStandardMaterial (PBR)
Physically-based rendering with metallic/roughness workflow:
```javascript
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
metalness: 0.5, // 0 = dielectric, 1 = metal
roughness: 0.5, // 0 = smooth/shiny, 1 = rough/matte
map: colorTexture, // base color
normalMap: normalTexture, // surface detail
roughnessMap: roughnessTexture,
metalnessMap: metalnessTexture,
aoMap: aoTexture, // ambient occlusion
emissive: 0xff0000, // glow color
emissiveMap: emissiveTexture,
emissiveIntensity: 1.0,
envMap: environmentMap, // reflections
envMapIntensity: 1.0,
alphaMap: alphaTexture, // transparency control
transparent: true,
opacity: 1.0,
side: THREE.DoubleSide, // render both sides
flatShading: false // smooth normals
});
```
## MeshPhysicalMaterial (Enhanced PBR)
Extended PBR with clearcoat, transmission, sheen:
```javascript
const material = new THREE.MeshPhysicalMaterial({
// All MeshStandardMaterial properties plus:
// Clearcoat (protective layer)
clearcoat: 1.0,
clearcoatRoughness: 0.1,
clearcoatMap: clearcoatTexture,
clearcoatRoughnessMap: clearcoatRoughTexture,
clearcoatNormalMap: clearcoatNormalTexture,
// Transmission (transparency with refraction)
transmission: 1.0, // 0-1, glass-like
thickness: 0.5, // volumetric thickness
ior: 1.5, // index of refraction (glass = 1.5)
// Sheen (fabric-like edge glow)
sheen: 1.0,
sheenRoughness: 0.5,
sheenColor: new THREE.Color(0xffffff),
// Iridescence (rainbow effect)
iridescence: 1.0,
iridescenceIOR: 1.3,
iridescenceThicknessRange: [100, 400],
// Anisotropy (directional reflections)
anisotropy: 1.0,
anisotropyRotation: 0
});
```
## ShaderMaterial (Custom Shaders)
Full control over vertex and fragment shaders:
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0.0 },
color: { value: new THREE.Color(0xff0000) },
texture1: { value: texture }
},
vertexShader: `
varying vec2 vUv;
varying vec3 vNormal;
void main() {
vUv = uv;
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float time;
uniform vec3 color;
uniform sampler2D texture1;
varying vec2 vUv;
varying vec3 vNormal;
void main() {
vec4 texColor = texture2D(texture1, vUv);
vec3 light = vec3(0.5, 0.2, 1.0);
float dProd = max(0.0, dot(vNormal, light));
gl_FragColor = vec4(color * dProd * texColor.rgb, 1.0);
}
`,
transparent: true,
side: THREE.DoubleSide
});
// Update uniform in animation loop
material.uniforms.time.value += 0.01;
```
## RawShaderMaterial
Like ShaderMaterial but without Three.js shader injection:
```javascript
const material = new THREE.RawShaderMaterial({
uniforms: {
// ...
},
vertexShader: `
precision mediump float;
precision mediump int;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
precision mediump float;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv, 0.0, 1.0);
}
`
});
```
## Common Shader Patterns
### Fresnel Effect
```glsl
// In fragment shader
float fresnel = pow(1.0 - dot(vNormal, vViewDirection), 3.0);
gl_FragColor = vec4(mix(baseColor, edgeColor, fresnel), 1.0);
```
### Noise/Distortion
```glsl
// Simple noise function
float noise(vec2 p) {
return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
// UV distortion
vec2 distortedUV = vUv + vec2(
noise(vUv + time) * 0.1,
noise(vUv.yx + time) * 0.1
);
```
### Scrolling Texture
```glsl
uniform float time;
varying vec2 vUv;
vec2 scrollUV = vUv + vec2(time * 0.1, 0.0);
vec4 color = texture2D(map, scrollUV);
```
## Material Blending
```javascript
material.blending = THREE.AdditiveBlending;
// Options:
// THREE.NoBlending
// THREE.NormalBlending (default)
// THREE.AdditiveBlending (glow/light effects)
// THREE.SubtractiveBlending
// THREE.MultiplyBlending
// Custom blending
material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation;
material.blendSrc = THREE.SrcAlphaFactor;
material.blendDst = THREE.OneMinusSrcAlphaFactor;
```
## Depth & Stencil
```javascript
// Depth testing
material.depthTest = true;
material.depthWrite = true;
material.depthFunc = THREE.LessEqualDepth;
// Alpha testing (discard transparent pixels)
material.alphaTest = 0.5;
// Render order
mesh.renderOrder = 1; // higher renders later
// Polygonoffset (prevent z-fighting)
material.polygonOffset = true;
material.polygonOffsetFactor = 1;
material.polygonOffsetUnits = 1;
```
## Material Cloning & Disposal
```javascript
// Clone material
const material2 = material.clone();
// Dispose when done (free GPU memory)
material.dispose();
texture.dispose();
geometry.dispose();
```
## Common Built-in Uniforms
Available in ShaderMaterial (automatic):
```glsl
// Matrices
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
// Camera
uniform vec3 cameraPosition;
// Attributes (vertex shader)
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec2 uv2;
```
## Performance Tips
- Use MeshStandardMaterial for most cases (good balance)
- MeshPhysicalMaterial is expensive (use sparingly)
- ShaderMaterial requires GPU knowledge
- Avoid transparent materials when possible
- Use alphaTest instead of transparency for cutouts
- Minimize uniform updates
- Share materials between meshes

519
.opencode/skills/threejs/references/11-materials.md Normal file
View File

@@ -0,0 +1,519 @@
# Three.js Materials
## Overview
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
## Quick Start
```javascript
import * as THREE from "three";
// PBR material (recommended for realistic rendering)
const material = new THREE.MeshStandardMaterial({
color: 0x00ff00,
roughness: 0.5,
metalness: 0.5,
});
const mesh = new THREE.Mesh(geometry, material);
```
## Material Types Overview
| Material | Use Case | Lighting |
| -------------------- | ------------------------------------- | ------------------ |
| MeshBasicMaterial | Unlit, flat colors, wireframes | No |
| MeshLambertMaterial | Matte surfaces, performance | Yes (diffuse only) |
| MeshPhongMaterial | Shiny surfaces, specular highlights | Yes |
| MeshStandardMaterial | PBR, realistic materials | Yes (PBR) |
| MeshPhysicalMaterial | Advanced PBR, clearcoat, transmission | Yes (PBR+) |
| MeshToonMaterial | Cel-shaded, cartoon look | Yes (toon) |
| MeshNormalMaterial | Debug normals | No |
| MeshDepthMaterial | Depth visualization | No |
| ShaderMaterial | Custom GLSL shaders | Custom |
| RawShaderMaterial | Full shader control | Custom |
## MeshBasicMaterial
No lighting calculations. Fast, always visible.
```javascript
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide, // FrontSide, BackSide, DoubleSide
wireframe: false,
map: texture, // Color/diffuse texture
alphaMap: alphaTexture, // Transparency texture
envMap: envTexture, // Reflection texture
reflectivity: 1, // Env map intensity
fog: true, // Affected by scene fog
});
```
## MeshLambertMaterial
Diffuse-only lighting. Fast, no specular highlights.
```javascript
const material = new THREE.MeshLambertMaterial({
color: 0x00ff00,
emissive: 0x111111, // Self-illumination color
emissiveIntensity: 1,
map: texture,
emissiveMap: emissiveTexture,
envMap: envTexture,
reflectivity: 0.5,
});
```
## MeshPhongMaterial
Specular highlights. Good for shiny, plastic-like surfaces.
```javascript
const material = new THREE.MeshPhongMaterial({
color: 0x0000ff,
specular: 0xffffff, // Highlight color
shininess: 100, // Highlight sharpness (0-1000)
emissive: 0x000000,
flatShading: false, // Flat vs smooth shading
map: texture,
specularMap: specTexture, // Per-pixel shininess
normalMap: normalTexture,
normalScale: new THREE.Vector2(1, 1),
bumpMap: bumpTexture,
bumpScale: 1,
displacementMap: dispTexture,
displacementScale: 1,
});
```
## MeshStandardMaterial (PBR)
Physically-based rendering. Recommended for realistic results.
```javascript
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 0.5, // 0 = mirror, 1 = diffuse
metalness: 0.0, // 0 = dielectric, 1 = metal
// Textures
map: colorTexture, // Albedo/base color
roughnessMap: roughTexture, // Per-pixel roughness
metalnessMap: metalTexture, // Per-pixel metalness
normalMap: normalTexture, // Surface detail
normalScale: new THREE.Vector2(1, 1),
aoMap: aoTexture, // Ambient occlusion (uses uv2!)
aoMapIntensity: 1,
displacementMap: dispTexture, // Vertex displacement
displacementScale: 0.1,
displacementBias: 0,
// Emissive
emissive: 0x000000,
emissiveIntensity: 1,
emissiveMap: emissiveTexture,
// Environment
envMap: envTexture,
envMapIntensity: 1,
// Other
flatShading: false,
wireframe: false,
fog: true,
});
// Note: aoMap requires second UV channel
geometry.setAttribute("uv2", geometry.attributes.uv);
```
## MeshPhysicalMaterial (Advanced PBR)
Extends MeshStandardMaterial with advanced features.
```javascript
const material = new THREE.MeshPhysicalMaterial({
// All MeshStandardMaterial properties plus:
// Clearcoat (car paint, lacquer)
clearcoat: 1.0, // 0-1 clearcoat layer strength
clearcoatRoughness: 0.1,
clearcoatMap: ccTexture,
clearcoatRoughnessMap: ccrTexture,
clearcoatNormalMap: ccnTexture,
clearcoatNormalScale: new THREE.Vector2(1, 1),
// Transmission (glass, water)
transmission: 1.0, // 0 = opaque, 1 = fully transparent
transmissionMap: transTexture,
thickness: 0.5, // Volume thickness for refraction
thicknessMap: thickTexture,
attenuationDistance: 1, // Absorption distance
attenuationColor: new THREE.Color(0xffffff),
// Refraction
ior: 1.5, // Index of refraction (1-2.333)
// Sheen (fabric, velvet)
sheen: 1.0,
sheenRoughness: 0.5,
sheenColor: new THREE.Color(0xffffff),
sheenColorMap: sheenTexture,
sheenRoughnessMap: sheenRoughTexture,
// Iridescence (soap bubbles, oil slicks)
iridescence: 1.0,
iridescenceIOR: 1.3,
iridescenceThicknessRange: [100, 400],
iridescenceMap: iridTexture,
iridescenceThicknessMap: iridThickTexture,
// Anisotropy (brushed metal)
anisotropy: 1.0,
anisotropyRotation: 0,
anisotropyMap: anisoTexture,
// Specular
specularIntensity: 1,
specularColor: new THREE.Color(0xffffff),
specularIntensityMap: specIntTexture,
specularColorMap: specColorTexture,
});
```
### Glass Material Example
```javascript
const glass = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
metalness: 0,
roughness: 0,
transmission: 1,
thickness: 0.5,
ior: 1.5,
envMapIntensity: 1,
});
```
### Car Paint Example
```javascript
const carPaint = new THREE.MeshPhysicalMaterial({
color: 0xff0000,
metalness: 0.9,
roughness: 0.5,
clearcoat: 1,
clearcoatRoughness: 0.1,
});
```
## MeshToonMaterial
Cel-shaded cartoon look.
```javascript
const material = new THREE.MeshToonMaterial({
color: 0x00ff00,
gradientMap: gradientTexture, // Optional: custom shading gradient
});
// Create step gradient texture
const colors = new Uint8Array([0, 128, 255]);
const gradientMap = new THREE.DataTexture(colors, 3, 1, THREE.RedFormat);
gradientMap.minFilter = THREE.NearestFilter;
gradientMap.magFilter = THREE.NearestFilter;
gradientMap.needsUpdate = true;
```
## MeshNormalMaterial
Visualize surface normals. Useful for debugging.
```javascript
const material = new THREE.MeshNormalMaterial({
flatShading: false,
wireframe: false,
});
```
## MeshDepthMaterial
Render depth values. Used for shadow maps, DOF effects.
```javascript
const material = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking,
});
```
## PointsMaterial
For point clouds.
```javascript
const material = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.1,
sizeAttenuation: true, // Scale with distance
map: pointTexture,
alphaMap: alphaTexture,
transparent: true,
alphaTest: 0.5, // Discard pixels below threshold
vertexColors: true, // Use per-vertex colors
});
const points = new THREE.Points(geometry, material);
```
## LineBasicMaterial & LineDashedMaterial
```javascript
// Solid lines
const lineMaterial = new THREE.LineBasicMaterial({
color: 0xffffff,
linewidth: 1, // Note: >1 only works on some systems
linecap: "round",
linejoin: "round",
});
// Dashed lines
const dashedMaterial = new THREE.LineDashedMaterial({
color: 0xffffff,
dashSize: 0.5,
gapSize: 0.25,
scale: 1,
});
// Required for dashed lines
const line = new THREE.Line(geometry, dashedMaterial);
line.computeLineDistances();
```
## ShaderMaterial
Custom GLSL shaders with Three.js uniforms.
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new THREE.Color(0xff0000) },
texture1: { value: texture },
},
vertexShader: `
varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
vec3 pos = position;
pos.z += sin(pos.x * 10.0 + time) * 0.1;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform vec3 color;
uniform sampler2D texture1;
void main() {
// Use texture2D() for GLSL 1.0, texture() for GLSL 3.0 (glslVersion: THREE.GLSL3)
vec4 texColor = texture2D(texture1, vUv);
gl_FragColor = vec4(color * texColor.rgb, 1.0);
}
`,
transparent: true,
side: THREE.DoubleSide,
});
// Update uniform in animation loop
material.uniforms.time.value = clock.getElapsedTime();
```
### Built-in Uniforms (auto-provided)
```glsl
// Vertex shader
uniform mat4 modelMatrix; // Object to world
uniform mat4 modelViewMatrix; // Object to camera
uniform mat4 projectionMatrix; // Camera projection
uniform mat4 viewMatrix; // World to camera
uniform mat3 normalMatrix; // For transforming normals
uniform vec3 cameraPosition; // Camera world position
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
```
## RawShaderMaterial
Full control - no built-in uniforms/attributes.
```javascript
const material = new THREE.RawShaderMaterial({
uniforms: {
projectionMatrix: { value: camera.projectionMatrix },
modelViewMatrix: { value: new THREE.Matrix4() },
},
vertexShader: `
precision highp float;
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
});
```
## Common Material Properties
All materials share these base properties:
```javascript
// Visibility
material.visible = true;
material.transparent = false;
material.opacity = 1.0;
material.alphaTest = 0; // Discard pixels with alpha < value
// Rendering
material.side = THREE.FrontSide; // FrontSide, BackSide, DoubleSide
material.depthTest = true;
material.depthWrite = true;
material.colorWrite = true;
// Blending
material.blending = THREE.NormalBlending;
// NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending
// Stencil
material.stencilWrite = false;
material.stencilFunc = THREE.AlwaysStencilFunc;
material.stencilRef = 0;
material.stencilMask = 0xff;
// Polygon offset (z-fighting fix)
material.polygonOffset = false;
material.polygonOffsetFactor = 0;
material.polygonOffsetUnits = 0;
// Misc
material.dithering = false;
material.toneMapped = true;
```
## Multiple Materials
```javascript
// Assign different materials to geometry groups
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // right
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // left
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // top
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // bottom
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // front
new THREE.MeshBasicMaterial({ color: 0x00ffff }), // back
];
const mesh = new THREE.Mesh(geometry, materials);
// Custom groups
geometry.clearGroups();
geometry.addGroup(0, 6, 0); // start, count, materialIndex
geometry.addGroup(6, 6, 1);
```
## Environment Maps
```javascript
// Load cube texture
const cubeLoader = new THREE.CubeTextureLoader();
const envMap = cubeLoader.load([
"px.jpg",
"nx.jpg", // positive/negative X
"py.jpg",
"ny.jpg", // positive/negative Y
"pz.jpg",
"nz.jpg", // positive/negative Z
]);
// Apply to material
material.envMap = envMap;
material.envMapIntensity = 1;
// Or set as scene environment (affects all PBR materials)
scene.environment = envMap;
// HDR environment (recommended)
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
const rgbeLoader = new RGBELoader();
rgbeLoader.load("environment.hdr", (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
scene.background = texture;
});
```
## Material Cloning and Modification
```javascript
// Clone material
const clone = material.clone();
clone.color.set(0x00ff00);
// Modify at runtime
material.color.set(0xff0000);
material.needsUpdate = true; // Only needed for some changes
// When needsUpdate is required:
// - Changing flat shading
// - Changing texture
// - Changing transparent
// - Custom shader code changes
```
## Performance Tips
1. **Reuse materials**: Same material = batched draw calls
2. **Avoid transparent when possible**: Transparent materials require sorting
3. **Use alphaTest instead of transparency**: When applicable, faster
4. **Choose simpler materials**: Basic > Lambert > Phong > Standard > Physical
5. **Limit active lights**: Each light adds shader complexity
```javascript
// Material pooling
const materialCache = new Map();
function getMaterial(color) {
const key = color.toString(16);
if (!materialCache.has(key)) {
materialCache.set(key, new THREE.MeshStandardMaterial({ color }));
}
return materialCache.get(key);
}
// Dispose when done
material.dispose();
```
## See Also
- `threejs-textures` - Texture loading and configuration
- `threejs-shaders` - Custom shader development
- `threejs-lighting` - Light interaction with materials

269
.opencode/skills/threejs/references/12-performance.md Normal file
View File

@@ -0,0 +1,269 @@
# Performance Optimization
Techniques for fast, smooth 3D experiences.
## Instancing
Render many copies of same geometry efficiently:
```javascript
// Instead of creating 10,000 individual meshes
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.InstancedMesh(geometry, material, 10000);
// Set transforms for each instance
const matrix = new THREE.Matrix4();
const position = new THREE.Vector3();
const rotation = new THREE.Euler();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3(1, 1, 1);
for (let i = 0; i < 10000; i++) {
position.set(
Math.random() * 100 - 50,
Math.random() * 100 - 50,
Math.random() * 100 - 50
);
rotation.set(
Math.random() * Math.PI,
Math.random() * Math.PI,
Math.random() * Math.PI
);
quaternion.setFromEuler(rotation);
matrix.compose(position, quaternion, scale);
mesh.setMatrixAt(i, matrix);
}
mesh.instanceMatrix.needsUpdate = true;
scene.add(mesh);
// Per-instance colors
mesh.instanceColor = new THREE.InstancedBufferAttribute(
new Float32Array(10000 * 3),
3
);
for (let i = 0; i < 10000; i++) {
mesh.setColorAt(i, new THREE.Color(Math.random(), Math.random(), Math.random()));
}
```
## Level of Detail (LOD)
Switch between detail levels based on distance:
```javascript
const lod = new THREE.LOD();
// High detail (close)
const geometryHigh = new THREE.IcosahedronGeometry(10, 4);
const meshHigh = new THREE.Mesh(geometryHigh, material);
lod.addLevel(meshHigh, 0);
// Medium detail
const geometryMed = new THREE.IcosahedronGeometry(10, 2);
const meshMed = new THREE.Mesh(geometryMed, material);
lod.addLevel(meshMed, 50);
// Low detail (far)
const geometryLow = new THREE.IcosahedronGeometry(10, 0);
const meshLow = new THREE.Mesh(geometryLow, material);
lod.addLevel(meshLow, 100);
scene.add(lod);
// Update LOD in animation loop
function animate() {
lod.update(camera);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
## Frustum Culling
Automatic - objects outside camera view aren't rendered.
```javascript
// Force disable for specific object
object.frustumCulled = false;
// Manually test if in view
const frustum = new THREE.Frustum();
const cameraViewProjectionMatrix = new THREE.Matrix4();
cameraViewProjectionMatrix.multiplyMatrices(
camera.projectionMatrix,
camera.matrixWorldInverse
);
frustum.setFromProjectionMatrix(cameraViewProjectionMatrix);
if (frustum.intersectsObject(object)) {
// Object is visible
}
```
## Geometry Optimization
```javascript
// Merge geometries (reduce draw calls)
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
const geometries = [geom1, geom2, geom3];
const mergedGeometry = mergeGeometries(geometries);
const mesh = new THREE.Mesh(mergedGeometry, material);
// Dispose old geometries
geometries.forEach(g => g.dispose());
// Simplify geometry
import { SimplifyModifier } from 'three/addons/modifiers/SimplifyModifier.js';
const modifier = new SimplifyModifier();
const simplified = modifier.modify(geometry, Math.floor(geometry.attributes.position.count * 0.5));
```
## Texture Optimization
```javascript
// Use appropriate sizes (power of 2)
// 512x512, 1024x1024, 2048x2048
// Compress textures
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
// Use mipmaps (auto-generated by default)
texture.generateMipmaps = true;
// Appropriate filtering
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.magFilter = THREE.LinearFilter;
// Anisotropic filtering (balance quality/performance)
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
// Dispose unused textures
texture.dispose();
```
## Material Sharing
```javascript
// Share materials between meshes (reduce memory)
const sharedMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh1 = new THREE.Mesh(geometry1, sharedMaterial);
const mesh2 = new THREE.Mesh(geometry2, sharedMaterial);
const mesh3 = new THREE.Mesh(geometry3, sharedMaterial);
```
## Shadow Optimization
```javascript
// Reduce shadow map resolution
light.shadow.mapSize.width = 1024; // instead of 2048
light.shadow.mapSize.height = 1024;
// Limit shadow camera frustum
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 50; // only cast shadows within this range
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
// Use fewer shadow-casting objects
object.castShadow = false; // for distant/small objects
object.receiveShadow = false; // for objects that don't need shadows
// Cheaper shadow type
renderer.shadowMap.type = THREE.PCFShadowMap; // instead of PCFSoftShadowMap
```
## Render Target Optimization
```javascript
// Lower resolution for post-processing
const renderTarget = new THREE.WebGLRenderTarget(
window.innerWidth * 0.5, // half resolution
window.innerHeight * 0.5
);
// Appropriate pixel format
renderTarget.texture.format = THREE.RGBAFormat;
renderTarget.texture.type = THREE.UnsignedByteType;
// Dispose when done
renderTarget.dispose();
```
## Object Pooling
```javascript
// Reuse objects instead of creating/destroying
class ObjectPool {
constructor(factory, initialSize) {
this.factory = factory;
this.pool = [];
for (let i = 0; i < initialSize; i++) {
this.pool.push(factory());
}
}
get() {
return this.pool.length > 0 ? this.pool.pop() : this.factory();
}
release(obj) {
this.pool.push(obj);
}
}
const bulletPool = new ObjectPool(() => {
return new THREE.Mesh(bulletGeometry, bulletMaterial);
}, 100);
// Use
const bullet = bulletPool.get();
scene.add(bullet);
// Return when done
scene.remove(bullet);
bulletPool.release(bullet);
```
## Monitoring Performance
```javascript
// FPS counter
const stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
// ... rendering
stats.end();
requestAnimationFrame(animate);
}
// Renderer info
console.log(renderer.info);
// Shows: geometries, textures, programs, calls, triangles, points, lines
// GPU timing
const query = renderer.extensions.get('EXT_disjoint_timer_query_webgl2');
```
## General Best Practices
- Limit draw calls (merge geometries, use instancing)
- Reduce polygon count (LOD, simplification)
- Optimize textures (compression, appropriate sizes)
- Share materials and geometries
- Use frustum culling
- Limit number of lights (3-5 max)
- Avoid transparent materials when possible
- Use object pooling for frequently created/destroyed objects
- Profile with browser DevTools
- Test on target devices
- Use WebGL 2 features when available

298
.opencode/skills/threejs/references/13-node-materials.md Normal file
View File

@@ -0,0 +1,298 @@
# Node Materials (TSL - Three Shading Language)
Modern node-based material system for creating custom shaders visually.
## What is TSL?
Three Shading Language (TSL) is a node-based system for creating materials and shaders:
- Functional approach to shader composition
- Type-safe node graph
- Unified GLSL/WGSL output (WebGL & WebGPU)
- No manual shader code required
## Basic Node Material
```javascript
import * as THREE from 'three/webgpu';
import { color, texture, normalMap, MeshStandardNodeMaterial } from 'three/nodes';
const material = new MeshStandardNodeMaterial();
// Set base color node
material.colorNode = color(0xff0000);
// Or use texture
material.colorNode = texture(colorTexture);
// Combine nodes
material.colorNode = texture(colorTexture).mul(color(0xffffff));
// Normal mapping
material.normalNode = normalMap(normalTexture);
```
## Node Types
### Input Nodes
```javascript
import {
attribute,
uniform,
texture,
cubeTexture,
instancedArray,
storage
} from 'three/nodes';
// Geometry attributes
const positionNode = attribute('position');
const normalNode = attribute('normal');
const uvNode = attribute('uv');
// Uniforms
const timeNode = uniform(0); // value
// Textures
const colorNode = texture(diffuseTexture);
const envNode = cubeTexture(cubeMapTexture);
// Instanced data
const instanceColorNode = instancedArray('instanceColor');
// Storage buffers (compute)
const storageNode = storage(buffer, 'vec4', count);
```
### Math Nodes
```javascript
import { add, sub, mul, div, pow, sin, cos, length, normalize } from 'three/nodes';
// Basic operations
const result = add(a, b); // a + b
const result = sub(a, b); // a - b
const result = mul(a, b); // a * b
const result = div(a, b); // a / b
// Trigonometry
const result = sin(angle);
const result = cos(angle);
// Vector operations
const result = length(vector);
const result = normalize(vector);
// Chaining
const result = mul(texture(tex), color(0xff0000));
```
### Procedural Nodes
```javascript
import { checker, dots, noise, voronoi } from 'three/nodes';
// Checker pattern
material.colorNode = checker(uvNode.mul(10));
// Noise
material.colorNode = noise(uvNode.mul(5));
// Voronoi cells
material.colorNode = voronoi(uvNode.mul(3));
```
## Custom Shader Function
```javascript
import { Fn, vec3, float } from 'three/nodes';
// Define custom function
const customColor = Fn(([uv, time]) => {
const r = sin(uv.x.mul(10).add(time));
const g = cos(uv.y.mul(10).add(time));
const b = float(0.5);
return vec3(r, g, b);
});
// Use in material
material.colorNode = customColor(uvNode, timeNode);
```
## Animation with Nodes
```javascript
import { uniform, oscSine, timerLocal } from 'three/nodes';
// Oscillating value
const oscillator = oscSine(timerLocal(0.5)); // frequency = 0.5
// Pulsing color
material.colorNode = color(0xff0000).mul(oscillator.add(0.5));
// Rotating UV
const rotatedUV = uvNode.rotateUV(timerLocal());
material.colorNode = texture(tex, rotatedUV);
```
## Advanced Effects
### Fresnel Effect
```javascript
import { normalView, positionView, dot, pow } from 'three/nodes';
const fresnel = pow(
float(1).sub(dot(normalView, positionView.normalize())),
3
);
material.colorNode = mix(baseColor, edgeColor, fresnel);
```
### Vertex Displacement
```javascript
import { positionLocal, normalLocal, timerLocal, sin } from 'three/nodes';
// Displace vertices along normal
const displacement = sin(positionLocal.y.add(timerLocal())).mul(0.5);
material.positionNode = positionLocal.add(normalLocal.mul(displacement));
```
### Custom Normal Mapping
```javascript
import { normalMap, normalView, TBNViewMatrix } from 'three/nodes';
const normalMapNode = normalMap(normalTexture);
const transformedNormal = TBNViewMatrix.mul(normalMapNode);
material.normalNode = transformedNormal;
```
## Compute Shaders (WebGPU)
```javascript
import { compute, uniform, storage, Fn } from 'three/nodes';
// Define compute shader
const computeShader = Fn(() => {
const storageBuffer = storage(buffer, 'vec4', count);
const index = instanceIndex; // built-in
// Modify buffer
const value = storageBuffer.element(index);
storageBuffer.element(index).assign(value.mul(2));
})();
// Create compute node
const computeNode = compute(computeShader, 256); // workgroup size
// Execute
renderer.compute(computeNode);
```
## Node Material Types
```javascript
import {
MeshStandardNodeMaterial,
MeshPhysicalNodeMaterial,
MeshBasicNodeMaterial,
PointsNodeMaterial,
LineBasicNodeMaterial,
SpriteNodeMaterial
} from 'three/nodes';
// Standard PBR
const material = new MeshStandardNodeMaterial();
material.colorNode = colorNode;
material.roughnessNode = roughnessNode;
material.metalnessNode = metalnessNode;
// Physical (clearcoat, transmission, etc.)
const material = new MeshPhysicalNodeMaterial();
material.clearcoatNode = clearcoatNode;
material.transmissionNode = transmissionNode;
```
## Post-Processing with Nodes
```javascript
import { pass, PassNode } from 'three/nodes';
// Custom post-processing pass
const customPass = new PassNode('customPass', (input, output) => {
// input: previous pass texture
// output: render target
// Apply effect
const modifiedColor = input.mul(color(1, 0.5, 0.5));
output.assign(modifiedColor);
});
// Add to post-processing chain
postProcessing.addPass(customPass);
```
## Practical Example: Animated Material
```javascript
import * as THREE from 'three/webgpu';
import {
MeshStandardNodeMaterial,
texture,
uniform,
timerLocal,
sin,
cos,
vec2
} from 'three/nodes';
const material = new MeshStandardNodeMaterial();
// Animated UV scroll
const time = timerLocal();
const scrollSpeed = uniform(0.1);
const uvOffset = vec2(
time.mul(scrollSpeed),
sin(time).mul(0.1)
);
const scrolledUV = uv().add(uvOffset);
// Apply to color
material.colorNode = texture(diffuseTexture, scrolledUV);
// Animated emission
const pulseSpeed = uniform(2);
const emission = sin(time.mul(pulseSpeed)).mul(0.5).add(0.5);
material.emissiveNode = color(1, 0.5, 0).mul(emission);
```
## Migration from ShaderMaterial
```javascript
// Old way (ShaderMaterial)
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 }
},
vertexShader: `...`,
fragmentShader: `...`
});
// New way (Node Material)
const material = new MeshStandardNodeMaterial();
material.colorNode = customFunction(timerLocal());
// Much cleaner, type-safe, and reusable
```
## When to Use Node Materials
- Creating complex procedural materials
- Need both WebGL and WebGPU support
- Want visual/functional shader composition
- Reusable shader components
- Compute shader integration (WebGPU only)
**Note**: Node materials require WebGPU renderer for full features. Some features work with WebGL backend but compute shaders require WebGPU.

304
.opencode/skills/threejs/references/14-physics-vr.md Normal file
View File

@@ -0,0 +1,304 @@
# Physics & VR/XR
Integrate physics simulations and virtual reality.
## Physics Integration
Three.js doesn't include physics - use external libraries:
### Rapier Physics (Recommended)
Rust-based, high-performance:
```javascript
import { RapierPhysics } from 'three/addons/physics/RapierPhysics.js';
// Initialize
const physics = await RapierPhysics();
// Create physics body
const box = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshStandardMaterial()
);
scene.add(box);
// Add physics (mass > 0 = dynamic)
physics.addMesh(box, 1); // mass = 1
// Static ground
const ground = new THREE.Mesh(
new THREE.BoxGeometry(10, 0.5, 10),
new THREE.MeshStandardMaterial()
);
ground.position.y = -2;
scene.add(ground);
physics.addMesh(ground); // no mass = static
// Update in animation loop
function animate() {
physics.step();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
### Ammo Physics
Port of Bullet physics engine:
```javascript
import { AmmoPhysics } from 'three/addons/physics/AmmoPhysics.js';
const physics = await AmmoPhysics();
// Same API as Rapier
physics.addMesh(mesh, mass);
function animate() {
physics.step();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
```
### Jolt Physics
High-performance alternative:
```javascript
import { JoltPhysics } from 'three/addons/physics/JoltPhysics.js';
const physics = await JoltPhysics();
physics.addMesh(mesh, mass);
```
### Physics Constraints
```javascript
// After initialization
const physics = await RapierPhysics();
// Point-to-point constraint
physics.addConstraint(meshA, meshB, 'fixed');
physics.addConstraint(meshA, meshB, 'spring', { stiffness: 100 });
// Remove constraint
physics.removeConstraint(constraint);
```
## VR/XR Setup
### Basic WebXR
```javascript
import { VRButton } from 'three/addons/webxr/VRButton.js';
// Enable XR
renderer.xr.enabled = true;
// Add VR button to page
document.body.appendChild(VRButton.createButton(renderer));
// Animation loop for VR
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
// Stop using requestAnimationFrame, use setAnimationLoop instead
```
### AR Mode
```javascript
import { ARButton } from 'three/addons/webxr/ARButton.js';
renderer.xr.enabled = true;
document.body.appendChild(ARButton.createButton(renderer));
// AR-specific features
const session = renderer.xr.getSession();
session.requestHitTestSource({ space: viewerSpace }).then((hitTestSource) => {
// Use hit testing for placing objects
});
```
### VR Controllers
```javascript
// Get controllers
const controller1 = renderer.xr.getController(0);
const controller2 = renderer.xr.getController(1);
scene.add(controller1);
scene.add(controller2);
// Controller events
controller1.addEventListener('selectstart', () => {
console.log('Trigger pressed');
});
controller1.addEventListener('selectend', () => {
console.log('Trigger released');
});
// Add visual controller models
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
const controllerModelFactory = new XRControllerModelFactory();
const grip1 = renderer.xr.getControllerGrip(0);
grip1.add(controllerModelFactory.createControllerModel(grip1));
scene.add(grip1);
const grip2 = renderer.xr.getControllerGrip(1);
grip2.add(controllerModelFactory.createControllerModel(grip2));
scene.add(grip2);
```
### Hand Tracking
```javascript
import { OculusHandModel } from 'three/addons/webxr/OculusHandModel.js';
const hand1 = renderer.xr.getHand(0);
const handModel1 = new OculusHandModel(hand1);
hand1.add(handModel1);
scene.add(hand1);
const hand2 = renderer.xr.getHand(1);
const handModel2 = new OculusHandModel(hand2);
hand2.add(handModel2);
scene.add(hand2);
```
### Teleportation
```javascript
const raycaster = new THREE.Raycaster();
const tempMatrix = new THREE.Matrix4();
function handleController(controller) {
const intersections = getIntersections(controller);
if (intersections.length > 0) {
const intersection = intersections[0];
// Teleport on button release
controller.addEventListener('selectend', () => {
const offset = intersection.point.y;
camera.position.y += offset;
});
}
}
function getIntersections(controller) {
tempMatrix.identity().extractRotation(controller.matrixWorld);
raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
return raycaster.intersectObjects(scene.children, true);
}
```
### Spatial Audio for VR
```javascript
const listener = new THREE.AudioListener();
camera.add(listener);
const sound = new THREE.PositionalAudio(listener);
const audioLoader = new THREE.AudioLoader();
audioLoader.load('sound.ogg', (buffer) => {
sound.setBuffer(buffer);
sound.setRefDistance(1);
sound.setLoop(true);
sound.play();
});
// Attach to object
object.add(sound);
// Update listener in VR
renderer.setAnimationLoop(() => {
// Listener automatically updates with camera in VR
renderer.render(scene, camera);
});
```
### Room-Scale VR
```javascript
// Request room-scale experience
navigator.xr.requestSession('immersive-vr', {
requiredFeatures: ['local-floor']
}).then((session) => {
// Session setup
});
// Get play area bounds
session.requestReferenceSpace('bounded-floor').then((space) => {
const bounds = space.boundsGeometry;
// Create visual boundary
});
```
### Performance Tips for VR
- Target 90 FPS (11.1ms per frame)
- Use lower polygon counts
- Reduce shadow quality
- Limit post-processing
- Use instancing for repeated objects
- Enable foveated rendering if available
- Test on actual VR hardware
```javascript
// Foveated rendering (Quest 2+)
const gl = renderer.getContext();
const ext = gl.getExtension('WEBGL_foveated_rendering');
if (ext) {
ext.foveatedRenderingModeWEBGL(gl.FOVEATED_RENDERING_MODE_ENABLE_WEBGL);
}
```
## Mixed Reality (MR)
```javascript
import { XRButton } from 'three/addons/webxr/XRButton.js';
// Request MR features
document.body.appendChild(
XRButton.createButton(renderer, {
requiredFeatures: ['hand-tracking', 'layers'],
optionalFeatures: ['local-floor', 'bounded-floor']
})
);
// Passthrough mode (Quest Pro, etc.)
const session = renderer.xr.getSession();
const baseLayer = session.renderState.baseLayer;
baseLayer.compositionDisabled = true; // enable passthrough
```
## Common VR Patterns
```javascript
// Detect if in VR
if (renderer.xr.isPresenting) {
// In VR mode
}
// Get VR camera (for raycasting)
const vrCamera = renderer.xr.getCamera(camera);
// Different behavior for VR vs desktop
renderer.setAnimationLoop(() => {
if (renderer.xr.isPresenting) {
// VR rendering logic
} else {
// Desktop rendering logic
}
renderer.render(scene, camera);
});
```

333
.opencode/skills/threejs/references/15-specialized-loaders.md Normal file
View File

@@ -0,0 +1,333 @@
# Specialized Loaders
Domain-specific file format loaders.
## SVG Loader
Load and extrude SVG paths:
```javascript
import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
const loader = new SVGLoader();
loader.load('image.svg', (data) => {
const paths = data.paths;
const group = new THREE.Group();
paths.forEach((path) => {
const material = new THREE.MeshBasicMaterial({
color: path.color,
side: THREE.DoubleSide,
depthWrite: false
});
const shapes = SVGLoader.createShapes(path);
shapes.forEach((shape) => {
const geometry = new THREE.ShapeGeometry(shape);
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
});
});
// Extrude SVG
paths.forEach((path) => {
const shapes = SVGLoader.createShapes(path);
const geometry = new THREE.ExtrudeGeometry(shapes, {
depth: 10,
bevelEnabled: false
});
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
});
scene.add(group);
});
```
## Collada (.dae) Loader
XML-based format from Blender, SketchUp:
```javascript
import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
const loader = new ColladaLoader();
loader.load('model.dae', (collada) => {
const model = collada.scene;
scene.add(model);
// Access animations
const animations = collada.animations;
const mixer = new THREE.AnimationMixer(model);
animations.forEach(clip => mixer.clipAction(clip).play());
});
```
## STL Loader
3D printing format:
```javascript
import { STLLoader } from 'three/addons/loaders/STLLoader.js';
const loader = new STLLoader();
loader.load('model.stl', (geometry) => {
const material = new THREE.MeshPhongMaterial({ color: 0xff5533 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// STL doesn't include normals, compute them
geometry.computeVertexNormals();
});
```
## 3MF Loader
Modern 3D printing format:
```javascript
import { 3MFLoader } from 'three/addons/loaders/3MFLoader.js';
const loader = new 3MFLoader();
loader.load('model.3mf', (object) => {
scene.add(object);
});
```
## VRML/X3D Loader
Virtual Reality Modeling Language:
```javascript
import { VRMLLoader } from 'three/addons/loaders/VRMLLoader.js';
const loader = new VRMLLoader();
loader.load('model.wrl', (object) => {
scene.add(object);
});
```
## PDB Loader
Protein Data Bank (chemistry/molecular):
```javascript
import { PDBLoader } from 'three/addons/loaders/PDBLoader.js';
const loader = new PDBLoader();
loader.load('molecule.pdb', (pdb) => {
const geometryAtoms = pdb.geometryAtoms;
const geometryBonds = pdb.geometryBonds;
const json = pdb.json;
// Render atoms as spheres
const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
const atoms = new THREE.Mesh(geometryAtoms, material);
scene.add(atoms);
// Render bonds as cylinders
const bondMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
const bonds = new THREE.Mesh(geometryBonds, bondMaterial);
scene.add(bonds);
});
```
## LDraw Loader
LEGO models:
```javascript
import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';
const loader = new LDrawLoader();
loader.setPath('ldraw/');
loader.load('model.mpd', (group) => {
scene.add(group);
// Smooth LEGO bricks
group.traverse((child) => {
if (child.isMesh) {
child.material.flatShading = false;
}
});
});
```
## VTK Loader
Visualization Toolkit (scientific data):
```javascript
import { VTKLoader } from 'three/addons/loaders/VTKLoader.js';
const loader = new VTKLoader();
loader.load('model.vtk', (geometry) => {
geometry.computeVertexNormals();
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
```
## PLY Loader
Polygon file format (scanned 3D data):
```javascript
import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
const loader = new PLYLoader();
loader.load('model.ply', (geometry) => {
geometry.computeVertexNormals();
// Check if has vertex colors
const material = geometry.attributes.color ?
new THREE.MeshStandardMaterial({ vertexColors: true }) :
new THREE.MeshStandardMaterial({ color: 0x888888 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
```
## 3DS Loader
3DS Max format:
```javascript
import { TDSLoader } from 'three/addons/loaders/TDSLoader.js';
const loader = new TDSLoader();
loader.load('model.3ds', (object) => {
scene.add(object);
});
```
## USDZ Loader/Exporter
Apple's AR format:
```javascript
// Export to USDZ (for iOS AR)
import { USDZExporter } from 'three/addons/exporters/USDZExporter.js';
const exporter = new USDZExporter();
const arraybuffer = await exporter.parse(scene);
const blob = new Blob([arraybuffer], { type: 'application/octet-stream' });
// Download or serve for AR Quick Look
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'model.usdz';
link.click();
```
## Font Loader (Text)
Load fonts for 3D text:
```javascript
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
const fontLoader = new FontLoader();
fontLoader.load('fonts/helvetiker_regular.typeface.json', (font) => {
const geometry = new TextGeometry('Hello World', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
});
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
```
## EXR Loader
High dynamic range images:
```javascript
import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
const loader = new EXRLoader();
loader.load('env.exr', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
});
```
## RGBE/HDR Loader
HDR environment maps:
```javascript
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
const loader = new RGBELoader();
loader.load('env.hdr', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
// Use with PMREM generator for better quality
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
scene.environment = envMap;
texture.dispose();
pmremGenerator.dispose();
});
```
## Basis/KTX2 Texture Loader
GPU-optimized texture compression:
```javascript
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
const loader = new KTX2Loader();
loader.setTranscoderPath('basis/');
loader.detectSupport(renderer);
loader.load('texture.ktx2', (texture) => {
material.map = texture;
material.needsUpdate = true;
});
```
## Common Patterns
```javascript
// Load with progress
loader.load(
'file.ext',
(result) => { /* success */ },
(xhr) => {
const percent = (xhr.loaded / xhr.total * 100);
console.log(`${percent}% loaded`);
},
(error) => { /* error */ }
);
// Center imported model
const box = new THREE.Box3().setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
model.position.sub(center);
// Scale to fit
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const scale = 10 / maxDim;
model.scale.setScalar(scale);
```

302
.opencode/skills/threejs/references/16-webgpu.md Normal file
View File

@@ -0,0 +1,302 @@
# WebGPU Rendering
Modern GPU API for next-generation graphics.
## WebGPU Renderer
Next-generation rendering backend:
```javascript
import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
// Check support
if (WebGPU.isAvailable()) {
const renderer = new WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Use setAnimationLoop (not requestAnimationFrame)
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
} else {
const warning = WebGPU.getErrorMessage();
document.body.appendChild(warning);
}
```
## Benefits of WebGPU
- Better performance (lower CPU overhead)
- Compute shaders
- Modern GPU features
- Unified shading language (WGSL)
- Better multi-threading support
- More predictable behavior
## Compute Shaders
GPU-accelerated computation:
```javascript
import { storageBuffer, uniform, Fn } from 'three/nodes';
import { StorageBufferAttribute } from 'three/addons/renderers/common/StorageBufferAttribute.js';
// Create storage buffer
const particleCount = 10000;
const positionBuffer = new StorageBufferAttribute(particleCount * 3, 3);
// Fill initial positions
for (let i = 0; i < particleCount; i++) {
positionBuffer.setXYZ(
i,
Math.random() * 10 - 5,
Math.random() * 10 - 5,
Math.random() * 10 - 5
);
}
// Create compute shader
const computeParticles = Fn(() => {
const position = storageBuffer(positionBuffer);
const time = uniform('time', 0);
const index = instanceIndex;
// Update position
const pos = position.element(index);
pos.y.addAssign(sin(time.add(index)).mul(0.01));
// Wrap around
If(pos.y.greaterThan(5), () => {
pos.y.assign(-5);
});
})();
// Create compute node
const computeNode = computeParticles.compute(particleCount);
// Execute in render loop
renderer.setAnimationLoop(() => {
renderer.compute(computeNode);
renderer.render(scene, camera);
});
```
## Storage Buffers
GPU-accessible memory:
```javascript
import { storage, Fn, vec3, float } from 'three/nodes';
// Define storage buffer structure
const particleData = storage(
new THREE.StorageBufferAttribute(count * 7, 7), // 7 floats per particle
'vec3', // position
'vec3', // velocity
'float' // life
);
// Access in compute shader
const updateParticle = Fn(() => {
const data = particleData.element(instanceIndex);
const position = data.xyz;
const velocity = data.toVec3(3); // offset 3
const life = data.element(6);
// Update
position.addAssign(velocity.mul(deltaTime));
life.subAssign(deltaTime);
})();
```
## WebGPU Node Materials
Use TSL (Three Shading Language) with WebGPU:
```javascript
import { MeshStandardNodeMaterial, texture, normalMap } from 'three/nodes';
const material = new MeshStandardNodeMaterial();
// Node-based material definition
material.colorNode = texture(diffuseTexture);
material.normalNode = normalMap(normalTexture);
material.roughnessNode = float(0.5);
material.metalnessNode = float(0.8);
// Works with both WebGL and WebGPU automatically
```
## Indirect Drawing
Efficient rendering with compute-generated draw calls:
```javascript
import { IndirectStorageBufferAttribute } from 'three/addons/renderers/common/IndirectStorageBufferAttribute.js';
// Create indirect buffer
const indirectBuffer = new IndirectStorageBufferAttribute(count, 5);
// 5 elements: count, instanceCount, first, baseInstance, (padding)
// Update with compute shader
const updateIndirect = Fn(() => {
const indirect = storage(indirectBuffer);
// Compute visibility and update instance count
const visible = computeVisibility();
If(visible, () => {
indirect.element(1).addAssign(1); // increment instanceCount
});
})();
// Render using indirect buffer
renderer.drawIndirect(mesh, indirectBuffer);
```
## Multi-Render-Target (MRT)
Render to multiple textures simultaneously:
```javascript
import { WebGPURenderTarget } from 'three/addons/renderers/webgpu/WebGPURenderTarget.js';
const renderTarget = new WebGPURenderTarget(width, height, {
count: 3, // number of render targets
format: THREE.RGBAFormat
});
// Access individual textures
const albedoTexture = renderTarget.textures[0];
const normalTexture = renderTarget.textures[1];
const depthTexture = renderTarget.textures[2];
// Use in deferred rendering pipeline
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
```
## Async Shader Compilation
Avoid frame drops:
```javascript
// Compile materials ahead of time
await renderer.compileAsync(scene, camera);
// Start rendering after compilation
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
```
## Performance Monitoring
GPU timestamp queries:
```javascript
// Query GPU timing
const timestampQuery = renderer.getTimestampQuery();
timestampQuery.begin();
renderer.render(scene, camera);
timestampQuery.end();
timestampQuery.getResult().then((duration) => {
console.log(`GPU time: ${duration}ms`);
});
```
## WebGPU-Specific Features
### Texture Compression
```javascript
// BC7 compression (higher quality)
const texture = new THREE.CompressedTexture(
mipmaps,
width,
height,
THREE.RGBA_BPTC_Format
);
```
### Depth Textures
```javascript
const depthTexture = new THREE.DepthTexture(width, height);
depthTexture.type = THREE.FloatType; // 32-bit depth
depthTexture.format = THREE.DepthFormat;
```
### Storage Textures
```javascript
import { storageTexture } from 'three/nodes';
// Read-write texture in compute shader
const writeableTexture = storageTexture(texture);
const computeShader = Fn(() => {
const coord = vec2(instanceIndex % width, instanceIndex / width);
const color = vec4(1, 0, 0, 1);
writeableTexture.store(coord, color);
})();
```
## Migration from WebGL
Most Three.js code works with both:
```javascript
// WebGL
const renderer = new THREE.WebGLRenderer();
// WebGPU (drop-in replacement for most cases)
const renderer = new WebGPURenderer();
// Exceptions:
// - Custom shaders: need to use Node materials or WGSL
// - Some extensions not available
// - Compute shaders only in WebGPU
```
## WGSL (WebGPU Shading Language)
Native shader language for WebGPU:
```wgsl
@group(0) @binding(0) var<storage, read_write> positions: array<vec3f>;
@group(0) @binding(1) var<uniform> time: f32;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3u) {
let index = global_id.x;
if (index >= arrayLength(&positions)) {
return;
}
var pos = positions[index];
pos.y += sin(time + f32(index)) * 0.01;
positions[index] = pos;
}
```
## Browser Support
As of 2025:
- ✅ Chrome 113+
- ✅ Edge 113+
- ✅ Safari 18+ (macOS/iOS)
- ❌ Firefox (in development)
Check support: `WebGPU.isAvailable()`
## Best Practices
- Use compute shaders for particle systems, physics
- Leverage storage buffers for large datasets
- Async compile before rendering
- Use Node materials instead of custom GLSL
- Test on both WebGL and WebGPU
- Provide WebGL fallback for unsupported browsers

641
.opencode/skills/threejs/references/17-shader.md Normal file
View File

@@ -0,0 +1,641 @@
# Three.js Shaders
## Overview
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
## Quick Start
```javascript
import * as THREE from "three";
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new THREE.Color(0xff0000) },
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 color;
void main() {
gl_FragColor = vec4(color, 1.0);
}
`,
});
// Update in animation loop
material.uniforms.time.value = clock.getElapsedTime();
```
## ShaderMaterial vs RawShaderMaterial
### ShaderMaterial
Three.js provides built-in uniforms and attributes.
```javascript
const material = new THREE.ShaderMaterial({
vertexShader: `
// Built-in uniforms available:
// uniform mat4 modelMatrix;
// uniform mat4 modelViewMatrix;
// uniform mat4 projectionMatrix;
// uniform mat4 viewMatrix;
// uniform mat3 normalMatrix;
// uniform vec3 cameraPosition;
// Built-in attributes available:
// attribute vec3 position;
// attribute vec3 normal;
// attribute vec2 uv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
});
```
### RawShaderMaterial
Full control - you define everything.
```javascript
const material = new THREE.RawShaderMaterial({
uniforms: {
projectionMatrix: { value: camera.projectionMatrix },
modelViewMatrix: { value: new THREE.Matrix4() },
},
vertexShader: `
precision highp float;
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
});
```
## Uniforms
### Uniform Types
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
// Numbers
floatValue: { value: 1.5 },
intValue: { value: 1 },
// Vectors
vec2Value: { value: new THREE.Vector2(1, 2) },
vec3Value: { value: new THREE.Vector3(1, 2, 3) },
vec4Value: { value: new THREE.Vector4(1, 2, 3, 4) },
// Colors (converted to vec3)
colorValue: { value: new THREE.Color(0xff0000) },
// Matrices
mat3Value: { value: new THREE.Matrix3() },
mat4Value: { value: new THREE.Matrix4() },
// Textures
textureValue: { value: texture },
cubeTextureValue: { value: cubeTexture },
// Arrays
floatArray: { value: [1.0, 2.0, 3.0] },
vec3Array: {
value: [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0)],
},
},
});
```
### GLSL Declarations
```glsl
// In shader
uniform float floatValue;
uniform int intValue;
uniform vec2 vec2Value;
uniform vec3 vec3Value;
uniform vec3 colorValue; // Color becomes vec3
uniform vec4 vec4Value;
uniform mat3 mat3Value;
uniform mat4 mat4Value;
uniform sampler2D textureValue;
uniform samplerCube cubeTextureValue;
uniform float floatArray[3];
uniform vec3 vec3Array[2];
```
### Updating Uniforms
```javascript
// Direct assignment
material.uniforms.time.value = clock.getElapsedTime();
// Vector/Color updates
material.uniforms.position.value.set(x, y, z);
material.uniforms.color.value.setHSL(hue, 1, 0.5);
// Matrix updates
material.uniforms.matrix.value.copy(mesh.matrixWorld);
```
## Varyings
Pass data from vertex to fragment shader.
```javascript
const material = new THREE.ShaderMaterial({
vertexShader: `
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vUv = uv;
vNormal = normalize(normalMatrix * normal);
vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
// Use interpolated values
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
}
`,
});
```
## Common Shader Patterns
### Texture Sampling
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
map: { value: texture },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D map;
varying vec2 vUv;
void main() {
vec4 texColor = texture2D(map, vUv);
gl_FragColor = texColor;
}
`,
});
```
### Vertex Displacement
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
amplitude: { value: 0.5 },
},
vertexShader: `
uniform float time;
uniform float amplitude;
void main() {
vec3 pos = position;
// Wave displacement
pos.z += sin(pos.x * 5.0 + time) * amplitude;
pos.z += sin(pos.y * 5.0 + time) * amplitude;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(0.5, 0.8, 1.0, 1.0);
}
`,
});
```
### Fresnel Effect
```javascript
const material = new THREE.ShaderMaterial({
vertexShader: `
varying vec3 vNormal;
varying vec3 vWorldPosition;
void main() {
vNormal = normalize(normalMatrix * normal);
vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec3 vNormal;
varying vec3 vWorldPosition;
void main() {
// cameraPosition is auto-provided by ShaderMaterial
vec3 viewDirection = normalize(cameraPosition - vWorldPosition);
float fresnel = pow(1.0 - dot(viewDirection, vNormal), 3.0);
vec3 baseColor = vec3(0.0, 0.0, 0.5);
vec3 fresnelColor = vec3(0.5, 0.8, 1.0);
gl_FragColor = vec4(mix(baseColor, fresnelColor, fresnel), 1.0);
}
`,
});
```
### Noise-Based Effects
```glsl
// Simple noise function
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
// Value noise
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
// Usage
float n = noise(vUv * 10.0 + time);
```
### Gradient
```glsl
// Linear gradient
vec3 color = mix(colorA, colorB, vUv.y);
// Radial gradient
float dist = distance(vUv, vec2(0.5));
vec3 color = mix(centerColor, edgeColor, dist * 2.0);
// Smooth gradient with custom curve
float t = smoothstep(0.0, 1.0, vUv.y);
vec3 color = mix(colorA, colorB, t);
```
### Rim Lighting
```javascript
const material = new THREE.ShaderMaterial({
vertexShader: `
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vNormal = normalize(normalMatrix * normal);
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vViewPosition = mvPosition.xyz;
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec3 viewDir = normalize(-vViewPosition);
float rim = 1.0 - max(0.0, dot(viewDir, vNormal));
rim = pow(rim, 4.0);
vec3 baseColor = vec3(0.2, 0.2, 0.8);
vec3 rimColor = vec3(1.0, 0.5, 0.0);
gl_FragColor = vec4(baseColor + rimColor * rim, 1.0);
}
`,
});
```
### Dissolve Effect
```glsl
uniform float progress;
uniform sampler2D noiseMap;
void main() {
float noise = texture2D(noiseMap, vUv).r;
if (noise < progress) {
discard;
}
// Edge glow
float edge = smoothstep(progress, progress + 0.1, noise);
vec3 edgeColor = vec3(1.0, 0.5, 0.0);
vec3 baseColor = vec3(0.5);
gl_FragColor = vec4(mix(edgeColor, baseColor, edge), 1.0);
}
```
## Extending Built-in Materials
### onBeforeCompile
Modify existing material shaders.
```javascript
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
material.onBeforeCompile = (shader) => {
// Add custom uniform
shader.uniforms.time = { value: 0 };
// Store reference for updates
material.userData.shader = shader;
// Modify vertex shader
shader.vertexShader = shader.vertexShader.replace(
"#include <begin_vertex>",
`
#include <begin_vertex>
transformed.y += sin(position.x * 10.0 + time) * 0.1;
`,
);
// Add uniform declaration
shader.vertexShader = "uniform float time;\n" + shader.vertexShader;
};
// Update in animation loop
if (material.userData.shader) {
material.userData.shader.uniforms.time.value = clock.getElapsedTime();
}
```
### Common Injection Points
```javascript
// Vertex shader chunks
"#include <begin_vertex>"; // After position is calculated
"#include <project_vertex>"; // After gl_Position
"#include <beginnormal_vertex>"; // Normal calculation start
// Fragment shader chunks
"#include <color_fragment>"; // After diffuse color
"#include <output_fragment>"; // Final output
"#include <fog_fragment>"; // After fog applied
```
## GLSL Built-in Functions
### Math Functions
```glsl
// Basic
abs(x), sign(x), floor(x), ceil(x), fract(x)
mod(x, y), min(x, y), max(x, y), clamp(x, min, max)
mix(a, b, t), step(edge, x), smoothstep(edge0, edge1, x)
// Trigonometry
sin(x), cos(x), tan(x)
asin(x), acos(x), atan(y, x), atan(x)
radians(degrees), degrees(radians)
// Exponential
pow(x, y), exp(x), log(x), exp2(x), log2(x)
sqrt(x), inversesqrt(x)
```
### Vector Functions
```glsl
// Length and distance
length(v), distance(p0, p1), dot(x, y), cross(x, y)
// Normalization
normalize(v)
// Reflection and refraction
reflect(I, N), refract(I, N, eta)
// Component-wise
lessThan(x, y), lessThanEqual(x, y)
greaterThan(x, y), greaterThanEqual(x, y)
equal(x, y), notEqual(x, y)
any(bvec), all(bvec)
```
### Texture Functions
```glsl
// GLSL 1.0 (default) - use texture2D/textureCube
texture2D(sampler, coord)
texture2D(sampler, coord, bias)
textureCube(sampler, coord)
// GLSL 3.0 (glslVersion: THREE.GLSL3) - use texture()
// texture(sampler, coord) replaces texture2D/textureCube
// Also use: out vec4 fragColor instead of gl_FragColor
// Texture size (GLSL 1.30+)
textureSize(sampler, lod)
```
## Common Material Properties
```javascript
const material = new THREE.ShaderMaterial({
uniforms: {
/* ... */
},
vertexShader: "/* ... */",
fragmentShader: "/* ... */",
// Rendering
transparent: true,
opacity: 1.0,
side: THREE.DoubleSide,
depthTest: true,
depthWrite: true,
// Blending
blending: THREE.NormalBlending,
// AdditiveBlending, SubtractiveBlending, MultiplyBlending
// Wireframe
wireframe: false,
wireframeLinewidth: 1, // Note: >1 has no effect on most platforms (WebGL limitation)
// Extensions
extensions: {
derivatives: true, // For fwidth, dFdx, dFdy
fragDepth: true, // gl_FragDepth
drawBuffers: true, // Multiple render targets
shaderTextureLOD: true, // texture2DLod
},
// GLSL version
glslVersion: THREE.GLSL3, // For WebGL2 features
});
```
## Shader Includes
### Using Three.js Shader Chunks
```javascript
import { ShaderChunk } from "three";
const fragmentShader = `
${ShaderChunk.common}
${ShaderChunk.packing}
uniform sampler2D depthTexture;
varying vec2 vUv;
void main() {
float depth = texture2D(depthTexture, vUv).r;
float linearDepth = perspectiveDepthToViewZ(depth, 0.1, 1000.0);
gl_FragColor = vec4(vec3(-linearDepth / 100.0), 1.0);
}
`;
```
### External Shader Files
```javascript
// With vite/webpack
import vertexShader from "./shaders/vertex.glsl";
import fragmentShader from "./shaders/fragment.glsl";
const material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
});
```
## Instanced Shaders
```javascript
// Instanced attribute
const offsets = new Float32Array(instanceCount * 3);
// Fill offsets...
geometry.setAttribute("offset", new THREE.InstancedBufferAttribute(offsets, 3));
const material = new THREE.ShaderMaterial({
vertexShader: `
attribute vec3 offset;
void main() {
vec3 pos = position + offset;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
});
```
## Debugging Shaders
```javascript
// Check for compile errors
material.onBeforeCompile = (shader) => {
console.log("Vertex Shader:", shader.vertexShader);
console.log("Fragment Shader:", shader.fragmentShader);
};
// Visual debugging
fragmentShader: `
void main() {
// Debug UV
gl_FragColor = vec4(vUv, 0.0, 1.0);
// Debug normals
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
// Debug position
gl_FragColor = vec4(vPosition * 0.1 + 0.5, 1.0);
}
`;
// Check WebGL errors
renderer.debug.checkShaderErrors = true;
```
## Performance Tips
1. **Minimize uniforms**: Group related values into vectors
2. **Avoid conditionals**: Use mix/step instead of if/else
3. **Precalculate**: Move calculations to JS when possible
4. **Use textures**: For complex functions, use lookup tables
5. **Limit overdraw**: Avoid transparent objects when possible
```glsl
// Instead of:
if (value > 0.5) {
color = colorA;
} else {
color = colorB;
}
// Use:
color = mix(colorB, colorA, step(0.5, value));
```
## See Also
- `threejs-materials` - Built-in material types
- `threejs-postprocessing` - Full-screen shader effects
- `threejs-textures` - Texture sampling in shaders

547
.opencode/skills/threejs/references/18-geometry.md Normal file
View File

@@ -0,0 +1,547 @@
# Three.js Geometry
## Overview
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
## Quick Start
```javascript
import * as THREE from "three";
// Built-in geometry
const box = new THREE.BoxGeometry(1, 1, 1);
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const plane = new THREE.PlaneGeometry(10, 10);
// Create mesh
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(box, material);
scene.add(mesh);
```
## Built-in Geometries
### Basic Shapes
```javascript
// Box - width, height, depth, widthSegments, heightSegments, depthSegments
new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
// Sphere - radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength
new THREE.SphereGeometry(1, 32, 32);
new THREE.SphereGeometry(1, 32, 32, 0, Math.PI * 2, 0, Math.PI); // Full sphere
new THREE.SphereGeometry(1, 32, 32, 0, Math.PI); // Hemisphere
// Plane - width, height, widthSegments, heightSegments
new THREE.PlaneGeometry(10, 10, 1, 1);
// Circle - radius, segments, thetaStart, thetaLength
new THREE.CircleGeometry(1, 32);
new THREE.CircleGeometry(1, 32, 0, Math.PI); // Semicircle
// Cylinder - radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded
new THREE.CylinderGeometry(1, 1, 2, 32, 1, false);
new THREE.CylinderGeometry(0, 1, 2, 32); // Cone
new THREE.CylinderGeometry(1, 1, 2, 6); // Hexagonal prism
// Cone - radius, height, radialSegments, heightSegments, openEnded
new THREE.ConeGeometry(1, 2, 32, 1, false);
// Torus - radius, tube, radialSegments, tubularSegments, arc
new THREE.TorusGeometry(1, 0.4, 16, 100);
// TorusKnot - radius, tube, tubularSegments, radialSegments, p, q
new THREE.TorusKnotGeometry(1, 0.4, 100, 16, 2, 3);
// Ring - innerRadius, outerRadius, thetaSegments, phiSegments
new THREE.RingGeometry(0.5, 1, 32, 1);
```
### Advanced Shapes
```javascript
// Capsule - radius, length, capSegments, radialSegments
new THREE.CapsuleGeometry(0.5, 1, 4, 8);
// Dodecahedron - radius, detail
new THREE.DodecahedronGeometry(1, 0);
// Icosahedron - radius, detail (0 = 20 faces, higher = smoother)
new THREE.IcosahedronGeometry(1, 0);
// Octahedron - radius, detail
new THREE.OctahedronGeometry(1, 0);
// Tetrahedron - radius, detail
new THREE.TetrahedronGeometry(1, 0);
// Polyhedron - vertices, indices, radius, detail
const vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1];
const indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1];
new THREE.PolyhedronGeometry(vertices, indices, 1, 0);
```
### Path-Based Shapes
```javascript
// Lathe - points[], segments, phiStart, phiLength
const points = [
new THREE.Vector2(0, 0),
new THREE.Vector2(0.5, 0),
new THREE.Vector2(0.5, 1),
new THREE.Vector2(0, 1),
];
new THREE.LatheGeometry(points, 32);
// Extrude - shape, options
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 1);
shape.lineTo(0, 0);
const extrudeSettings = {
steps: 2,
depth: 1,
bevelEnabled: true,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelSegments: 3,
};
new THREE.ExtrudeGeometry(shape, extrudeSettings);
// Tube - path, tubularSegments, radius, radialSegments, closed
const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(1, 0, 0),
]);
new THREE.TubeGeometry(curve, 64, 0.2, 8, false);
```
### Text Geometry
```javascript
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
const loader = new FontLoader();
loader.load("fonts/helvetiker_regular.typeface.json", (font) => {
const geometry = new TextGeometry("Hello", {
font: font,
size: 1,
depth: 0.2, // Was 'height' in older versions
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelSegments: 5,
});
// Center text
geometry.computeBoundingBox();
geometry.center();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
```
## BufferGeometry
The base class for all geometries. Stores data as typed arrays for GPU efficiency.
### Custom BufferGeometry
```javascript
const geometry = new THREE.BufferGeometry();
// Vertices (3 floats per vertex: x, y, z)
const vertices = new Float32Array([
-1,
-1,
0, // vertex 0
1,
-1,
0, // vertex 1
1,
1,
0, // vertex 2
-1,
1,
0, // vertex 3
]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
// Indices (for indexed geometry - reuse vertices)
const indices = new Uint16Array([
0,
1,
2, // triangle 1
0,
2,
3, // triangle 2
]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Normals (required for lighting)
const normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
// UVs (for texturing)
const uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
// Colors (per-vertex colors)
const colors = new Float32Array([
1,
0,
0, // red
0,
1,
0, // green
0,
0,
1, // blue
1,
1,
0, // yellow
]);
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
// Use with: material.vertexColors = true
```
### BufferAttribute Types
```javascript
// Common attribute types
new THREE.BufferAttribute(array, itemSize);
// Typed array options
new Float32Array(count * itemSize); // Positions, normals, UVs
new Uint16Array(count); // Indices (up to 65535 vertices)
new Uint32Array(count); // Indices (larger meshes)
new Uint8Array(count * itemSize); // Colors (0-255 range)
// Item sizes
// Position: 3 (x, y, z)
// Normal: 3 (x, y, z)
// UV: 2 (u, v)
// Color: 3 (r, g, b) or 4 (r, g, b, a)
// Index: 1
```
### Modifying BufferGeometry
```javascript
const positions = geometry.attributes.position;
// Modify vertex
positions.setXYZ(index, x, y, z);
// Access vertex
const x = positions.getX(index);
const y = positions.getY(index);
const z = positions.getZ(index);
// Flag for GPU update
positions.needsUpdate = true;
// Recompute normals after position changes
geometry.computeVertexNormals();
// Recompute bounding box/sphere after changes
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
```
### Interleaved Buffers (Advanced)
```javascript
// More efficient memory layout for large meshes
const interleavedBuffer = new THREE.InterleavedBuffer(
new Float32Array([
// pos.x, pos.y, pos.z, uv.u, uv.v (repeated per vertex)
-1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1,
]),
5, // stride (floats per vertex)
);
geometry.setAttribute(
"position",
new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0),
); // size 3, offset 0
geometry.setAttribute(
"uv",
new THREE.InterleavedBufferAttribute(interleavedBuffer, 2, 3),
); // size 2, offset 3
```
## EdgesGeometry & WireframeGeometry
```javascript
// Edge lines (only hard edges)
const edges = new THREE.EdgesGeometry(boxGeometry, 15); // 15 = threshold angle
const edgeMesh = new THREE.LineSegments(
edges,
new THREE.LineBasicMaterial({ color: 0xffffff }),
);
// Wireframe (all triangles)
const wireframe = new THREE.WireframeGeometry(boxGeometry);
const wireMesh = new THREE.LineSegments(
wireframe,
new THREE.LineBasicMaterial({ color: 0xffffff }),
);
```
## Points
```javascript
// Create point cloud
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(1000 * 3);
for (let i = 0; i < 1000; i++) {
positions[i * 3] = (Math.random() - 0.5) * 10;
positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
}
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({
size: 0.1,
sizeAttenuation: true, // Size decreases with distance
color: 0xffffff,
});
const points = new THREE.Points(geometry, material);
scene.add(points);
```
## Lines
```javascript
// Line (connected points)
const points = [
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(1, 0, 0),
];
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(
geometry,
new THREE.LineBasicMaterial({ color: 0xff0000 }),
);
// LineLoop (closed loop)
const loop = new THREE.LineLoop(geometry, material);
// LineSegments (pairs of points)
const segmentsGeometry = new THREE.BufferGeometry();
segmentsGeometry.setAttribute(
"position",
new THREE.BufferAttribute(
new Float32Array([
-1,
0,
0,
0,
1,
0, // segment 1
0,
1,
0,
1,
0,
0, // segment 2
]),
3,
),
);
const segments = new THREE.LineSegments(segmentsGeometry, material);
```
## InstancedMesh
Efficiently render many copies of the same geometry.
```javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const count = 1000;
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
// Set transforms for each instance
const dummy = new THREE.Object3D();
const matrix = new THREE.Matrix4();
for (let i = 0; i < count; i++) {
dummy.position.set(
(Math.random() - 0.5) * 20,
(Math.random() - 0.5) * 20,
(Math.random() - 0.5) * 20,
);
dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
dummy.scale.setScalar(0.5 + Math.random());
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
// Flag for GPU update
instancedMesh.instanceMatrix.needsUpdate = true;
// Optional: per-instance colors
instancedMesh.instanceColor = new THREE.InstancedBufferAttribute(
new Float32Array(count * 3),
3,
);
for (let i = 0; i < count; i++) {
instancedMesh.setColorAt(
i,
new THREE.Color(Math.random(), Math.random(), Math.random()),
);
}
instancedMesh.instanceColor.needsUpdate = true;
scene.add(instancedMesh);
```
### Update Instance at Runtime
```javascript
// Update single instance
const matrix = new THREE.Matrix4();
instancedMesh.getMatrixAt(index, matrix);
// Modify matrix...
instancedMesh.setMatrixAt(index, matrix);
instancedMesh.instanceMatrix.needsUpdate = true;
// Raycasting with instanced mesh
const intersects = raycaster.intersectObject(instancedMesh);
if (intersects.length > 0) {
const instanceId = intersects[0].instanceId;
}
```
## InstancedBufferGeometry (Advanced)
For custom per-instance attributes beyond transform/color.
```javascript
const geometry = new THREE.InstancedBufferGeometry();
geometry.copy(new THREE.BoxGeometry(1, 1, 1));
// Add per-instance attribute
const offsets = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
offsets[i * 3] = Math.random() * 10;
offsets[i * 3 + 1] = Math.random() * 10;
offsets[i * 3 + 2] = Math.random() * 10;
}
geometry.setAttribute("offset", new THREE.InstancedBufferAttribute(offsets, 3));
// Use in shader
// attribute vec3 offset;
// vec3 transformed = position + offset;
```
## Geometry Utilities
```javascript
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
// Merge geometries (must have same attributes)
const merged = BufferGeometryUtils.mergeGeometries([geo1, geo2, geo3]);
// Merge with groups (for multi-material)
const merged = BufferGeometryUtils.mergeGeometries([geo1, geo2], true);
// Compute tangents (required for normal maps)
BufferGeometryUtils.computeTangents(geometry);
// Interleave attributes for better performance
const interleaved = BufferGeometryUtils.interleaveAttributes([
geometry.attributes.position,
geometry.attributes.normal,
geometry.attributes.uv,
]);
```
## Common Patterns
### Center Geometry
```javascript
geometry.computeBoundingBox();
geometry.center(); // Move vertices so center is at origin
```
### Scale to Fit
```javascript
geometry.computeBoundingBox();
const size = new THREE.Vector3();
geometry.boundingBox.getSize(size);
const maxDim = Math.max(size.x, size.y, size.z);
geometry.scale(1 / maxDim, 1 / maxDim, 1 / maxDim);
```
### Clone and Transform
```javascript
const clone = geometry.clone();
clone.rotateX(Math.PI / 2);
clone.translate(0, 1, 0);
clone.scale(2, 2, 2);
```
### Morph Targets
```javascript
// Base geometry
const geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);
// Create morph target
const morphPositions = geometry.attributes.position.array.slice();
for (let i = 0; i < morphPositions.length; i += 3) {
morphPositions[i] *= 2; // Scale X
morphPositions[i + 1] *= 0.5; // Squash Y
}
geometry.morphAttributes.position = [
new THREE.BufferAttribute(new Float32Array(morphPositions), 3),
];
const mesh = new THREE.Mesh(geometry, material);
mesh.morphTargetInfluences[0] = 0.5; // 50% blend
```
## Performance Tips
1. **Use indexed geometry**: Reuse vertices with indices
2. **Merge static meshes**: Reduce draw calls with `mergeGeometries`
3. **Use InstancedMesh**: For many identical objects
4. **Choose appropriate segment counts**: More segments = smoother but slower
5. **Dispose unused geometry**: `geometry.dispose()`
```javascript
// Good segment counts for common uses
new THREE.SphereGeometry(1, 32, 32); // Good quality
new THREE.SphereGeometry(1, 64, 64); // High quality
new THREE.SphereGeometry(1, 16, 16); // Performance mode
// Dispose when done
geometry.dispose();
```
## See Also
- `threejs-fundamentals` - Scene setup and Object3D
- `threejs-materials` - Material types for meshes
- `threejs-shaders` - Custom vertex manipulation

236
.opencode/skills/threejs/scripts/core.py Normal file
View File

@@ -0,0 +1,236 @@
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Three.js Skill Core - BM25 search engine for Three.js examples and API
"""
import csv
import re
from pathlib import Path
from math import log
from collections import defaultdict
# ============ CONFIGURATION ============
DATA_DIR = Path(__file__).parent.parent / "data"
MAX_RESULTS = 5
CSV_CONFIG = {
"examples": {
"file": "examples-all.csv",
"search_cols": ["Category", "Name", "Keywords", "Use Cases", "Description"],
"output_cols": ["ID", "Category", "Name", "File", "Keywords", "URL", "Complexity", "Use Cases", "Description"]
},
"categories": {
"file": "categories.csv",
"search_cols": ["Category", "Keywords", "Description", "Primary Use Cases"],
"output_cols": ["Category", "Keywords", "Description", "Complexity Range", "Example Count", "Primary Use Cases", "Related Categories"]
},
"use-cases": {
"file": "use-cases.csv",
"search_cols": ["Use Case", "Keywords", "Description", "Technologies"],
"output_cols": ["Use Case", "Keywords", "Recommended Examples", "Complexity", "Technologies", "Description"]
},
"api": {
"file": "api-reference.csv",
"search_cols": ["Category", "Class", "Keywords", "Description", "Common Methods"],
"output_cols": ["Category", "Class", "Keywords", "Description", "Common Methods", "Related Classes"]
}
}
# Domain keyword mapping for auto-detection
DOMAIN_KEYWORDS = {
"examples": ["example", "demo", "showcase", "webgl", "webgpu", "animation", "loader", "material", "geometry", "light", "shadow", "postprocessing", "effect", "particle", "physics", "vr", "xr"],
"categories": ["category", "group", "section", "list all", "types of"],
"use-cases": ["use case", "project", "application", "build", "create", "make", "implement", "for", "suitable"],
"api": ["api", "class", "method", "function", "property", "how to", "what is", "parameter", "constructor"]
}
# ============ BM25 IMPLEMENTATION ============
class BM25:
"""BM25 ranking algorithm for text search"""
def __init__(self, k1=1.5, b=0.75):
self.k1 = k1
self.b = b
self.corpus = []
self.doc_lengths = []
self.avgdl = 0
self.idf = {}
self.doc_freqs = defaultdict(int)
self.N = 0
def tokenize(self, text):
"""Lowercase, split, remove punctuation, filter short words"""
text = re.sub(r'[^\w\s]', ' ', str(text).lower())
return [w for w in text.split() if len(w) > 1]
def fit(self, documents):
"""Build BM25 index from documents"""
self.corpus = [self.tokenize(doc) for doc in documents]
self.N = len(self.corpus)
if self.N == 0:
return
self.doc_lengths = [len(doc) for doc in self.corpus]
self.avgdl = sum(self.doc_lengths) / self.N
for doc in self.corpus:
seen = set()
for word in doc:
if word not in seen:
self.doc_freqs[word] += 1
seen.add(word)
for word, freq in self.doc_freqs.items():
self.idf[word] = log((self.N - freq + 0.5) / (freq + 0.5) + 1)
def score(self, query):
"""Score all documents against query"""
query_tokens = self.tokenize(query)
scores = []
for idx, doc in enumerate(self.corpus):
score = 0
doc_len = self.doc_lengths[idx]
term_freqs = defaultdict(int)
for word in doc:
term_freqs[word] += 1
for token in query_tokens:
if token in self.idf:
tf = term_freqs[token]
idf = self.idf[token]
numerator = tf * (self.k1 + 1)
denominator = tf + self.k1 * (1 - self.b + self.b * doc_len / self.avgdl)
score += idf * numerator / denominator
scores.append((idx, score))
return sorted(scores, key=lambda x: x[1], reverse=True)
# ============ SEARCH FUNCTIONS ============
def _load_csv(filepath):
"""Load CSV and return list of dicts"""
with open(filepath, 'r', encoding='utf-8') as f:
return list(csv.DictReader(f))
def _search_csv(filepath, search_cols, output_cols, query, max_results):
"""Core search function using BM25"""
if not filepath.exists():
return []
data = _load_csv(filepath)
# Build documents from search columns
documents = [" ".join(str(row.get(col, "")) for col in search_cols) for row in data]
# BM25 search
bm25 = BM25()
bm25.fit(documents)
ranked = bm25.score(query)
# Get top results with score > 0
results = []
for idx, score in ranked[:max_results]:
if score > 0:
row = data[idx]
results.append({col: row.get(col, "") for col in output_cols if col in row})
return results
def detect_domain(query):
"""Auto-detect the most relevant domain from query"""
query_lower = query.lower()
scores = {
domain: sum(1 for kw in keywords if kw in query_lower)
for domain, keywords in DOMAIN_KEYWORDS.items()
}
best = max(scores, key=scores.get)
return best if scores[best] > 0 else "examples"
def search(query, domain=None, max_results=MAX_RESULTS):
"""Main search function with auto-domain detection"""
if domain is None:
domain = detect_domain(query)
config = CSV_CONFIG.get(domain, CSV_CONFIG["examples"])
filepath = DATA_DIR / config["file"]
if not filepath.exists():
return {"error": f"File not found: {filepath}", "domain": domain}
results = _search_csv(filepath, config["search_cols"], config["output_cols"], query, max_results)
return {
"domain": domain,
"query": query,
"file": config["file"],
"count": len(results),
"results": results
}
def search_by_complexity(complexity, max_results=MAX_RESULTS):
"""Search examples by complexity level"""
filepath = DATA_DIR / "examples-all.csv"
if not filepath.exists():
return {"error": f"File not found: {filepath}"}
data = _load_csv(filepath)
results = [row for row in data if row.get("Complexity", "").lower() == complexity.lower()][:max_results]
return {
"domain": "examples",
"complexity": complexity,
"count": len(results),
"results": results
}
def search_by_category(category, max_results=MAX_RESULTS):
"""Search examples by category"""
filepath = DATA_DIR / "examples-all.csv"
if not filepath.exists():
return {"error": f"File not found: {filepath}"}
data = _load_csv(filepath)
results = [row for row in data if category.lower() in row.get("Category", "").lower()][:max_results]
return {
"domain": "examples",
"category": category,
"count": len(results),
"results": results
}
def get_recommended_examples(use_case, max_results=MAX_RESULTS):
"""Get recommended examples for a specific use case"""
# First search use cases
use_case_result = search(use_case, domain="use-cases", max_results=1)
if use_case_result.get("count", 0) == 0:
return {"error": f"No use case found for: {use_case}"}
# Get recommended examples
recommended = use_case_result["results"][0].get("Recommended Examples", "")
example_names = [e.strip() for e in recommended.split(";")]
# Search for each example
all_results = []
for name in example_names[:max_results]:
result = search(name, domain="examples", max_results=1)
if result.get("count", 0) > 0:
all_results.extend(result["results"])
return {
"domain": "examples",
"use_case": use_case,
"count": len(all_results),
"results": all_results
}

688
.opencode/skills/threejs/scripts/extract_examples.py Normal file
View File

@@ -0,0 +1,688 @@
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Extract all Three.js examples from the official examples page.
Generates tracking CSV and examples data CSV.
Total: 556 examples across 13 categories.
"""
import csv
from pathlib import Path
from datetime import datetime
DATA_DIR = Path(__file__).parent.parent / "data"
SKILL_DIR = Path(__file__).parent.parent
# All 556 examples extracted from https://threejs.org/examples/
# Data extracted via browser automation on 2026-01-21
ALL_EXAMPLES = [
# webgl category (216 examples)
{"category": "webgl", "file": "webgl_animation_keyframes.html"},
{"category": "webgl", "file": "webgl_animation_skinning_blending.html"},
{"category": "webgl", "file": "webgl_animation_skinning_additive_blending.html"},
{"category": "webgl", "file": "webgl_animation_skinning_ik.html"},
{"category": "webgl", "file": "webgl_animation_skinning_morph.html"},
{"category": "webgl", "file": "webgl_animation_multiple.html"},
{"category": "webgl", "file": "webgl_animation_walk.html"},
{"category": "webgl", "file": "webgl_batch_lod_bvh.html"},
{"category": "webgl", "file": "webgl_camera.html"},
{"category": "webgl", "file": "webgl_camera_array.html"},
{"category": "webgl", "file": "webgl_camera_logarithmicdepthbuffer.html"},
{"category": "webgl", "file": "webgl_clipping.html"},
{"category": "webgl", "file": "webgl_clipping_advanced.html"},
{"category": "webgl", "file": "webgl_clipping_intersection.html"},
{"category": "webgl", "file": "webgl_clipping_stencil.html"},
{"category": "webgl", "file": "webgl_decals.html"},
{"category": "webgl", "file": "webgl_depth_texture.html"},
{"category": "webgl", "file": "webgl_effects_anaglyph.html"},
{"category": "webgl", "file": "webgl_effects_ascii.html"},
{"category": "webgl", "file": "webgl_effects_parallaxbarrier.html"},
{"category": "webgl", "file": "webgl_effects_stereo.html"},
{"category": "webgl", "file": "webgl_framebuffer_texture.html"},
{"category": "webgl", "file": "webgl_geometries.html"},
{"category": "webgl", "file": "webgl_geometry_colors.html"},
{"category": "webgl", "file": "webgl_geometry_colors_lookuptable.html"},
{"category": "webgl", "file": "webgl_geometry_convex.html"},
{"category": "webgl", "file": "webgl_geometry_csg.html"},
{"category": "webgl", "file": "webgl_geometry_cube.html"},
{"category": "webgl", "file": "webgl_geometry_dynamic.html"},
{"category": "webgl", "file": "webgl_geometry_extrude_shapes.html"},
{"category": "webgl", "file": "webgl_geometry_extrude_splines.html"},
{"category": "webgl", "file": "webgl_geometry_minecraft.html"},
{"category": "webgl", "file": "webgl_geometry_nurbs.html"},
{"category": "webgl", "file": "webgl_geometry_shapes.html"},
{"category": "webgl", "file": "webgl_geometry_spline_editor.html"},
{"category": "webgl", "file": "webgl_geometry_teapot.html"},
{"category": "webgl", "file": "webgl_geometry_terrain.html"},
{"category": "webgl", "file": "webgl_geometry_terrain_raycast.html"},
{"category": "webgl", "file": "webgl_geometry_text.html"},
{"category": "webgl", "file": "webgl_geometry_text_shapes.html"},
{"category": "webgl", "file": "webgl_geometry_text_stroke.html"},
{"category": "webgl", "file": "webgl_helpers.html"},
{"category": "webgl", "file": "webgl_instancing_morph.html"},
{"category": "webgl", "file": "webgl_instancing_dynamic.html"},
{"category": "webgl", "file": "webgl_instancing_performance.html"},
{"category": "webgl", "file": "webgl_instancing_raycast.html"},
{"category": "webgl", "file": "webgl_instancing_scatter.html"},
{"category": "webgl", "file": "webgl_interactive_buffergeometry.html"},
{"category": "webgl", "file": "webgl_interactive_cubes.html"},
{"category": "webgl", "file": "webgl_interactive_cubes_gpu.html"},
{"category": "webgl", "file": "webgl_interactive_cubes_ortho.html"},
{"category": "webgl", "file": "webgl_interactive_lines.html"},
{"category": "webgl", "file": "webgl_interactive_points.html"},
{"category": "webgl", "file": "webgl_interactive_raycasting_points.html"},
{"category": "webgl", "file": "webgl_interactive_voxelpainter.html"},
{"category": "webgl", "file": "webgl_lensflares.html"},
{"category": "webgl", "file": "webgl_lightprobe.html"},
{"category": "webgl", "file": "webgl_lightprobe_cubecamera.html"},
{"category": "webgl", "file": "webgl_lights_hemisphere.html"},
{"category": "webgl", "file": "webgl_lights_physical.html"},
{"category": "webgl", "file": "webgl_lights_pointlights.html"},
{"category": "webgl", "file": "webgl_lights_spotlights.html"},
{"category": "webgl", "file": "webgl_lights_rectarealight.html"},
{"category": "webgl", "file": "webgl_lines_colors.html"},
{"category": "webgl", "file": "webgl_lines_dashed.html"},
{"category": "webgl", "file": "webgl_lines_fat.html"},
{"category": "webgl", "file": "webgl_lines_fat_raycasting.html"},
{"category": "webgl", "file": "webgl_lines_fat_wireframe.html"},
{"category": "webgl", "file": "webgl_loader_3dm.html"},
{"category": "webgl", "file": "webgl_loader_3ds.html"},
{"category": "webgl", "file": "webgl_loader_3dtiles.html"},
{"category": "webgl", "file": "webgl_loader_3mf.html"},
{"category": "webgl", "file": "webgl_loader_3mf_materials.html"},
{"category": "webgl", "file": "webgl_loader_amf.html"},
{"category": "webgl", "file": "webgl_loader_bvh.html"},
{"category": "webgl", "file": "webgl_loader_collada.html"},
{"category": "webgl", "file": "webgl_loader_collada_kinematics.html"},
{"category": "webgl", "file": "webgl_loader_collada_skinning.html"},
{"category": "webgl", "file": "webgl_loader_draco.html"},
{"category": "webgl", "file": "webgl_loader_fbx.html"},
{"category": "webgl", "file": "webgl_loader_fbx_nurbs.html"},
{"category": "webgl", "file": "webgl_loader_gcode.html"},
{"category": "webgl", "file": "webgl_loader_gltf.html"},
{"category": "webgl", "file": "webgl_loader_gltf_animation_pointer.html"},
{"category": "webgl", "file": "webgl_loader_gltf_progressive_lod.html"},
{"category": "webgl", "file": "webgl_loader_gltf_avif.html"},
{"category": "webgl", "file": "webgl_loader_gltf_compressed.html"},
{"category": "webgl", "file": "webgl_loader_gltf_dispersion.html"},
{"category": "webgl", "file": "webgl_loader_gltf_instancing.html"},
{"category": "webgl", "file": "webgl_loader_gltf_iridescence.html"},
{"category": "webgl", "file": "webgl_loader_gltf_lights.html"},
{"category": "webgl", "file": "webgl_loader_gltf_sheen.html"},
{"category": "webgl", "file": "webgl_loader_gltf_transmission.html"},
{"category": "webgl", "file": "webgl_loader_gltf_variants.html"},
{"category": "webgl", "file": "webgl_loader_ifc.html"},
{"category": "webgl", "file": "webgl_loader_imagebitmap.html"},
{"category": "webgl", "file": "webgl_loader_kmz.html"},
{"category": "webgl", "file": "webgl_loader_ldraw.html"},
{"category": "webgl", "file": "webgl_loader_lwo.html"},
{"category": "webgl", "file": "webgl_loader_md2.html"},
{"category": "webgl", "file": "webgl_loader_mdd.html"},
{"category": "webgl", "file": "webgl_loader_nrrd.html"},
{"category": "webgl", "file": "webgl_loader_obj.html"},
{"category": "webgl", "file": "webgl_loader_pcd.html"},
{"category": "webgl", "file": "webgl_loader_pdb.html"},
{"category": "webgl", "file": "webgl_loader_ply.html"},
{"category": "webgl", "file": "webgl_loader_stl.html"},
{"category": "webgl", "file": "webgl_loader_svg.html"},
{"category": "webgl", "file": "webgl_loader_texture_dds.html"},
{"category": "webgl", "file": "webgl_loader_texture_exr.html"},
{"category": "webgl", "file": "webgl_loader_texture_ultrahdr.html"},
{"category": "webgl", "file": "webgl_loader_texture_hdr.html"},
{"category": "webgl", "file": "webgl_loader_texture_ktx.html"},
{"category": "webgl", "file": "webgl_loader_texture_ktx2.html"},
{"category": "webgl", "file": "webgl_loader_texture_lottie.html"},
{"category": "webgl", "file": "webgl_loader_texture_pvrtc.html"},
{"category": "webgl", "file": "webgl_loader_texture_tga.html"},
{"category": "webgl", "file": "webgl_loader_texture_tiff.html"},
{"category": "webgl", "file": "webgl_loader_ttf.html"},
{"category": "webgl", "file": "webgl_loader_usdz.html"},
{"category": "webgl", "file": "webgl_loader_vox.html"},
{"category": "webgl", "file": "webgl_loader_vrml.html"},
{"category": "webgl", "file": "webgl_loader_vtk.html"},
{"category": "webgl", "file": "webgl_loader_xyz.html"},
{"category": "webgl", "file": "webgl_lod.html"},
{"category": "webgl", "file": "webgl_marchingcubes.html"},
{"category": "webgl", "file": "webgl_materials_alphahash.html"},
{"category": "webgl", "file": "webgl_materials_blending.html"},
{"category": "webgl", "file": "webgl_materials_blending_custom.html"},
{"category": "webgl", "file": "webgl_materials_bumpmap.html"},
{"category": "webgl", "file": "webgl_materials_car.html"},
{"category": "webgl", "file": "webgl_materials_channels.html"},
{"category": "webgl", "file": "webgl_materials_cubemap.html"},
{"category": "webgl", "file": "webgl_materials_cubemap_dynamic.html"},
{"category": "webgl", "file": "webgl_materials_cubemap_refraction.html"},
{"category": "webgl", "file": "webgl_materials_cubemap_mipmaps.html"},
{"category": "webgl", "file": "webgl_materials_cubemap_render_to_mipmaps.html"},
{"category": "webgl", "file": "webgl_materials_displacementmap.html"},
{"category": "webgl", "file": "webgl_materials_envmaps.html"},
{"category": "webgl", "file": "webgl_materials_envmaps_exr.html"},
{"category": "webgl", "file": "webgl_materials_envmaps_groundprojected.html"},
{"category": "webgl", "file": "webgl_materials_envmaps_hdr.html"},
{"category": "webgl", "file": "webgl_materials_envmaps_fasthdr.html"},
{"category": "webgl", "file": "webgl_materials_matcap.html"},
{"category": "webgl", "file": "webgl_materials_normalmap.html"},
{"category": "webgl", "file": "webgl_materials_normalmap_object_space.html"},
{"category": "webgl", "file": "webgl_materials_physical_clearcoat.html"},
{"category": "webgl", "file": "webgl_materials_physical_transmission.html"},
{"category": "webgl", "file": "webgl_materials_physical_transmission_alpha.html"},
{"category": "webgl", "file": "webgl_materials_subsurface_scattering.html"},
{"category": "webgl", "file": "webgl_materials_texture_anisotropy.html"},
{"category": "webgl", "file": "webgl_materials_texture_canvas.html"},
{"category": "webgl", "file": "webgl_materials_texture_filters.html"},
{"category": "webgl", "file": "webgl_materials_texture_manualmipmap.html"},
{"category": "webgl", "file": "webgl_materials_texture_partialupdate.html"},
{"category": "webgl", "file": "webgl_materials_texture_rotation.html"},
{"category": "webgl", "file": "webgl_materials_toon.html"},
{"category": "webgl", "file": "webgl_materials_video.html"},
{"category": "webgl", "file": "webgl_materials_video_webcam.html"},
{"category": "webgl", "file": "webgl_materials_wireframe.html"},
{"category": "webgl", "file": "webgl_pmrem_cubemap.html"},
{"category": "webgl", "file": "webgl_pmrem_equirectangular.html"},
{"category": "webgl", "file": "webgl_pmrem_test.html"},
{"category": "webgl", "file": "webgl_math_obb.html"},
{"category": "webgl", "file": "webgl_math_orientation_transform.html"},
{"category": "webgl", "file": "webgl_mesh_batch.html"},
{"category": "webgl", "file": "webgl_mirror.html"},
{"category": "webgl", "file": "webgl_modifier_curve.html"},
{"category": "webgl", "file": "webgl_modifier_curve_instanced.html"},
{"category": "webgl", "file": "webgl_modifier_edgesplit.html"},
{"category": "webgl", "file": "webgl_modifier_simplifier.html"},
{"category": "webgl", "file": "webgl_modifier_subdivision.html"},
{"category": "webgl", "file": "webgl_modifier_tessellation.html"},
{"category": "webgl", "file": "webgl_morphtargets.html"},
{"category": "webgl", "file": "webgl_morphtargets_face.html"},
{"category": "webgl", "file": "webgl_morphtargets_horse.html"},
{"category": "webgl", "file": "webgl_morphtargets_sphere.html"},
{"category": "webgl", "file": "webgl_morphtargets_webcam.html"},
{"category": "webgl", "file": "webgl_multiple_elements.html"},
{"category": "webgl", "file": "webgl_multiple_elements_text.html"},
{"category": "webgl", "file": "webgl_multiple_scenes_comparison.html"},
{"category": "webgl", "file": "webgl_multiple_views.html"},
{"category": "webgl", "file": "webgl_panorama_cube.html"},
{"category": "webgl", "file": "webgl_panorama_equirectangular.html"},
{"category": "webgl", "file": "webgl_points_billboards.html"},
{"category": "webgl", "file": "webgl_points_dynamic.html"},
{"category": "webgl", "file": "webgl_points_sprites.html"},
{"category": "webgl", "file": "webgl_points_waves.html"},
{"category": "webgl", "file": "webgl_portal.html"},
{"category": "webgl", "file": "webgl_raycaster_bvh.html"},
{"category": "webgl", "file": "webgl_raycaster_sprite.html"},
{"category": "webgl", "file": "webgl_raycaster_texture.html"},
{"category": "webgl", "file": "webgl_read_float_buffer.html"},
{"category": "webgl", "file": "webgl_renderer_pathtracer.html"},
{"category": "webgl", "file": "webgl_refraction.html"},
{"category": "webgl", "file": "webgl_rtt.html"},
{"category": "webgl", "file": "webgl_shader.html"},
{"category": "webgl", "file": "webgl_shader_lava.html"},
{"category": "webgl", "file": "webgl_shaders_ocean.html"},
{"category": "webgl", "file": "webgl_shaders_sky.html"},
{"category": "webgl", "file": "webgl_shadow_contact.html"},
{"category": "webgl", "file": "webgl_shadowmap.html"},
{"category": "webgl", "file": "webgl_shadowmap_performance.html"},
{"category": "webgl", "file": "webgl_shadowmap_pointlight.html"},
{"category": "webgl", "file": "webgl_shadowmap_viewer.html"},
{"category": "webgl", "file": "webgl_shadowmap_vsm.html"},
{"category": "webgl", "file": "webgl_shadowmesh.html"},
{"category": "webgl", "file": "webgl_sprites.html"},
{"category": "webgl", "file": "webgl_test_memory.html"},
{"category": "webgl", "file": "webgl_test_memory2.html"},
{"category": "webgl", "file": "webgl_test_wide_gamut.html"},
{"category": "webgl", "file": "webgl_tonemapping.html"},
{"category": "webgl", "file": "webgl_video_kinect.html"},
{"category": "webgl", "file": "webgl_video_panorama_equirectangular.html"},
{"category": "webgl", "file": "webgl_watch.html"},
# webgl / postprocessing category (27 examples)
{"category": "webgl / postprocessing", "file": "webgl_postprocessing.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_3dlut.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_advanced.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_afterimage.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_backgrounds.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_transition.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_dof.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_dof2.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_fxaa.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_glitch.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_godrays.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_gtao.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_rgb_halftone.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_masking.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_material_ao.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_ssaa.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_outline.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_pixel.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_procedural.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_sao.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_smaa.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_sobel.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_ssao.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_ssr.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_taa.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_unreal_bloom.html"},
{"category": "webgl / postprocessing", "file": "webgl_postprocessing_unreal_bloom_selective.html"},
# webgl / advanced category (48 examples)
{"category": "webgl / advanced", "file": "webgl_clipculldistance.html"},
{"category": "webgl / advanced", "file": "webgl_custom_attributes.html"},
{"category": "webgl / advanced", "file": "webgl_custom_attributes_lines.html"},
{"category": "webgl / advanced", "file": "webgl_custom_attributes_points.html"},
{"category": "webgl / advanced", "file": "webgl_custom_attributes_points2.html"},
{"category": "webgl / advanced", "file": "webgl_custom_attributes_points3.html"},
{"category": "webgl / advanced", "file": "webgl_gpgpu_birds.html"},
{"category": "webgl / advanced", "file": "webgl_gpgpu_birds_gltf.html"},
{"category": "webgl / advanced", "file": "webgl_gpgpu_water.html"},
{"category": "webgl / advanced", "file": "webgl_gpgpu_protoplanet.html"},
{"category": "webgl / advanced", "file": "webgl_materials_modified.html"},
{"category": "webgl / advanced", "file": "webgl_multiple_rendertargets.html"},
{"category": "webgl / advanced", "file": "webgl_multisampled_renderbuffers.html"},
{"category": "webgl / advanced", "file": "webgl_rendertarget_texture2darray.html"},
{"category": "webgl / advanced", "file": "webgl_reversed_depth_buffer.html"},
{"category": "webgl / advanced", "file": "webgl_shadowmap_csm.html"},
{"category": "webgl / advanced", "file": "webgl_shadowmap_pcss.html"},
{"category": "webgl / advanced", "file": "webgl_shadowmap_progressive.html"},
{"category": "webgl / advanced", "file": "webgl_simple_gi.html"},
{"category": "webgl / advanced", "file": "webgl_texture2darray.html"},
{"category": "webgl / advanced", "file": "webgl_texture2darray_compressed.html"},
{"category": "webgl / advanced", "file": "webgl_texture2darray_layerupdate.html"},
{"category": "webgl / advanced", "file": "webgl_texture3d.html"},
{"category": "webgl / advanced", "file": "webgl_texture3d_partialupdate.html"},
{"category": "webgl / advanced", "file": "webgl_tiled_forward.html"},
{"category": "webgl / advanced", "file": "webgl_ubo.html"},
{"category": "webgl / advanced", "file": "webgl_ubo_arrays.html"},
{"category": "webgl / advanced", "file": "webgl_worker_offscreencanvas.html"},
# webgpu (wip) category (190 examples)
{"category": "webgpu (wip)", "file": "webgpu_audio_processing.html"},
{"category": "webgpu (wip)", "file": "webgpu_backdrop.html"},
{"category": "webgpu (wip)", "file": "webgpu_backdrop_area.html"},
{"category": "webgpu (wip)", "file": "webgpu_backdrop_water.html"},
{"category": "webgpu (wip)", "file": "webgpu_camera_logarithmicdepthbuffer.html"},
{"category": "webgpu (wip)", "file": "webgpu_centroid_sampling.html"},
{"category": "webgpu (wip)", "file": "webgpu_clearcoat.html"},
{"category": "webgpu (wip)", "file": "webgpu_clipping.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_audio.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_birds.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_cloth.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_geometry.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_particles.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_particles_fluid.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_particles_rain.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_particles_snow.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_points.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_reduce.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_sort_bitonic.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_texture.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_texture_3d.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_texture_pingpong.html"},
{"category": "webgpu (wip)", "file": "webgpu_compute_water.html"},
{"category": "webgpu (wip)", "file": "webgpu_cubemap_adjustments.html"},
{"category": "webgpu (wip)", "file": "webgpu_cubemap_dynamic.html"},
{"category": "webgpu (wip)", "file": "webgpu_cubemap_mix.html"},
{"category": "webgpu (wip)", "file": "webgpu_custom_fog.html"},
{"category": "webgpu (wip)", "file": "webgpu_custom_fog_background.html"},
{"category": "webgpu (wip)", "file": "webgpu_depth_texture.html"},
{"category": "webgpu (wip)", "file": "webgpu_display_stereo.html"},
{"category": "webgpu (wip)", "file": "webgpu_equirectangular_projection.html"},
{"category": "webgpu (wip)", "file": "webgpu_instancing.html"},
{"category": "webgpu (wip)", "file": "webgpu_instancing_morph.html"},
{"category": "webgpu (wip)", "file": "webgpu_instance_mesh.html"},
{"category": "webgpu (wip)", "file": "webgpu_instance_points.html"},
{"category": "webgpu (wip)", "file": "webgpu_instance_sprites.html"},
{"category": "webgpu (wip)", "file": "webgpu_instance_uniform.html"},
{"category": "webgpu (wip)", "file": "webgpu_interactive.html"},
{"category": "webgpu (wip)", "file": "webgpu_lensflares.html"},
{"category": "webgpu (wip)", "file": "webgpu_lightprobe.html"},
{"category": "webgpu (wip)", "file": "webgpu_lightprobe_cubecamera.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_ies_spotlight.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_physical.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_pointlights.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_projector.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_rectarealight.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_selective.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_spotlight.html"},
{"category": "webgpu (wip)", "file": "webgpu_lights_tiled.html"},
{"category": "webgpu (wip)", "file": "webgpu_lines_fat_raycasting.html"},
{"category": "webgpu (wip)", "file": "webgpu_lines_fat_wireframe.html"},
{"category": "webgpu (wip)", "file": "webgpu_lines_fat.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_anisotropy.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_compressed.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_dispersion.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_iridescence.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_sheen.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_gltf_transmission.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_materialx.html"},
{"category": "webgpu (wip)", "file": "webgpu_loader_texture_ktx2.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_alphahash.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_arrays.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_basic.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_curvature.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_displacementmap.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_envmaps.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_lightmap.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_matcap.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_sss.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_texture_anisotropy.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_texture_canvas.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_texture_partialupdate.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_toon.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_transmission.html"},
{"category": "webgpu (wip)", "file": "webgpu_materials_video.html"},
{"category": "webgpu (wip)", "file": "webgpu_mesh_batch.html"},
{"category": "webgpu (wip)", "file": "webgpu_mirror.html"},
{"category": "webgpu (wip)", "file": "webgpu_modifier_curve.html"},
{"category": "webgpu (wip)", "file": "webgpu_morphtargets.html"},
{"category": "webgpu (wip)", "file": "webgpu_morphtargets_face.html"},
{"category": "webgpu (wip)", "file": "webgpu_mrt.html"},
{"category": "webgpu (wip)", "file": "webgpu_multiple_canvas.html"},
{"category": "webgpu (wip)", "file": "webgpu_multiple_elements.html"},
{"category": "webgpu (wip)", "file": "webgpu_mrt_mask.html"},
{"category": "webgpu (wip)", "file": "webgpu_multiple_rendertargets.html"},
{"category": "webgpu (wip)", "file": "webgpu_multiple_rendertargets_readback.html"},
{"category": "webgpu (wip)", "file": "webgpu_multisampled_renderbuffers.html"},
{"category": "webgpu (wip)", "file": "webgpu_occlusion.html"},
{"category": "webgpu (wip)", "file": "webgpu_ocean.html"},
{"category": "webgpu (wip)", "file": "webgpu_parallax_uv.html"},
{"category": "webgpu (wip)", "file": "webgpu_particles.html"},
{"category": "webgpu (wip)", "file": "webgpu_performance.html"},
{"category": "webgpu (wip)", "file": "webgpu_performance_renderbundle.html"},
{"category": "webgpu (wip)", "file": "webgpu_pmrem_cubemap.html"},
{"category": "webgpu (wip)", "file": "webgpu_pmrem_equirectangular.html"},
{"category": "webgpu (wip)", "file": "webgpu_pmrem_scene.html"},
{"category": "webgpu (wip)", "file": "webgpu_pmrem_test.html"},
{"category": "webgpu (wip)", "file": "webgpu_portal.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_3dlut.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_afterimage.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_anamorphic.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_ao.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_bloom.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_bloom_emissive.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_bloom_selective.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_dof.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_fxaa.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_motion_blur.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_outline.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_smaa.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_sobel.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_ssr.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_sss.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_traa.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing_transition.html"},
{"category": "webgpu (wip)", "file": "webgpu_postprocessing.html"},
{"category": "webgpu (wip)", "file": "webgpu_procedural_texture.html"},
{"category": "webgpu (wip)", "file": "webgpu_reflection.html"},
{"category": "webgpu (wip)", "file": "webgpu_reflection_blurred.html"},
{"category": "webgpu (wip)", "file": "webgpu_reflection_roughness.html"},
{"category": "webgpu (wip)", "file": "webgpu_refraction.html"},
{"category": "webgpu (wip)", "file": "webgpu_rendertarget_2d-array_3d.html"},
{"category": "webgpu (wip)", "file": "webgpu_rtt.html"},
{"category": "webgpu (wip)", "file": "webgpu_sandbox.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadertoy.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadow_contact.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_array.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_csm.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_opacity.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_pointlight.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_progressive.html"},
{"category": "webgpu (wip)", "file": "webgpu_shadowmap_vsm.html"},
{"category": "webgpu (wip)", "file": "webgpu_skinning.html"},
{"category": "webgpu (wip)", "file": "webgpu_skinning_instancing.html"},
{"category": "webgpu (wip)", "file": "webgpu_skinning_points.html"},
{"category": "webgpu (wip)", "file": "webgpu_sky.html"},
{"category": "webgpu (wip)", "file": "webgpu_sprites.html"},
{"category": "webgpu (wip)", "file": "webgpu_storage_buffer.html"},
{"category": "webgpu (wip)", "file": "webgpu_texturegrad.html"},
{"category": "webgpu (wip)", "file": "webgpu_textures_2d-array.html"},
{"category": "webgpu (wip)", "file": "webgpu_textures_3d.html"},
{"category": "webgpu (wip)", "file": "webgpu_textures_anisotropy.html"},
{"category": "webgpu (wip)", "file": "webgpu_textures_partialupdate.html"},
{"category": "webgpu (wip)", "file": "webgpu_tonemapping.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_angular_slicing.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_coffee_smoke.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_compute_attractors_particles.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_earth.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_editor.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_galaxy.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_halftone.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_interoperability.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_procedural_terrain.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_raging_sea.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_transpiler.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_vfx_flames.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_vfx_linkedparticles.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_vfx_tornado.html"},
{"category": "webgpu (wip)", "file": "webgpu_tsl_wood.html"},
{"category": "webgpu (wip)", "file": "webgpu_video_frame.html"},
{"category": "webgpu (wip)", "file": "webgpu_video_panorama.html"},
{"category": "webgpu (wip)", "file": "webgpu_volume_caustics.html"},
{"category": "webgpu (wip)", "file": "webgpu_volume_cloud.html"},
{"category": "webgpu (wip)", "file": "webgpu_volume_lighting.html"},
{"category": "webgpu (wip)", "file": "webgpu_volume_lighting_rectarea.html"},
{"category": "webgpu (wip)", "file": "webgpu_volume_perlin.html"},
{"category": "webgpu (wip)", "file": "webgpu_water.html"},
{"category": "webgpu (wip)", "file": "webgpu_xr_rollercoaster.html"},
{"category": "webgpu (wip)", "file": "webgpu_xr_cubes.html"},
{"category": "webgpu (wip)", "file": "webgpu_xr_native_layers.html"},
# webaudio category (4 examples)
{"category": "webaudio", "file": "webaudio_orientation.html"},
{"category": "webaudio", "file": "webaudio_sandbox.html"},
{"category": "webaudio", "file": "webaudio_timing.html"},
{"category": "webaudio", "file": "webaudio_visualizer.html"},
# webxr category (26 examples)
{"category": "webxr", "file": "webxr_ar_camera_assisted.html"},
{"category": "webxr", "file": "webxr_ar_cones.html"},
{"category": "webxr", "file": "webxr_ar_hittest.html"},
{"category": "webxr", "file": "webxr_ar_lighting.html"},
{"category": "webxr", "file": "webxr_ar_plane_detection.html"},
{"category": "webxr", "file": "webxr_vr_handinput.html"},
{"category": "webxr", "file": "webxr_vr_handinput_cubes.html"},
{"category": "webxr", "file": "webxr_vr_handinput_pointerclick.html"},
{"category": "webxr", "file": "webxr_vr_handinput_pointerdrag.html"},
{"category": "webxr", "file": "webxr_vr_handinput_pressbutton.html"},
{"category": "webxr", "file": "webxr_vr_handinput_profiles.html"},
{"category": "webxr", "file": "webxr_vr_layers.html"},
{"category": "webxr", "file": "webxr_vr_panorama.html"},
{"category": "webxr", "file": "webxr_vr_rollercoaster.html"},
{"category": "webxr", "file": "webxr_vr_sandbox.html"},
{"category": "webxr", "file": "webxr_vr_teleport.html"},
{"category": "webxr", "file": "webxr_vr_video.html"},
{"category": "webxr", "file": "webxr_xr_ballshooter.html"},
{"category": "webxr", "file": "webxr_xr_controls_transform.html"},
{"category": "webxr", "file": "webxr_xr_cubes.html"},
{"category": "webxr", "file": "webxr_xr_dragging.html"},
{"category": "webxr", "file": "webxr_xr_dragging_custom_depth.html"},
{"category": "webxr", "file": "webxr_xr_haptics.html"},
{"category": "webxr", "file": "webxr_xr_paint.html"},
{"category": "webxr", "file": "webxr_xr_sculpt.html"},
# games category (1 example)
{"category": "games", "file": "games_fps.html"},
# physics category (13 examples)
{"category": "physics", "file": "physics_ammo_break.html"},
{"category": "physics", "file": "physics_ammo_cloth.html"},
{"category": "physics", "file": "physics_ammo_instancing.html"},
{"category": "physics", "file": "physics_ammo_rope.html"},
{"category": "physics", "file": "physics_ammo_terrain.html"},
{"category": "physics", "file": "physics_ammo_volume.html"},
{"category": "physics", "file": "physics_jolt_instancing.html"},
{"category": "physics", "file": "physics_rapier_basic.html"},
{"category": "physics", "file": "physics_rapier_instancing.html"},
{"category": "physics", "file": "physics_rapier_joints.html"},
{"category": "physics", "file": "physics_rapier_character_controller.html"},
{"category": "physics", "file": "physics_rapier_vehicle_controller.html"},
{"category": "physics", "file": "physics_rapier_terrain.html"},
# misc category (20 examples)
{"category": "misc", "file": "misc_animation_groups.html"},
{"category": "misc", "file": "misc_animation_keys.html"},
{"category": "misc", "file": "misc_boxselection.html"},
{"category": "misc", "file": "misc_controls_arcball.html"},
{"category": "misc", "file": "misc_controls_drag.html"},
{"category": "misc", "file": "misc_controls_fly.html"},
{"category": "misc", "file": "misc_controls_map.html"},
{"category": "misc", "file": "misc_controls_orbit.html"},
{"category": "misc", "file": "misc_controls_pointerlock.html"},
{"category": "misc", "file": "misc_controls_trackball.html"},
{"category": "misc", "file": "misc_controls_transform.html"},
{"category": "misc", "file": "misc_exporter_draco.html"},
{"category": "misc", "file": "misc_exporter_gltf.html"},
{"category": "misc", "file": "misc_exporter_obj.html"},
{"category": "misc", "file": "misc_exporter_ply.html"},
{"category": "misc", "file": "misc_exporter_stl.html"},
{"category": "misc", "file": "misc_exporter_usdz.html"},
{"category": "misc", "file": "misc_exporter_exr.html"},
{"category": "misc", "file": "misc_exporter_ktx2.html"},
{"category": "misc", "file": "misc_raycaster_helper.html"},
# css2d category (1 example)
{"category": "css2d", "file": "css2d_label.html"},
# css3d category (6 examples)
{"category": "css3d", "file": "css3d_molecules.html"},
{"category": "css3d", "file": "css3d_orthographic.html"},
{"category": "css3d", "file": "css3d_periodictable.html"},
{"category": "css3d", "file": "css3d_sandbox.html"},
{"category": "css3d", "file": "css3d_sprites.html"},
{"category": "css3d", "file": "css3d_youtube.html"},
# svg category (2 examples)
{"category": "svg", "file": "svg_lines.html"},
{"category": "svg", "file": "svg_sandbox.html"},
# tests category (2 examples)
{"category": "tests", "file": "webgl_furnace_test.html"},
{"category": "tests", "file": "misc_uv_tests.html"},
]
def extract_keywords_from_file(filename):
"""Extract keywords from filename"""
base = filename.replace('.html', '')
parts = base.split('_')
return ', '.join([p for p in parts if len(p) > 1])
def extract_name_from_file(filename):
"""Extract display name from filename"""
base = filename.replace('.html', '')
parts = base.split('_')[1:] # Remove prefix like 'webgl'
return ' / '.join(parts)
def generate_tracking_csv():
"""Generate tracking CSV with all 556 examples"""
tracking_file = SKILL_DIR / "extraction-progress.csv"
rows = []
for i, ex in enumerate(ALL_EXAMPLES, 1):
rows.append({
'ID': i,
'Category': ex['category'],
'Name': extract_name_from_file(ex['file']),
'File': ex['file'],
'URL': f"https://threejs.org/examples/{ex['file']}",
'Keywords': extract_keywords_from_file(ex['file']),
'Status': 'pending',
'Extracted_At': ''
})
with open(tracking_file, 'w', newline='', encoding='utf-8') as f:
writer = csv.DictWriter(f, fieldnames=['ID', 'Category', 'Name', 'File', 'URL', 'Keywords', 'Status', 'Extracted_At'])
writer.writeheader()
writer.writerows(rows)
print(f"Generated {len(rows)} entries in {tracking_file}")
return rows
def generate_examples_csv():
"""Generate examples-all.csv with all 556 examples"""
examples_file = DATA_DIR / "examples-all.csv"
DATA_DIR.mkdir(exist_ok=True)
rows = []
for i, ex in enumerate(ALL_EXAMPLES, 1):
name = extract_name_from_file(ex['file'])
keywords = extract_keywords_from_file(ex['file'])
# Determine complexity based on category
complexity = "medium"
if "advanced" in ex['category'] or "gpgpu" in ex['file'] or "compute" in ex['file']:
complexity = "high"
elif "basic" in ex['file'] or ex['category'] in ['css2d', 'css3d', 'svg']:
complexity = "low"
# Generate use cases based on keywords
use_cases = []
file_lower = ex['file'].lower()
if 'animation' in file_lower:
use_cases.append('character animation')
if 'loader' in file_lower:
use_cases.append('model loading')
if 'material' in file_lower:
use_cases.append('material effects')
if 'postprocessing' in file_lower:
use_cases.append('visual effects')
if 'shadow' in file_lower:
use_cases.append('realistic lighting')
if 'physics' in file_lower:
use_cases.append('physics simulation')
if 'xr' in file_lower or 'vr' in file_lower or 'ar' in file_lower:
use_cases.append('VR/AR experience')
if 'interactive' in file_lower or 'raycaster' in file_lower:
use_cases.append('user interaction')
if 'particle' in file_lower or 'points' in file_lower:
use_cases.append('particle effects')
if 'terrain' in file_lower or 'geometry' in file_lower:
use_cases.append('procedural generation')
if not use_cases:
use_cases.append('3D visualization')
# Generate description
desc = f"Three.js {ex['category']} example demonstrating {name.replace(' / ', ', ')}"
rows.append({
'ID': i,
'Category': ex['category'],
'Name': name,
'File': ex['file'],
'URL': f"https://threejs.org/examples/{ex['file']}",
'Keywords': keywords,
'Complexity': complexity,
'Use Cases': '; '.join(use_cases),
'Description': desc
})
with open(examples_file, 'w', newline='', encoding='utf-8') as f:
writer = csv.DictWriter(f, fieldnames=['ID', 'Category', 'Name', 'File', 'URL', 'Keywords', 'Complexity', 'Use Cases', 'Description'])
writer.writeheader()
writer.writerows(rows)
print(f"Generated {len(rows)} entries in {examples_file}")
return rows
if __name__ == "__main__":
print("Generating Three.js skill data files...")
print(f"Total examples: {len(ALL_EXAMPLES)}")
# Count by category
categories = {}
for ex in ALL_EXAMPLES:
cat = ex['category']
categories[cat] = categories.get(cat, 0) + 1
print("\nExamples by category:")
for cat, count in sorted(categories.items(), key=lambda x: -x[1]):
print(f" {cat}: {count}")
print("\nGenerating files...")
generate_tracking_csv()
generate_examples_csv()
print("\nDone!")

135
.opencode/skills/threejs/scripts/generate_csv_from_json.py Normal file
View File

@@ -0,0 +1,135 @@
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Generate CSV files from examples-raw.json
"""
import csv
import json
from pathlib import Path
DATA_DIR = Path(__file__).parent.parent / "data"
SKILL_DIR = Path(__file__).parent.parent
def extract_keywords_from_file(filename):
"""Extract keywords from filename"""
base = filename.replace('.html', '')
parts = base.split('_')
return ', '.join([p for p in parts if len(p) > 1])
def extract_name_from_file(filename):
"""Extract display name from filename"""
base = filename.replace('.html', '')
parts = base.split('_')[1:] # Remove prefix like 'webgl'
return ' / '.join(parts)
def generate_csvs():
"""Generate tracking and examples CSVs from JSON"""
json_file = DATA_DIR / "examples-raw.json"
with open(json_file, 'r', encoding='utf-8') as f:
examples = json.load(f)
print(f"Loaded {len(examples)} examples from JSON")
# Count by category
categories = {}
for ex in examples:
cat = ex['c']
categories[cat] = categories.get(cat, 0) + 1
print("\nExamples by category:")
for cat, count in sorted(categories.items(), key=lambda x: -x[1]):
print(f" {cat}: {count}")
# Generate tracking CSV
tracking_file = SKILL_DIR / "extraction-progress.csv"
tracking_rows = []
for i, ex in enumerate(examples, 1):
tracking_rows.append({
'ID': i,
'Category': ex['c'],
'Name': extract_name_from_file(ex['f']),
'File': ex['f'],
'URL': f"https://threejs.org/examples/{ex['f']}",
'Keywords': extract_keywords_from_file(ex['f']),
'Status': 'extracted',
'Extracted_At': '2026-01-21'
})
with open(tracking_file, 'w', newline='', encoding='utf-8') as f:
writer = csv.DictWriter(f, fieldnames=['ID', 'Category', 'Name', 'File', 'URL', 'Keywords', 'Status', 'Extracted_At'])
writer.writeheader()
writer.writerows(tracking_rows)
print(f"\nGenerated {len(tracking_rows)} entries in {tracking_file}")
# Generate examples-all.csv
examples_file = DATA_DIR / "examples-all.csv"
examples_rows = []
for i, ex in enumerate(examples, 1):
name = extract_name_from_file(ex['f'])
keywords = extract_keywords_from_file(ex['f'])
# Determine complexity based on category
complexity = "medium"
if "advanced" in ex['c'] or "gpgpu" in ex['f'] or "compute" in ex['f']:
complexity = "high"
elif "basic" in ex['f'] or ex['c'] in ['css2d', 'css3d', 'svg']:
complexity = "low"
# Generate use cases based on keywords
use_cases = []
file_lower = ex['f'].lower()
if 'animation' in file_lower:
use_cases.append('character animation')
if 'loader' in file_lower:
use_cases.append('model loading')
if 'material' in file_lower:
use_cases.append('material effects')
if 'postprocessing' in file_lower:
use_cases.append('visual effects')
if 'shadow' in file_lower:
use_cases.append('realistic lighting')
if 'physics' in file_lower:
use_cases.append('physics simulation')
if 'xr' in file_lower or 'vr' in file_lower or 'ar' in file_lower:
use_cases.append('VR/AR experience')
if 'interactive' in file_lower or 'raycaster' in file_lower:
use_cases.append('user interaction')
if 'particle' in file_lower or 'points' in file_lower:
use_cases.append('particle effects')
if 'terrain' in file_lower or 'geometry' in file_lower:
use_cases.append('procedural generation')
if 'tsl' in file_lower:
use_cases.append('shader programming')
if 'compute' in file_lower:
use_cases.append('GPU compute')
if not use_cases:
use_cases.append('3D visualization')
desc = f"Three.js {ex['c']} example demonstrating {name.replace(' / ', ', ')}"
examples_rows.append({
'ID': i,
'Category': ex['c'],
'Name': name,
'File': ex['f'],
'URL': f"https://threejs.org/examples/{ex['f']}",
'Keywords': keywords,
'Complexity': complexity,
'Use Cases': '; '.join(use_cases),
'Description': desc
})
with open(examples_file, 'w', newline='', encoding='utf-8') as f:
writer = csv.DictWriter(f, fieldnames=['ID', 'Category', 'Name', 'File', 'URL', 'Keywords', 'Complexity', 'Use Cases', 'Description'])
writer.writeheader()
writer.writerows(examples_rows)
print(f"Generated {len(examples_rows)} entries in {examples_file}")
if __name__ == "__main__":
generate_csvs()

77
.opencode/skills/threejs/scripts/search.py Normal file
View File

@@ -0,0 +1,77 @@
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Three.js Skill Search - CLI for searching Three.js examples and API
Usage: python search.py "<query>" [--domain <domain>] [--max-results 5]
python search.py "<query>" --use-case
python search.py --category <category>
python search.py --complexity <low|medium|high>
Domains: examples, categories, use-cases, api
"""
import argparse
import json
from core import (
CSV_CONFIG, MAX_RESULTS, search,
search_by_complexity, search_by_category, get_recommended_examples
)
def format_output(result):
"""Format results for Claude consumption (token-optimized)"""
if "error" in result:
return f"Error: {result['error']}"
output = []
output.append(f"## Three.js Search Results")
output.append(f"**Domain:** {result['domain']} | **Query:** {result.get('query', result.get('category', result.get('complexity', 'N/A')))}")
output.append(f"**Found:** {result['count']} results\n")
for i, row in enumerate(result['results'], 1):
output.append(f"### Result {i}")
for key, value in row.items():
value_str = str(value)
if len(value_str) > 300:
value_str = value_str[:300] + "..."
output.append(f"- **{key}:** {value_str}")
output.append("")
return "\n".join(output)
def main():
parser = argparse.ArgumentParser(description="Three.js Skill Search")
parser.add_argument("query", nargs="?", help="Search query")
parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 5)")
parser.add_argument("--json", action="store_true", help="Output as JSON")
# Special search modes
parser.add_argument("--use-case", "-u", action="store_true", help="Get recommended examples for use case")
parser.add_argument("--category", "-c", type=str, help="Filter by category")
parser.add_argument("--complexity", "-x", choices=["low", "medium", "high"], help="Filter by complexity")
args = parser.parse_args()
# Handle special search modes
if args.complexity:
result = search_by_complexity(args.complexity, args.max_results)
elif args.category:
result = search_by_category(args.category, args.max_results)
elif args.use_case and args.query:
result = get_recommended_examples(args.query, args.max_results)
elif args.query:
result = search(args.query, args.domain, args.max_results)
else:
parser.print_help()
return
if args.json:
print(json.dumps(result, indent=2, ensure_ascii=False))
else:
print(format_output(result))
if __name__ == "__main__":
main()