Three.js Textures Skill (CloudAI-X) for Claude Code

Makes Claude write up-to-date three.js texture code, for web developers who load images, HDR maps and render targets onto 3D materials.

Installs: 14.2K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-textures gives Claude a current reference for textures in three.js release r186. It covers loading images, color spaces, wrap and repeat, mipmaps and filtering, HDR and KTX2 formats, environment maps, render targets, UV channels and cleaning up GPU memory. A WebGPU and TSL section covers the newer renderer.

It triggers when you work with images on materials, UV coordinates, cubemaps, render targets or texture optimization. It ends with 20 "common mistakes" that show the old call and its replacement, for example RGBELoader to HDRLoader. It bundles one file and no scripts. The repo README says the skills were checked against the three@0.186.1 package.

Good for

Web developers building 3D scenes with three.js
Developers whose AI-written three.js code uses removed APIs
Anyone debugging washed-out colors, missing maps or texture memory growth

Install threejs-textures

Claude Code

Copy this prompt.

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

npx skills add cloudai-x/threejs-skills --skill threejs-textures

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

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

Requires Node.js.

This skill stands alone; its See Also section lists threejs-materials, threejs-loaders, threejs-shaders, threejs-lighting and threejs-asset-pipeline as related reading. The README command installs all 13 skills in the set.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Three.js textures: image loading, color spaces, UV channels and transforms, texture types from canvas to HDR and KTX2, render targets, texture memory. Use when working with images on materials, UV coordinates, cubemaps, render targets or texture optimization; on WebGL or with WebGPU and TSL.

Sections in SKILL.md

Quick Start
Loading
Color Space
Transform: Wrap, Repeat, Offset, Rotation
Filtering, Mipmaps, Anisotropy
Texture Types
Compressed Textures (KTX2)
Environment Maps
Render Targets
Dynamic Reflections
UV Channels
Texture Atlas
Standard Material Slots
Disposal and Memory
WebGPU and TSL
Common Mistakes

Key facts

Author: CloudAI-X (threejs-skills)
Repository: cloudai-x/threejs-skills
Installs on skills.sh: 14,157 as of 2026-11-02
GitHub stars: 3,903 for the whole cloudai-x/threejs-skills repo
License: MIT (repo README)
Last repo commit: 2026-10-19
What is inside: 1 file: SKILL.md (500 lines). It has no scripts.
Targets: three.js r186; examples use WebGLRenderer, with a WebGPU and TSL section
Part of: threejs-skills, a set of 13 three.js skills

What it includes

Renderer, scene and a first textured mesh
A minimal WebGLRenderer setup that then loads and applies a texture.
Try: “Load a PBR texture set onto a plane, with correct color spaces and anisotropy.”
Quick Start
TextureLoader and sRGB for color images
Set colorSpace to SRGBColorSpace for color images. Data maps such as normal, roughness and metalness keep NoColorSpace, and HDR environments are linear.
Loading and color space
Tiling and transforms
How to repeat, offset and rotate a texture.
Wrap, repeat, offset, rotation
Sharpness and performance settings
Notes that mipmaps are generated whenever generateMipmaps is true, whatever the filter.
Filtering, mipmaps, anisotropy
From image and canvas to HDR
Shows Texture, DataTexture, CanvasTexture, VideoTexture and VideoFrameTexture.
Texture types
KTX2Loader and renderer support detection
Call await renderer.init() and then ktx2Loader.detectSupport(renderer).
Compressed textures (KTX2)
Equirectangular maps for scene.environment and background
Set the mapping to EquirectangularReflectionMapping. Use scene.environmentIntensity, not material.envMapIntensity, for scene-wide light.
Environment maps
Render to textures, cube cameras
Includes multi-attachment targets and hiding a reflective mesh while its cube camera updates.
Render targets and dynamic reflections
texture.channel, extra UV sets and sprite atlases
aoMap reads the attribute chosen by texture.channel, which defaults to channel 0.
UV channels and atlases
Which map goes in which material property
A reference for color, normal, roughness, metalness, ao and other map slots.
Standard material slots
Freeing textures to keep GPU memory in check
texture.dispose() frees the GPU upload. Dispose only textures that no other material still uses.
Disposal and memory
The same ideas for WebGPURenderer
Notes such as renderer.getMaxAnisotropy() instead of the capabilities object, and CubeRenderTarget from three/webgpu.
WebGPU and TSL
20 old-to-new fixes
Examples: texture.encoding to texture.colorSpace, RGBELoader to HDRLoader, WebGLMultipleRenderTargets to WebGLRenderTarget with count, and three/examples/jsm imports to three/addons.
Common mistakes

From the official docs

Questions

What does the threejs-textures skill do?

It gives Claude an up-to-date guide to three.js textures, so generated code uses current APIs. It covers color spaces, loaders, KTX2, HDR environments, render targets and memory cleanup.

How do I install it?

Use the install box at the top of this page. The skills command with --skill installs just this skill; the README's own command, npx skills add cloudai-x/threejs-skills, installs all 13.

Which three.js version does it target?

Release r186. The examples use WebGLRenderer, and one section covers WebGPURenderer and TSL. If you use an older release, some calls in the skill will not exist.

Do I need the other threejs skills?

No. This file stands alone. It points to threejs-materials, threejs-loaders, threejs-shaders, threejs-lighting and threejs-asset-pipeline as related reading.

What mistakes does it fix?

Twenty listed ones, including textures that look washed out because the color space is unset, the removed texture.encoding property, the renamed HDRLoader, envMapIntensity versus environmentIntensity, and a map added after first render that needs needsUpdate.

Is it safe?

It is one Markdown file and bundles no scripts. It changes the three.js code Claude writes for you, so review that code as usual.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-textures

cloudai-x/threejs-skills skills.sh

Sources

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

Show all 4

CloudAI-X/threejs-skills README · github.com
commands.md · github.com
threejs-textures SKILL.md · github.com
threejs-textures SKILL.md · github.com