Implement Three.js Textures and Materials

Covers loading, configuring, and optimizing textures for Three.js materials. Loading uses THREE.TextureLoader (callback-based or wrapped in a Promise to load several PBR maps in parallel via Promise.all), plus specialized loaders: KTX2Loader for compressed GPU textures, CubeTextureLoader for six-image skyboxes/environment maps, and RGBELoader/EXRLoader for HDR environments (with PMREMGenerator converting an equirectangular HDR into a prefiltered environment map). Configuration covers color space (sRGB for color/albedo maps, left as default NoColorSpace for data maps like normal/roughness/metalness/AO), wrapping (ClampToEdgeWrapping, RepeatWrapping, MirroredRepeatWrapping), repeat/offset/rotation for tiling and atlas UV selection, min/mag filtering and anisotropic filtering, and mipmap generation. It documents several texture types beyond a loaded image - DataTexture (built from a raw Uint8Array, e.g. procedural noise or gradients), CanvasTexture (drawn via the 2D canvas API, updated by setting needsUpdate), and VideoTexture (auto-updating, no manual needsUpdate needed) - plus render-to-texture via WebGLRenderTarget (with an optional DepthTexture or MSAA samples) and CubeCamera for dynamic reflection environment maps that must be refreshed each frame the reflective object is hidden. UV handling covers reading/writing the uv attribute directly, adding a second uv2 channel required by aoMap, and remapping UVs inside a custom ShaderMaterial. The full PBR texture set on MeshStandardMaterial is documented together - map, normalMap (with normalScale and Tangent/Object-space modes), roughnessMap, metalnessMap, aoMap (needs uv2), emissiveMap, displacementMap, and alphaMap - each with its own intensity/scale multiplier.

Use this when loading, configuring, or optimizing textures - UV mapping, texture settings, cubemaps, environment maps, or HDR workflows - working on surface detail and material inputs rather than geometry or animation. For applying loaded textures to a material's broader properties, see threejs-materials; for loader mechanics beyond TextureLoader, see threejs-loaders; for custom texture sampling in a shader, see threejs-shaders.

import * as THREE from "three";

const loader = new THREE.TextureLoader();
const texture = loader.load("texture.jpg");

const material = new THREE.MeshStandardMaterial({
  map: texture,
});

Inputs are image files (JPG/PNG), compressed .ktx2 assets, HDR/EXR environment files, six-image cubemap sets, or raw pixel/canvas/video data; output is a THREE.Texture (or subclass) assigned to a material map or scene background/environment. Disposal matters for memory: a disposeMaterial() helper iterates every possible map slot (map, normalMap, roughnessMap, metalnessMap, aoMap, emissiveMap, displacementMap, alphaMap, envMap, lightMap, bumpMap, specularMap) and disposes each, and a texture-pooling class caches loaded textures by URL to avoid redundant loads.

Built on THREE.TextureLoader, KTX2Loader, CubeTextureLoader, RGBELoader, EXRLoader, and PMREMGenerator, feeding textures into MeshStandardMaterial's PBR map slots, WebGLRenderTarget/WebGLCubeRenderTarget for render-to-texture and dynamic reflections, and custom ShaderMaterial uniforms for shader-level UV transforms. As of r183, KTX2Loader correctly handles BC3-compressed textures with alpha, and Three.js supports ISO 21496-1 gainmap metadata for properly tone-mapped HDR images from recent smartphone cameras.

Three.js developers loading and tuning textures for PBR materials, environment maps, or HDR backgrounds, who need correct color-space handling, efficient tiling/atlasing, and texture memory management (disposal, pooling, power-of-2 sizing) for production scenes.