# r3f-materials

Guides the agent in configuring PBR and transparency in React Three Fiber. Prevents texture color space mistakes and unnecessary GPU overhead.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1900 installs · ★ 130
- Author: EnzeD
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/EnzeD/r3f-skills/tree/HEAD/skills/r3f-materials/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/r3f-materials

## What it does

The skill outlines guidelines for choosing surface materials in React Three Fiber. It steers the assistant toward the simplest viable option, favoring `meshStandardMaterial` or unlit `meshBasicMaterial` before jumping to costly physical shaders. Color management rules are strict: sRGB for color maps, alongside `NoColorSpace` for roughness and normal data.

Specific guidance covers transparency and glass rendering. Using `alphaTest` is recommended for cutouts to prevent alpha blending sort bugs. For realistic transmission, it details how Drei helpers like `MeshTransmissionMaterial` add extra scene passes and require low initial sample counts.

The examples target Fiber 9 and React 19 under WebGL. Drei shader materials will break if ported directly to WebGPU without switching to TSL. Disposing of a material in Three.js also leaves attached textures in GPU memory unless they are released separately.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/r3f-materials/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/r3f-materials/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-materials -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/r3f-materials/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-materials -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/r3f-materials/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install EnzeD/r3f-skills r3f-materials
```

2. **Manually: put the files in place**
- File: `.github/skills/r3f-materials/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-materials -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-materials
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/r3f-materials/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-materials -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/EnzeD/r3f-skills/tree/HEAD/skills/r3f-materials/SKILL.md

## When to use it
- select the least expensive Three.js material for a mesh
- configure cutout transparency with `alphaTest` to avoid depth sorting bugs
- assign correct color spaces to albedo and roughness textures
- optimize glass transmission passes to keep GPU draw calls down

## Example prompts
- Configure a realistic rough gold material using meshStandardMaterial and environment lighting.
- Set up glass transmission in Drei without hurting render performance.
- Fix the texture color space setup on this imported model.

## Similar
- [threejs-r3f](https://affpapa.org/en/nevibecode/skills/threejs-r3f.md) — skill · 1000 installs
- [threejs-materials-lighting](https://affpapa.org/en/nevibecode/skills/threejs-materials-lighting.md) — skill · 5500 installs
- [threejs-materials](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-materials.md) — skill · 1000 installs
- [react-three-fiber](https://affpapa.org/en/nevibecode/skills/react-three-fiber.md) — skill · 3800 installs
- [threejs-animation](https://affpapa.org/en/nevibecode/skills/iart-ai-threejs-animation.md) — skill · 1400 installs
- [threejs-react-three-fiber](https://affpapa.org/en/nevibecode/skills/threejs-react-three-fiber.md) — skill · 1300 installs

From the same set: [enzed/r3f-skills](https://affpapa.org/en/nevibecode/by/enzed/r3f-skills.md) — 9 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md