threejs

SKILL.md

High-performance 3D web applications with Three.js WebGL/WebGPU rendering.

Covers scene setup, geometries, materials (PBR, standard, custom shaders), lights, cameras, and animation systems

Supports asset loading (GLTF, FBX, OBJ), textures, post-processing effects (bloom, SSAO, SSR), and raycasting for interaction

Includes performance optimization techniques: instancing, LOD, batching, frustum culling, and WebGPU backend support

Enables specialized workflows: physics simulations, VR/XR experiences, shader graphs (TSL), and spatial audio integration

Three.js Development

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.

When to Use This Skill

Use when working with:

3D scenes, models, animations, or visualizations

WebGL/WebGPU rendering and graphics programming

Interactive 3D experiences (games, configurators, data viz)

Camera controls, lighting, materials, or shaders

Loading 3D assets (GLTF, FBX, OBJ) or textures

Post-processing effects (bloom, depth of field, SSAO)

Physics simulations, VR/XR experiences, or spatial audio

Performance optimization (instancing, LOD, frustum culling)

Progressive Learning Path