threejs-textures · calesthio — skill for Claude Code: textures, UV mapping and HDR
Skill for working with Three.js textures: image loading, UV coordinates, cubemaps, HDR environments and optimization. Use when building 3D scenes with materials, skyboxes and reflection maps.
npx skills add calesthio/OpenMontage --skill threejs-textures -a claude-codeWhat threejs-textures does
The skill includes code examples for all texture types: basic loading via TextureLoader, async handling with promises, color space configuration (sRGB for color maps, NoColorSpace for data like normals and roughness). Covers wrapping modes (RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping), filtering and mipmaps, Canvas-, Video- and DataTexture creation.
For environment maps, it shows cubemaps via CubeTextureLoader, HDR loading through RGBELoader and EXRLoader with equirectangular-to-cubemap conversion using PMREMGenerator. Examples for render targets, depth textures and compressed formats like KTX2. Each code snippet is copy-paste ready for Three.js projects.
What it helps with
- load and apply a 2D texture to a material
- configure UV coordinates, tiling and offset
- set up an HDR environment from equirectangular or cubemap
- optimize texture rendering with mipmaps and filtering
- render a scene to a texture for postprocessing or reflections
Example prompts for the agent
- Show me how to load a texture with TextureLoader and apply it to MeshStandardMaterial
- How do I use a compressed KTX2 texture in Three.js?
- Help me set up an RGBE HDR file as the scene environment
How to install threejs-textures
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-textures -a claude-code2Manually: put the files in place
~/.claude/skills/threejs-textures/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/threejs-textures/
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-textures -a codex2Manually: put the files in place
.agents/skills/threejs-textures/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-textures -a cursor2Manually: put the files in place
.cursor/skills/threejs-textures/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install calesthio/OpenMontage threejs-textures2Manually: put the files in place
.github/skills/threejs-textures/SKILL.md1Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-textures -a gemini-cli2Platform CLI
gemini skills install https://github.com/calesthio/OpenMontage --path .claude/skills/threejs-texturesManually: put the files in place
.devin/skills/threejs-textures/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill threejs-textures -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set28
The whole set →Other versions of threejs-textures
Similar
Questions about threejs-textures
How do I install threejs-textures in Claude Code?
Run npx skills add calesthio/OpenMontage --skill threejs-textures -a claude-code, then open ~/.claude/skills/threejs-textures/SKILL.md.
What does threejs-textures do?
It provides code examples for loading and configuring textures in Three.js: 2D textures, cubemaps, HDR environments, render targets, filtering and optimization.
Why set colorSpace on textures?
Color maps need SRGBColorSpace for accurate color reproduction. Data textures (normals, roughness, metalness) stay in NoColorSpace (default), otherwise colors get distorted.