threejs-textures

Implements Three.js texture loading, UV mapping, environment maps, and render targets.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-textures-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/threejs-textures
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-textures-capella-hotel-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Working with textures in Three.js involves many subtle details—color spaces, wrapping modes, mipmaps, UV channels, and HDR environment maps—that are easy to get wrong and cause washed-out colors, blurry surfaces, or memory leaks. This Skill provides correct, ready-to-use patterns for every common texture task. ## Core Features & Use Cases - Texture Loading & Configuration: Load images with TextureLoader, set sRGB color space for color maps, configure wrapping, repeat, filtering, and anisotropy. - Environment Maps & HDR: Set up cubemaps, equirectangular HDR/EXR environments with PMREMGenerator, and dynamic reflections via CubeCamera. - Advanced Techniques: Create DataTexture, CanvasTexture, VideoTexture, render targets, texture atlases, procedural textures, and full PBR material texture sets with proper UV2 handling. - Use Case: When building a 3D product configurator, use this Skill to correctly load a PBR texture set (color, normal, roughness, AO), apply an HDR environment for realistic reflections, and dispose of textures properly to avoid GPU memory leaks. ## Quick Start Ask the AI to show how to load a color texture and a normal map in Three.js and apply them to a MeshStandardMaterial with the 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 it to a material's map property. For color textures, set texture.colorSpace = THREE.SRGBColorSpace to ensure accurate color reproduction in the rendered output.

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

Load the .hdr file with RGBELoader, then either set texture.mapping to EquirectangularReflectionMapping and assign it to scene.environment, or prefilter it with PMREMGenerator for better quality. The same texture can serve as scene.background.

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

This usually happens when color textures are not marked with SRGBColorSpace. Set colorSpace only on color/albedo and emissive maps; leave data textures like normal, roughness, and metalness maps at the default NoColorSpace.

Does Three.js support compressed textures like KTX2?▼

Yes, use KTX2Loader from three/examples/jsm/loaders with a Basis transcoder path and call detectSupport(renderer) before loading. Compressed textures reduce GPU memory usage and download size for web delivery.

Why does my aoMap not work in Three.js?▼

Ambient occlusion maps require a second UV channel. Copy the existing UVs with geometry.setAttribute('uv2', geometry.attributes.uv) before the aoMap will take effect on the material.

How do I prevent texture memory leaks in Three.js?▼

Call texture.dispose() on every texture when no longer needed, including all maps attached to materials. You can monitor GPU texture count via renderer.info.memory.textures and use a texture pool to reuse loaded textures.