PlugWiki

Three.js Materials Skill by cloudai-x: Current three.js Material Code

Gives Claude current three.js r186 knowledge about materials, so the PBR, shader and WebGPU material code it writes uses the right API.

Installs
16.4K
on skills.sh
Stars
3.9K
on GitHub
Updated
Oct 2026
last repo commit

Three.js Materials is a reference that Claude reads when you style meshes or tune material behavior in three.js. It targets three.js r186 and covers material types from MeshBasicMaterial to MeshPhysicalMaterial, shared properties such as blending and stencil, environment maps, and the WebGPU node-material and TSL equivalents.

Its main value is the Common Mistakes list: 19 outdated patterns Claude tends to write, each paired with the r186 fix. It bundles only SKILL.md and no scripts.

Good for

  • Web developers building 3D scenes with three.js or React Three Fiber
  • Anyone whose Claude-written three.js code uses outdated APIs
  • Developers moving from WebGLRenderer to WebGPU and TSL materials

Install threejs-materials

Claude Code

  1. 1

    Copy this prompt.

    Install the threejs-materials skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-materials

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Choosing and configuring three.js materials - unlit, diffuse, specular, PBR, toon, point and line materials - shared properties like blending and stencil, environment response, and the WebGPU node-material and TSL equivalents. Use when styling meshes or tuning material behavior.

Sections in SKILL.md

  1. Quick Start
  2. Material Types Overview
  3. MeshBasicMaterial
  4. MeshLambertMaterial and MeshPhongMaterial
  5. MeshStandardMaterial (PBR)
  6. UV channels: aoMap and lightMap read the channel you pick
  7. MeshPhysicalMaterial (Advanced PBR)
  8. MeshToonMaterial
  9. MeshNormalMaterial and MeshDepthMaterial
  10. PointsMaterial
  11. LineBasicMaterial and LineDashedMaterial
  12. ShaderMaterial (WebGLRenderer only)
  13. RawShaderMaterial (WebGLRenderer only)
  14. Common Properties
  15. Multiple Materials per Mesh
  16. Environment Maps

Key facts

Author
cloudai-x
License
MIT
Installs on skills.sh
16,392 (Nov 2, 2026)
GitHub stars
3,903 for the whole cloudai-x/threejs-skills repo (Nov 2, 2026)
Last commit
Oct 19, 2026
What is inside
1 file: SKILL.md. No scripts or other files.
Targets
three.js r186 (three@0.186)

What it includes

  • Table of 11 rows covering 12 material classes, with the lighting model of each

    Basic, Lambert, Phong, Standard, Physical, Toon, Matcap, Shadow, Points, Line, Shader and RawShader materials, with when to use each.

    Try: “Make this mesh look like brushed metal with a clearcoat.”

    Material types overview

  • Basic, Lambert/Phong, Standard (PBR), Physical, Toon, Normal/Depth, Points, Line

    Properties and working code for each material, including UV channels for aoMap and lightMap.

    Per-material guides

  • Custom GLSL under WebGLRenderer only

    How to write custom shaders, and which built-in uniforms to declare yourself.

    ShaderMaterial and RawShaderMaterial

  • Blending, stencil, transparency and material arrays

    Shared settings across materials, and how to give one mesh several materials.

    Common properties and multi-material meshes

  • Environment response, cloning, disposal and recompiles

    Using scene environment and HDR maps, and what changes at runtime cause the shader to recompile.

    Environment maps and runtime changes

  • Node materials from three/webgpu and TSL nodes from three/tsl

    Built-in classes run under WebGPURenderer; ShaderMaterial does not. Custom shading uses node materials.

    WebGPU and TSL

  • Outdated code mapped to the r186 fix with the reason

    Examples: RGBELoader to HDRLoader, Clock to Timer, material.encoding to colorSpace, and thick lines through Line2.

    Common Mistakes (19)

From the official docs

Questions

What does the threejs-materials skill do?

It gives Claude current knowledge of three.js materials for release r186, with examples and a list of outdated patterns to avoid. Claude loads it when you style meshes or tune materials.

How do I install it?

Use the install box at the top of this page. The README documents npx skills add cloudai-x/threejs-skills, which installs the whole 13-skill set, and a manual copy into ~/.claude/skills or .claude/skills.

Do I need the other three.js skills?

No. SKILL.md ends with a See Also list pointing to threejs-textures, threejs-shaders and threejs-lighting, but nothing requires them. They help when the question reaches into those topics.

Which three.js version does it target?

three.js r186 (three@0.186). The README says it was checked against the published package and the official Migration Guide, so older projects may not match.

Does it work with WebGPU?

Yes, it has a WebGPU and TSL section. It says built-in material classes run under WebGPURenderer, while ShaderMaterial and RawShaderMaterial have no node equivalent.

Is it safe to install?

It is one Markdown file with code examples and no scripts, so it only adds instructions for Claude. Review the code Claude writes from it as you would any generated code.

Information

updated Nov 2, 2026

Repository
cloudai-x/threejs-skills
Folder
skills/threejs-materials

cloudai-x/threejs-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. github.com · github.com
  2. github.com · github.com

Updated Nov 2, 2026.