Skip to content
Get packs

3D Metal Material

Makes Three.js metal look like real steel, brass, gold or copper with convincing reflections

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When this skill is installed, the agent knows how to build realistic metal surfaces in 3D web scenes using Three.js. It sets up metals as true conductors with the correct tint, lights them with a dark studio of bright window-like panels, and varies roughness across the surface so scratches, brushed grain, patina and worn edges catch light the way real metal does. It also includes a demo page showing the technique.

Great for

  • Web developers building product viewers or 3D configurators who want metal that does not look like grey plastic
  • Designers prototyping knives, tools, jewellery or hardware in the browser
  • Developers who already use Three.js and want guidance on PBR material settings and environment lighting

Skip it if

  • Projects that do not use Three.js or WebGL, since the code and settings are specific to that stack (the knowledge is still readable but needs adapting)
  • Simple one-off images or video work where a 3D rendering tool would be easier than writing shader-level code

Try asking

  • “Make this steel blade look polished and realistic in my Three.js scene with reflections and a bevelled edge”
  • “Give this product model a brushed brass finish with anisotropic highlights”
  • “Create an aged copper material with verdigris and worn edges for my 3D ingot viewer”
  • “My metal looks like grey plastic in Three.js, how do I fix the environment lighting?”
Step-by-step guide: how to use 3D Metal MaterialInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    3d-metal-material.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-metal-material.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-metal-material.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the metal and finish you want (for example polished steel or aged copper) so the agent picks the right F0 colour and roughness settings
  • Share your current Three.js setup or environment code so the agent can point to the specific line causing flat or black reflections
  • Open demo.html first to see the intended look before applying the settings to your own project

What's inside

  • agents/openai.yaml
  • demo.html
  • PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.