threejs-textures

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

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-textures-brunoolf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/threejs-textures
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-textures-brunoolf

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, HDR environments, and memory disposal—that are easy to get wrong and cause washed-out colors, blurry surfaces, or 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, and VideoTexture procedurally, render to WebGLRenderTarget, generate dynamic reflections with CubeCamera, and manage PBR texture sets (normal, roughness, metalness, AO, displacement). - Use Case: You are building a product configurator and need to apply a full PBR texture set to a mesh, add an HDR studio environment for realistic reflections, and dispose of textures properly when switching models. ## Quick Start Ask the AI to load a color, normal, and roughness texture in Three.js, apply them to a MeshStandardMaterial with correct color spaces, and add an HDR environment map to the scene.

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 textures in Three.js?

Use THREE.TextureLoader to load an image, then assign it to a material property like map on MeshStandardMaterial. For multiple textures, wrap the loader in a Promise and use Promise.all to load color, normal, and roughness maps in parallel.

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

Load the .hdr file with RGBELoader, set its mapping to EquirectangularReflectionMapping, and 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?

Color textures need texture.colorSpace set to THREE.SRGBColorSpace for accurate reproduction. Data textures like normal, roughness, and metalness maps must keep the default NoColorSpace, otherwise lighting calculations break.

Does Three.js support compressed textures like KTX2?

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

Why does my Three.js scene leak GPU memory over time?

Textures and materials are not garbage collected automatically; you must call texture.dispose() and material.dispose() when removing objects. Iterate over all material map properties (map, normalMap, aoMap, etc.) and dispose each one.

How do I use an aoMap in Three.js?

Ambient occlusion maps require a second UV channel. Copy the existing UVs with geometry.setAttribute('uv2', geometry.attributes.uv), then assign the texture to material.aoMap and adjust aoMapIntensity.