skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

r3f-materials

Implements PBR, Drei, and custom shader materials for React Three Fiber meshes.

1|Updated Aug 20, 2023
Search Tags:#shaders#webgl#three.js#react-three-fiber#3d#materials#pbr
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-materials-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-materials
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-materials
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-materials-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three.

What problem does it solve? Choosing and configuring the right material in React Three Fiber is confusing because Three.js exposes many material types with different lighting models, texture slots, and performance trade-offs. This Skill provides ready-to-use patterns for every common material scenario. ## Core Features & Use Cases - PBR Materials: Configure meshStandardMaterial and meshPhysicalMaterial with roughness, metalness, normal maps, clearcoat, transmission, sheen, and iridescence for realistic surfaces like glass, car paint, and fabric. - Drei Special Materials: Use MeshReflectorMaterial, MeshWobbleMaterial, MeshDistortMaterial, MeshTransmissionMaterial, and MeshDiscardMaterial for reflections, animated distortion, refraction, and shadow-only meshes. - Dynamic & Shared Materials: Animate material properties with useFrame, share material instances across meshes, apply per-face materials, and build custom GLSL shader materials. - Use Case: Build a product configurator where a 3D model needs a glass body, metallic trim, and an emissive glowing logo, all with proper environment maps and bloom-ready emissive intensity. ## Quick Start Ask the AI to create a React Three Fiber scene with a realistic glass sphere using meshPhysicalMaterial with transmission and an environment map.

Frequently Asked Questions about r3f-materials

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a glass material in React Three Fiber?▼

Use meshPhysicalMaterial with transmission set to 1, roughness 0, thickness around 0.5, and ior 1.5. For higher quality refraction, use Drei's MeshTransmissionMaterial with samples, chromaticAberration, and backside rendering enabled.

What is the difference between meshStandardMaterial and meshPhysicalMaterial?▼

meshStandardMaterial provides core PBR properties like roughness, metalness, and normal maps. meshPhysicalMaterial extends it with clearcoat, transmission, sheen, and iridescence for effects like car paint, glass, fabric, and soap bubbles.

How do I make a material glow for bloom effects in Three.js?▼

Set emissive to your glow color, raise emissiveIntensity above 1, and set toneMapped to false so the color can exceed the normal range. This lets a bloom postprocessing pass detect and blur the bright areas.

Does React Three Fiber support custom GLSL shader materials?▼

Yes. Use Drei's shaderMaterial helper to define uniforms and vertex/fragment shaders, register it with extend from @react-three/fiber, then update uniforms like time through a ref inside useFrame.

Why is my transparent material rendering slowly or incorrectly?▼

Transparent materials require depth sorting and are slower to render. Prefer alphaTest over transparent when possible, reuse material instances to batch draw calls, and choose simpler materials like meshBasicMaterial when lighting is unnecessary.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Community
Intermediate
JIsaiahJIsaiah
3

r3f-postprocessing

Integrate post-processing effects into React Three Fiber with @react-three/postprocessing.

Community
Intermediate
mooch10mooch10
1

threejs-textures

Configure and apply Three.js textures including UV mapping, environment maps, and render targets.

Community
Intermediate
huangzidahuangzida
2

threejs-shaders

Create and integrate custom GLSL shaders into Three.js scenes.

Community
Advanced