threejs-textures

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

Updated Sep 1, 2026
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-textures-zamansepeti43
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-textures
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-textures-zamansepeti43

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 patterns that prevent common rendering bugs 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, offset, rotation, filtering, and anisotropy. - Environment Maps & HDR: Build cubemaps, convert equirectangular HDR/EXR files with PMREMGenerator, and control scene background blur, intensity, and rotation. - Advanced Texture Workflows: Create DataTexture, CanvasTexture, VideoTexture, render targets with depth textures, CubeCamera reflections, texture atlases, and full PBR material map setups. - 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 when switching models to avoid memory leaks. ## Quick Start Ask the AI to load a color texture with correct sRGB color space and apply it to a MeshStandardMaterial in Three.js.

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 to THREE.SRGBColorSpace so colors render correctly.

How do I add an HDR environment map in Three.js?

Load the .hdr file with RGBELoader, then either set texture.mapping to EquirectangularReflectionMapping or convert it with PMREMGenerator. Assign the result to scene.environment and optionally scene.background.

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

This usually happens when the color space is wrong. Color and emissive maps need THREE.SRGBColorSpace, while data textures like normal, roughness, and metalness maps must keep 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 for GPU-friendly compressed textures.

Why does my Three.js app leak GPU memory with textures?

Textures are not garbage collected automatically. Call texture.dispose() when a texture is no longer needed, and dispose every map on a material before discarding it to free GPU memory.

How do I use a second UV channel for ambient occlusion maps?

Three.js aoMap requires a uv2 attribute. Copy the existing UVs with geometry.setAttribute('uv2', geometry.attributes.uv) or supply a custom BufferAttribute with your second UV layout.