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
Decision gist · record as of 2026-07-27
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.
Use it when
- r3f-materials covers writing vertex and fragment shaders in GLSL, then passing them to ShaderMaterial or RawShaderMaterial.
- r3f-materials emphasizes adjusting metalness (0–1 scale for metal reflectivity), roughness (0–1 for surface smoothness).
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/r3f-materials · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 3 files
skills/r3f-materials/SKILL.md
skills/r3f-materials/_meta.json
skills/r3f-materials/references/shader-templates.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn how to choose and apply built-in Three.js materials in R3F”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. Access pre-built GLSL code and material definitions to accelerate your 3D graphics pipeline without reinventing visual effects from scratch.
Glsl empowers developers to craft and validate shader code for graphics applications. Whether you're building visual effects, game engines, or interactive renderings, this skill streamlines the shader development workflow with hands-on testing capabilities. Ideal for graphics programmers seeking a focused environment to experiment with GLSL syntax and rendering logic.
This skill teaches you how to craft and deploy custom GLSL shaders within the Three.js graphics library. You'll explore shader fundamentals, material integration, and practical techniques for building sophisticated visual effects that run efficiently in the browser.
This skill teaches you how to construct and assign materials to 3D geometries within the Three.js framework. You'll explore material types, texture mapping, and shader techniques to achieve realistic visual effects in browser-based 3D scenes.
r3f-router intelligently directs Three.js React Fiber workloads to the right specialized skill based on task requirements. This dispatcher streamlines skill selection within MCP environments, ensuring Claude accesses the most relevant instruction sets for each request. Perfect for scaling complex R3F projects across multiple specialized knowledge domains.
postfx-bloom delivers post-processing bloom effects for 3D rendering pipelines. Configure bloom intensity, threshold, and blur radius to create glowing highlights and atmospheric lighting. Ideal for games and interactive visualizations seeking polished visual enhancement.
More skills threejs-materials-lighting (Apache-2.0) · pixijs-custom-rendering (MIT) · godot-shaders (Apache-2.0) · shader-fundamentals (MIT) · r3f-fundamentals (MIT)