# 3d Metal Material

Build hyperrealistic PBR metal in Three.js: steel, brass, gold, copper and iron as true...

- Repository: https://github.com/MengTo/Skills (7170 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add MengTo/Skills --skill 3d-metal-material -g -a claude-code -y`
Codex: `npx skills add MengTo/Skills --skill 3d-metal-material -g -a codex -y`
Cursor: `npx skills add MengTo/Skills --skill 3d-metal-material -g -a cursor -y`
Gemini CLI: `npx skills add MengTo/Skills --skill 3d-metal-material -g -a gemini-cli -y`

## Description

Build hyperrealistic PBR metal in Three.js: steel, brass, gold, copper and iron as true conductors (metalness 1, measured F0 tint, no albedo) with roughness-varied finishes (polished, brushed anisotropic, aged with patina and worn edges) lit by a dark HDR studio of real bright window cards prefiltered with PMREM. Use when metal looks like grey plastic, a dull blur, or a black hole; when blades, tools, rings, ingots, hardware or product metal need reflections with edges and structure; or when a finish needs scratches, streaks, fingerprints and bevels that catch light.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 3D Metal Material

**Mechanism:** a conductor has no colour of its own, so it looks like metal only when a dark environment holds a few very bright, hard-edged things to reflect, and the surface then bends those reflections with roughness that varies across it. Remove the bright cards and the same steel goes flat grey; remove the roughness variation and it goes CG-clean.

Boundary. This skill is the material and the environment it reads. Reach for `3d-specular-rim-glow` when the job is one bright edge catch and halo on a product, `3d-high-resolution-textures` when you ship authored PBR texture sets and need texel density and mip budgets, `3d-ultra-realistic-water` for water. Siblings `3d-wood-material`, `3d-cloth-material` and `3d-paper-material` cover the non-metal surfaces that usually sit next to metal; use them for the bench, handle or wrapping. The demo has a bench and a chisel handle only as staging.

Verified stack of the demo: Three.js r169 (`three@0.169.0`), WebGL 2, GLSL patched into `MeshStandardMaterial`/`MeshPhysicalMaterial` with `onBeforeCompile`, `PMREMGenerator`, a HalfFloat MSAA target and a hand-written ACES pass. No post-processing library.

## Build order

Do these in order; each one fixes a named failure the previous step cannot.

1. **Conductor, not painted.** `metalness: 1`, `color` = the metal's F0 (linear reflectance at normal incidence), nothing else in `color`. A bright base colour turns lit faces into white paint, and metalness < 1 lets a diffuse term leak in as plastic.
2. **A dark room with bright cards.** Build the environment as a real `Scene` of `MeshBasicMaterial` planes with `toneMapped:false` and HDR radiance above 1, on a near-black background, then `PMREMGenerator.fromScene`. A bright uniform sky makes every reflection the same mean tone, and raising `envMapIntensity` only lifts that mean. A canvas equirect capped at display white cannot make a window brighter than the paper. Cards used in the demo:

The rest: https://github.com/MengTo/Skills/blob/HEAD/agent-skills/3d/3d-metal-material/SKILL.md