R3f Materials

This is your reference guide for materials in React Three Fiber, covering everything from basic unlit surfaces to advanced PBR workflows. You get practical examples of meshStandardMaterial and meshPhysicalMaterial for realistic rendering, plus the specialized Drei materials like MeshReflectorMaterial for mirrors, MeshTransmissionMaterial for better glass, and animated options like MeshWobbleMaterial. The skill includes a useful comparison table showing which material needs lighting and when to use each type. Most helpful when you're setting up PBR textures, creating glass or metallic surfaces, or just need to remember which properties control roughness versus metalness. The examples are copy-paste ready with actual property values.

skills.sh installs: 2.1K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-materials --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

import { Environment, Lightformer } from '@react-three/drei'

SKILL.md on GitHub

Details

Repository: github.com/enzed/r3f-skills
Categories: Frontend Development, Go, Design & UI/UX, Game Development
First seen: May 16, 2026

More from enzed/r3f-skills

All 11