---
name: "threejs-pbr-materials-textures"
description: "Author realistic MeshPhysicalMaterial shaders with metallic, roughness, and normal maps."
metadata:
  author: "Mr.doob"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "configure meshphysicalmaterial threejs"
  - "load hdr environment map threejs"
  - "apply normal map threejs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Three.js PBR Physical Materials & Textures

Configures Physically Based Rendering (PBR) in Three.js: KTX2 compressed textures, normal maps, roughness maps, environmental HDR reflections with RGBELoader, and clearcoat layers.

## When to Invoke
Invoke this skill whenever you need to:
- configure meshphysicalmaterial threejs
- load hdr environment map threejs
- apply normal map threejs

## Execution SOP & Rules
1. Set texture.colorSpace = THREE.SRGBColorSpace for diffuse color textures.
2. Keep normal, roughness, and metallic maps in linear color space (THREE.NoColorSpace).
3. Use PMREMGenerator to pre-filter HDR environment textures for fast diffuse and specular lighting.
4. Enable transmission and ior (index of refraction) properties on MeshPhysicalMaterial for frosted glass.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.