r3f-materials
Installation
SKILL.md
React Three Fiber materials
Inspect the installed renderer, Three.js, Fiber, and Drei versions first. Examples use Fiber 9 / React 19 with WebGL. Do not assume Drei shader-based materials work unchanged with WebGPU.
Choose the least complex material that fits
| Need | Starting point | Constraint |
|---|---|---|
| Unlit artwork or UI surface | meshBasicMaterial |
Still participates in output color/tone-mapping policy |
| Ordinary PBR surface | meshStandardMaterial |
Metals especially need an environment or suitable lights |
| Clearcoat, transmission, sheen | meshPhysicalMaterial |
Enable only needed features; more shader work |
| Stylized lighting | meshToonMaterial |
Needs lights; gradient maps need appropriate filtering |
| Normal debugging | meshNormalMaterial |
Useful for geometry/normal inspection |
| Custom shading | ShaderMaterial or node material | Match WebGL/GLSL versus WebGPU/TSL |
PBR surface with environment lighting
Mount below Canvas. This small procedural environment avoids a remote preset dependency.