threejs▌

Transform reference images into procedural Three.js models.

Provides 3D web graphics expertise specializing in Three.js, React Three Fiber (R3F), and custom GLSL shader development. Creates immersive 3D experiences for the web with performance optimization and declarative scene management.

Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.

Three.js is the industry-standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations.

Custom GLSL shaders for Three.js with ShaderMaterial, uniforms, varyings, and built-in material extension. \n \n Covers ShaderMaterial vs. RawShaderMaterial, uniform types (floats, vectors, matrices, textures, arrays), and real-time uniform updates in animation loops \n Includes six common shader patterns: texture sampling, vertex displacement, Fresnel effects, noise-based effects, rim lighting, and dissolve effects \n Supports material extension via onBeforeCompile to inject custom code into bu

Nine material types covering unlit, PBR, custom shaders, and specialized rendering effects. \n \n Includes basic, Lambert, Phong, and standard PBR materials with varying lighting complexity; MeshPhysicalMaterial adds advanced features like clearcoat, transmission, and iridescence for glass, car paint, and fabric effects \n ShaderMaterial and RawShaderMaterial enable custom GLSL shaders with automatic or manual uniform/attribute management \n Specialized materials for toon shading, normal debuggi

Built-in and custom 3D geometry creation with BufferGeometry, instancing, and path-based shapes. \n \n Includes 15+ built-in geometries: basic shapes (box, sphere, plane, cylinder, cone, torus), polyhedra (dodecahedron, icosahedron), and path-based forms (lathe, extrude, tube, text) \n Custom BufferGeometry with typed arrays for vertices, indices, normals, UVs, and per-vertex colors; supports interleaved buffers for memory efficiency \n InstancedMesh for rendering thousands of identical objects

Asset loading for 3D models, textures, HDR environments, and progress tracking in Three.js. \n \n Supports multiple formats: GLTF/GLB (primary), OBJ+MTL, FBX, STL, PLY, and HDR/EXR environment maps with optional DRACO geometry and KTX2 texture compression \n LoadingManager coordinates multiple loaders with progress callbacks, onLoad/onError handlers, and unified asset tracking across the scene \n Texture configuration covers wrapping modes, filtering, anisotropic sharpening, color space manageme

Keyframe, skeletal, and morph target animation system for Three.js objects and models. \n \n Supports four animation track types: number, vector, quaternion, and color keyframes with linear, smooth, and discrete interpolation modes \n AnimationMixer plays clips on objects with full playback control: play, stop, pause, speed adjustment, weight-based blending, and fade in/out transitions \n Skeletal animation via bone manipulation, bone attachments, and GLTF model loading with automatic clip disco

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.