Guide · Agent skill
How to use the 3D Metal Material agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The 3D Metal Material skill teaches an AI agent to build realistic metal surfaces for web 3D scenes made with Three.js. It is for web developers and designers who want steel, brass, gold or copper that does not look like grey plastic. After following this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what it needs to run.
3D Metal MaterialMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP from the 3D Metal Material page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 3Check your stack. Confirm you use Three.js r169 (three@0.169.0) or a compatible setup in a WebGL 2 capable browser.
- 4Ask for the metal by name. Start the request with $3d-metal-material and describe the metal and finish, such as polished steel or brushed brass.
- 5Describe the object. Say what the object is, such as a blade, ring, ingot or hardware, so the agent adds the right edges and structure.
- 6Run the demo if needed. Serve demo.html from a local web server, such as one from Node.js, to see the technique working.
What the skill makes the agent do
A metal has no colour of its own in a renderer. It looks like metal only when a dark environment contains a few very bright, hard-edged shapes to reflect, and when the roughness of the surface varies across it. The skill tells the agent to set up metals as true conductors (metalness 1, with the metal's measured F0 tint in the colour and no albedo), light them with a dark studio of bright window-like panels built with PMREM, and vary roughness so scratches, brushed grain, patina and worn edges catch light.
The skill covers polished, brushed (anisotropic) and aged finishes for steel, brass, gold and copper. It also includes a demo page that shows the technique, with a bench and a chisel handle used only as staging.
- Conductor setup: metalness 1, F0 tint in linear colour values
- Dark HDR studio of bright cards, prefiltered with PMREM
- Roughness variation: smears, micro-scratches and fine grain
- Chamfered edges so bevels catch highlights
- Tone mapping done last, with ACES and sRGB encode
Install the 3D Metal Material skill
Download the ZIP from the 3D Metal Material page on this site and unzip it. For Claude Code, place the skill folder in ~/.claude/skills/ to make it available everywhere, or in a project's .claude/skills/ folder to limit it to that project.
In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills. The ZIP contains agents/openai.yaml, demo.html, PROMPT.md and SKILL.md.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need to type the skill name every time, but naming it makes the trigger reliable. The skill's description matches requests where metal looks like grey plastic, a dull blur or a black hole, and requests for blades, tools, rings, ingots, hardware or product metal that need edges and structure.
The included PROMPT.md has a minimal prompt you can adapt. It starts with the skill name and asks for the look you want.
- Use $3d-metal-material. Make the steel blade in my Three.js scene look polished, with a reflection of a window.
- My brass hardware looks like grey plastic. Fix the metal in this Three.js scene.
- Add scratches, fingerprints and worn edges to the gold ring in my product viewer.
Use $3d-metal-material. Make the metal in my Three.js scene hyperrealistic: metalness 1 with a measured F0 tint and no albedo, a dark PMREM studio with bright window cards to reflect, roughness that varies across the surface, chamfered edges, and a dark bench so it is grounded.What you need before you start
The skill's code and settings are written for Three.js r169 (three@0.169.0) or a compatible setup, and for a WebGL 2 capable browser. To run the demo you need Node.js or a local web server. The skill does not run scripts and does not use the network.
If your project does not use Three.js or WebGL, the knowledge is still readable but the code and settings will need adapting.
- Three.js r169 (three@0.169.0) or compatible
- WebGL 2 capable browser
- Node.js or a local web server, only if you run the demo
Safety notes: scripts and network
The skill runs no scripts and makes no network requests, according to its listing. It is made of instructions and a demo HTML file. Review demo.html and the skill files as you would any code you download before you run them in your own project.
The skill is released under the MIT licence.
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better metal
Set material.envMap as well as scene.environment. Without it, envMapIntensity can be ignored on recent Three.js versions, and the metal stays grey.
Use the roughness table as a starting point. Rougher finishes need lower envMapIntensity, because a rough surface spreads the same window over more of the object. Keep the bloom threshold high so a single lamp glint does not produce an orange halo.
- Set both material.envMap and scene.environment
- Keep the colour of a conductor to its F0 only
- Chamfer edges by a small amount, roughly 1 to 3 mm at object scale
- Keep the scene dark so the reflections carry the look
What people use it for
- Product viewer where a steel or brass part must show reflections and edges
- Browser configurator for jewellery with polished gold or copper finishes
- Prototype of a knife or tool blade with a polished, reflective edge
- Hardware or ingot scene where aged patina and worn edges add realism
Frequently asked questions
How do I install the 3D Metal Material skill?
Download the ZIP from the 3D Metal Material page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
What does the 3D Metal Material skill require?
It is written for Three.js r169 (three@0.169.0) or a compatible setup, and a WebGL 2 capable browser. Node.js or a local web server is needed only to run the demo.
Is the 3D Metal Material skill free?
The skill is released under the MIT licence, according to its listing. Check the licence file in the download for the full terms.
Does the skill run scripts or use the internet?
According to its listing, it runs no scripts and uses no network. It consists of instructions and a demo page.
Can I use this skill without Three.js?
The skill is specific to Three.js and WebGL, so it is not a good fit for other stacks. The knowledge is still readable, but the code and settings will need adapting.
Why does my metal look like grey plastic?
The skill points to a few common causes: metalness below 1, a bright base colour, a bright uniform environment instead of a dark one with bright cards, uniform roughness, or setting envMapIntensity without also setting material.envMap.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose this skill if you build metal in Three.js and want steel, brass, gold or copper that reads as metal in product viewers, configurators or prototypes. Pick something else if your project does not use Three.js or WebGL, or if a single 3D render or video would be quicker than writing shader-level code.
Download the skill