iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Textures

By · Reviewed & last updated · Part of Three.js Tutorial

Textures are images mapped onto geometry. Three.js can load image files, video, canvases, or raw data; it handles repeat, mipmapping, anisotropy, and color space — details that decide whether your scene looks crisp or muddy.

TextureLoader, repeat, anisotropy, color space

EXAMPLE
import * as THREE from 'three';
import { TextureLoader } from 'three';

// 1) Load and apply a texture
const loader = new TextureLoader();
const texture = await loader.loadAsync('/textures/bricks.jpg');

const mat = new THREE.MeshStandardMaterial({ map: texture });
const mesh = new THREE.Mesh(new THREE.BoxGeometry(), mat);
scene.add(mesh);

// 2) Color space matters! sRGB for color textures, linear for data (normals, roughness)
texture.colorSpace = THREE.SRGBColorSpace;     // for albedo / color maps
// For PBR data maps:
// normalMap.colorSpace    = THREE.LinearSRGBColorSpace;
// roughnessMap.colorSpace = THREE.LinearSRGBColorSpace;

// 3) Repeat — tiling across a large plane
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(8, 8);

// 4) Filtering + mipmaps — the anti-jaggie pass
texture.magFilter  = THREE.LinearFilter;
texture.minFilter  = THREE.LinearMipmapLinearFilter;   // trilinear
texture.generateMipmaps = true;

// 5) Anisotropy — the big-bang upgrade for textures viewed at grazing angles
const maxAniso = renderer.capabilities.getMaxAnisotropy();
texture.anisotropy = Math.min(8, maxAniso);

// 6) Multi-map PBR material — the modern standard
const pbr = new THREE.MeshStandardMaterial({
    map:          await loader.loadAsync('/t/wood_albedo.jpg'),
    normalMap:    await loader.loadAsync('/t/wood_normal.jpg'),
    roughnessMap: await loader.loadAsync('/t/wood_rough.jpg'),
    aoMap:        await loader.loadAsync('/t/wood_ao.jpg'),
});
pbr.map.colorSpace          = THREE.SRGBColorSpace;
pbr.normalMap.colorSpace    = THREE.LinearSRGBColorSpace;
pbr.roughnessMap.colorSpace = THREE.LinearSRGBColorSpace;

// 7) CubeTexture — environment / reflection
import { CubeTextureLoader } from 'three';
const envMap = new CubeTextureLoader().load([
    '/env/px.jpg', '/env/nx.jpg',
    '/env/py.jpg', '/env/ny.jpg',
    '/env/pz.jpg', '/env/nz.jpg',
]);
scene.environment = envMap;

// 8) CanvasTexture — dynamic textures (text, charts, generative)
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 256;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'crimson';
ctx.fillRect(0, 0, 256, 256);
ctx.fillStyle = 'white';
ctx.font = '48px sans-serif';
ctx.fillText('Hi!', 60, 140);
const dyn = new THREE.CanvasTexture(canvas);
mat.map = dyn;
mat.needsUpdate = true;

// 9) Dispose when done
texture.dispose();
mat.dispose();

Why it matters

Get colorSpace right or your PBR materials look washed-out or radioactive. Color textures → sRGB; data textures (normal / roughness / metalness / AO) → linear. Three.js will warn in dev if you skip this.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
const tex = new THREE.TextureLoader().load('/wood.jpg');
tex.colorSpace = THREE.SRGBColorSpace;
mat.map = tex;
Try it Yourself »

Discussion

Loading…