Texture
Quick answer
Texture represents a 2D image on the GPU and controls sampling through wrapS, wrapT, repeat, offset, filters, anisotropy, and colorSpace. Supply it to material slots such as map or normalMap, and mark color textures as SRGBColorSpace while data textures stay linear.
new THREE.Texture ( image , mapping , wrapS , wrapT , magFilter , minFilter , format , type , anisotropy , colorSpace ) → Texture
Key points
- wrapS and wrapT must be RepeatWrapping for repeat values above 1 to tile.
- minFilter and magFilter control quality; NearestFilter yields a pixelated look.
- needsUpdate must be set after changing image pixels or canvas content.
Example
const texture = new THREE.TextureLoader().load('/textures/ground.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(8, 8);
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
texture.colorSpace = THREE.SRGBColorSpace;const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#15303f';
ctx.fillRect(0, 0, 512, 512);
ctx.strokeStyle = '#3f6c86';
for (let i = 0; i <= 512; i += 64) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, 512);
ctx.stroke();
}
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;Notes
- Non-power-of-two sizes lose mipmaps and repeat wrapping on some devices.
- Marking data textures such as normal maps as sRGB corrupts their values.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Texture. https://www.jingweizhi.com/en/three/api/texture.html (accessed 2026-11-03).