threejs-materials · calesthio — Claude Code skill: materials and shaders
Reference for Three.js materials: PBR, basic, phong, custom shaders. Helps you pick the right material for a mesh, configure textures, and optimize rendering.
npx skills add calesthio/OpenMontage --skill threejs-materials -a claude-codeWhat threejs-materials does
The skill bundles a complete catalog of Three.js material types with code examples. It covers eight built-in types—from simple MeshBasicMaterial with no lighting to MeshPhysicalMaterial with support for glass, transmission, and anisotropy. Each type includes parameters, usage examples, and when to use it.
Inside are ready-made setups for common cases: glass with refraction, car paint with clearcoat, cel-shading. Examples show how textures work, normal maps, displacement maps, and environment lighting. Includes samples for PointsMaterial and custom ShaderMaterial for full control.
Use this skill when picking a material for new geometry, tuning PBR settings, understanding the difference between Phong and Standard, or needing a template for a complex effect. The text is truncated but covers core material types and their use.
What it helps with
- choose a material for photorealistic rendering
- tune PBR parameters for metal and dielectric surfaces
- build transparent glass with light refraction
- apply texture maps: normals, displacement, environment
- set up cel-shading or a custom shader
Example prompts for the agent
- Show me how to create MeshStandardMaterial with a roughness map
- How do I set transmission and thickness for glass
- I need an example of clearcoat for car paint
How to install threejs-materials
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-materials -a claude-code2Manually: put the files in place
~/.claude/skills/threejs-materials/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/threejs-materials/
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-materials -a codex2Manually: put the files in place
.agents/skills/threejs-materials/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-materials -a cursor2Manually: put the files in place
.cursor/skills/threejs-materials/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install calesthio/OpenMontage threejs-materials2Manually: put the files in place
.github/skills/threejs-materials/SKILL.md1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-materials -a gemini-cli2Platform CLI
gemini skills install https://github.com/calesthio/OpenMontage --path .claude/skills/threejs-materialsManually: put the files in place
.devin/skills/threejs-materials/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-materials -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set28
The whole set →Other versions of threejs-materials
Similar
Questions about threejs-materials
How do I install threejs-materials in Claude Code?
Run npx skills add calesthio/OpenMontage --skill threejs-materials -a claude-code, then open ~/.claude/skills/threejs-materials/SKILL.md.
What does threejs-materials do?
It's a reference for all material types in Three.js: basic, lit, PBR, custom shaders. It includes code examples, parameter docs, and ready-made setups for common scenarios.
When should I use MeshStandardMaterial instead of MeshPhongMaterial?
MeshStandardMaterial is physically based (PBR) and gives more realistic results. Use it if you want realism and need roughness and metalness maps. MeshPhongMaterial is simpler and faster, better for stylized graphics.