threejs-textures

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

Updated Jun 10, 2026
One-click install
npx skills add https://github.com/ayofemiade/m3ta-dev --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/m3ta-dev/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/ayofemiade/m3ta-dev --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: correct color spaces, wrapping modes, mipmap settings, HDR environment maps, and memory disposal. This Skill provides ready-to-use code patterns that prevent common mistakes like washed-out colors, blurry textures, and GPU memory leaks. ## 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 Texture Workflows: Create DataTexture, CanvasTexture, VideoTexture, render targets, texture atlases, and full PBR material texture sets with proper UV2 channels. - Use Case: You are building a product configurator and need to apply color, normal, roughness, and AO maps to a model with an HDR studio environment. This Skill gives you the exact loader, color space, and UV2 setup code to make it render correctly. ## Quick Start Ask the AI to show how to load a PBR texture set with an HDR environment map in Three.js using this skill.

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 before rendering to get accurate colors.

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 convert it with PMREMGenerator for better quality. The same texture can be assigned to scene.background.

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

This happens when color textures are not marked as sRGB. Set colorSpace to THREE.SRGBColorSpace on color, albedo, and emissive maps, but 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. Call setTranscoderPath with the basis transcoder files and detectSupport(renderer) before loading .ktx2 files, which reduces GPU memory and download size.

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) so the aoMap has coordinates to sample from.

How do I free texture memory in Three.js?

Call texture.dispose() on every texture when it is no longer needed, including all maps attached to materials. You can check current GPU texture count via renderer.info.memory.textures to verify disposal works.