threejs-textures

Configure and manage Three.js textures including UV mapping, environment maps, and render targets.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill threejs-textures-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/ayofemiade/cleva --skill threejs-textures-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Working with textures in Three.js involves many error-prone details like color spaces, wrapping modes, mipmaps, and UV channels, and this Skill provides correct, ready-to-use patterns for every common texture scenario. ## Core Features & Use Cases - Texture Loading & Configuration: Load images with TextureLoader, set sRGB color space for color maps, configure wrapping, repeat, offset, rotation, filtering, and anisotropy. - Environment Maps & HDR: Set up cubemaps, equirectangular HDR/EXR environments with PMREMGenerator, and dynamic reflections using CubeCamera. - Specialized Textures: Create DataTexture, CanvasTexture, VideoTexture, compressed KTX2 textures, render targets, and texture atlases, plus memory management with disposal and pooling. - Use Case: When building a PBR material with color, normal, roughness, and AO maps, use this Skill to correctly assign color spaces, set up the uv2 attribute, and avoid washed-out or broken rendering. ## Quick Start Use the threejs-textures skill to load a color, normal, and roughness map and apply them to a MeshStandardMaterial with correct color space settings.

Frequently Asked Questions about threejs-textures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load and apply a texture in Three.js?▼

Use THREE.TextureLoader to load an image file, then assign the returned texture to a material property like map on MeshStandardMaterial. For multiple textures, wrap loader.load in a Promise and use Promise.all to load them in parallel.

How to set up an HDR environment map in Three.js?▼

Load the .hdr file with RGBELoader, set texture.mapping to THREE.EquirectangularReflectionMapping, then assign it to scene.environment and scene.background. For better quality, convert it with PMREMGenerator.fromEquirectangular before use.

Why do my Three.js textures look washed out or too bright?▼

Washed-out textures usually come from incorrect color space settings. Set colorTexture.colorSpace = THREE.SRGBColorSpace for color and emissive maps, but leave data textures like normal, roughness, and metalness maps at the default NoColorSpace.

Does Three.js aoMap require a second UV channel?▼

Yes, aoMap uses the uv2 attribute by default. Add it with geometry.setAttribute('uv2', geometry.attributes.uv) to reuse the existing UVs, or provide a custom Float32Array BufferAttribute with two components per vertex.

How do I free GPU memory from Three.js textures?▼

Call texture.dispose() on each texture when it is no longer needed, and dispose materials after releasing their maps. A texture pooling pattern that caches textures by URL and disposes them on demand helps prevent duplicate GPU allocations.

What texture size works best for Three.js on mobile?▼

Power-of-2 dimensions like 1024 are recommended for mobile, while 2048 is usually sufficient on desktop. Check renderer.capabilities.maxTextureSize for the hardware limit and use KTX2/Basis compressed textures to reduce download size and GPU memory.