r3f-materials
r3f-materials equips you with practical knowledge of Three.js material systems within React Three Fiber workflows. Discover how to select, configure, and optimize materials for different rendering scenarios, from basic geometries to complex shader-driven effects.
r3f-materials teaches that MeshBasicMaterial renders unlit geometry with flat colors, ideal for simple UI or non-photorealistic styles. MeshStandardMaterial implements physically-based rendering (PBR), responding to lights and environment maps for realistic surfaces. Choose MeshBasicMaterial for performance-critical scenes or stylized looks; use MeshStandardMaterial when you need believable material behavior under varied lighting.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/r3f-materials · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/r3f-materials ~/.claude/skills/r3f-materialsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the main differences between MeshBasicMaterial and MeshStandardMaterial in r3f-materials?
r3f-materials teaches that MeshBasicMaterial renders unlit geometry with flat colors, ideal for simple UI or non-photorealistic styles. MeshStandardMaterial implements physically-based rendering (PBR), responding to lights and environment maps for realistic surfaces. Choose MeshBasicMaterial for performance-critical scenes or stylized looks; use MeshStandardMaterial when you need believable material behavior under varied lighting.
How do you create custom shader effects with GLSL and animate uniforms in r3f?
r3f-materials covers writing vertex and fragment shaders in GLSL, then passing them to ShaderMaterial or RawShaderMaterial. Define uniforms (like time, color, or texture) as JavaScript objects, then animate them using useFrame or useEffect. Update uniform values each frame to drive animations—for example, incrementing a time uniform to create wave or distortion effects dynamically.
What does r3f-materials guide recommend for configuring PBR material properties?
r3f-materials emphasizes adjusting metalness (0–1 scale for metal reflectivity), roughness (0–1 for surface smoothness), and map textures (color, normal, roughness, metallic) on MeshStandardMaterial or MeshPhysicalMaterial. For realistic results, set metalness near 1 for metals and 0 for non-metals, roughness between 0.3–0.8 for most surfaces, and pair with environment maps for proper reflections.
How does r3f-materials explain texture loading and application to materials?
r3f-materials shows using useTexture hook to load image files, then assigning them to material map properties (map, normalMap, roughnessMap, metalnessMap). Ensure textures have proper UV coordinates on your geometry. Control texture appearance with repeat, offset, and wrapS/wrapT settings to tile or clamp edges as needed for your design.
What optimization strategies does r3f-materials recommend for material performance?
r3f-materials advises reusing material instances across multiple meshes rather than creating new ones per geometry. Disable unused features (fog, lights, shadows) on materials that don't need them. Use simpler materials like MeshBasicMaterial when photorealism isn't required. Profile shader complexity and reduce uniform updates to only when values actually change.
Can r3f-materials help with cel shading or toon material effects?
r3f-materials covers toon materials through custom shaders or ToneMapping adjustments. Implement cel shading by writing GLSL that quantizes lighting into discrete bands, or use MeshToonMaterial with gradient textures. Combine with outlines (rendered as inverted hull or post-processing) to achieve the classic cartoon look in your React Three Fiber scene.
SKILL.md
rendered from the published skill — quoted content, verbatim
R3F Materials
Materials define surface appearance—color, texture, reflectivity, transparency, and custom shader effects.
Quick Start
// Built-in material
<mesh>
<boxGeometry />
<meshStandardMaterial color="hotpink" metalness={0.8} roughness={0.2} />
</mesh>
// Custom shader
<mesh>
<planeGeometry />
<shaderMaterial
uniforms={{ uTime: { value: 0 } }}
vertexShader={vertexShader}
fragmentShader={fragmentShader}
/>
</mesh>
Built-in Materials
Material Comparison
| Material | Lighting | Use Case | Performance |
|---|---|---|---|
MeshBasicMaterial |
None | UI, unlit, debug | Fastest |
MeshStandardMaterial |
PBR | General 3D | Good |
MeshPhysicalMaterial |
PBR+ | Glass, car paint | Slower |
MeshLambertMaterial |
Diffuse | Matte surfaces | Fast |
MeshPhongMaterial |
Specular | Shiny plastic | Fast |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/r3f-materials/SKILL.md
skills/r3f-materials/_meta.json
skills/r3f-materials/references/shader-templates.md