threejs-textures_skill

Overview

This skill explains Three.js textures and practical workflows for loading, configuring, and optimizing them. It covers texture types (image, data, canvas, video, compressed), UV mapping, cube and HDR environment maps, and render targets. Use it to get reliable results with PBR materials, environment lighting, and texture performance on web projects.

How this skill works

I show how to load textures (TextureLoader, CubeTextureLoader, RGBELoader/EXRLoader, KTX2) and how to convert equirectangular HDRs into performant PMREM environment maps. The guide explains color space handling (sRGB vs data textures), wrapping/repeat/offset/rotation, filtering/mipmaps, and when to use different texture classes. It also covers UV channels, texture atlases, render-to-texture workflows, and memory management patterns like pooling and dispose.

When to use it

• Applying images to PBR materials (albedo, normal, roughness, metalness, ao)
• Setting up environment lighting and reflections with cubemaps or HDRs
• Creating dynamic or procedural textures from canvas, video, or DataTexture
• Optimizing web performance with compressed textures, atlases, and mipmaps
• Rendering scenes to textures for post-processing, reflections, or RTT effects

Best practices

• Set colorSpace = THREE.SRGBColorSpace for albedo/emissive maps, leave data textures in linear/NoColorSpace
• Use power-of-two texture sizes and enable generateMipmaps for smooth minification
• Reuse textures via a pooling/cache to reduce GPU memory and draw calls
• Compress assets with KTX2/Basis for faster loads and lower memory on the web
• Provide uv2 for aoMap and keep wrap/repeat consistent when using atlases

Example use cases

• Load an HDR equirectangular with RGBELoader, convert with PMREMGenerator, and assign scene.environment for realistic PBR lighting
• Build a sprite atlas and select tiles by changing texture.offset and texture.repeat to reduce texture binds
• Create a VideoTexture for animated billboards or UI screens in a 3D scene
• Generate procedural noise with a DataTexture for GPU-driven variation and masks
• Use a CubeCamera to produce dynamic reflections on a glossy object (update selectively to save performance)