Threejs Textures

Three.js Textures is a community skill for texture management in Three.js, covering texture loading, UV mapping, texture types, mipmapping, and texture optimization for 3D surface detail.

What Is This?

Overview

Three.js Textures provides guidance on applying and managing textures in Three.js 3D scenes. It covers texture loading that imports images and HDR data with proper color space configuration, UV mapping that controls how textures wrap around 3D geometry surfaces, texture types that apply diffuse, normal, roughness, and environment maps for complete surface definition, mipmapping that generates multi-resolution versions for distance-based quality scaling, and texture optimization that compresses and resizes assets for web delivery. The skill helps developers apply detailed surface appearance to 3D objects.

Who Should Use This

This skill serves web developers texturing 3D models for product viewers, creative coders building textured environments, and 3D artists preparing texture assets for web applications.

Why Use It?

Problems It Solves

Textures applied with wrong color space appear washed out or overly bright. Large uncompressed textures consume GPU memory and slow downloads. Incorrect UV mapping causes stretching and tiling artifacts on geometry. Missing mipmaps create aliasing and shimmering at distance.

Core Highlights

Texture loader imports images with correct encoding settings. UV mapper controls wrapping and repeat parameters. Map combiner applies diffuse, normal, and roughness textures together. Optimizer compresses textures for efficient delivery.

How to Use It?

Basic Usage

// Texture configuration
import * as THREE from
  'three';

const loader =
  new THREE
  .TextureLoader();

function loadTexture(
  path, options = {}
) {
  const tex =
    loader.load(path);
  tex.colorSpace =
    options.srgb !== false
    ? THREE.SRGBColorSpace
    : THREE
      .LinearSRGBColorSpace;
  tex.wrapS =
    options.wrap ||
    THREE.RepeatWrapping;
  tex.wrapT =
    options.wrap ||
    THREE.RepeatWrapping;
  if (options.repeat) {
    tex.repeat.set(
      options.repeat,
      options.repeat);
  }
  tex.minFilter =
    THREE
    .LinearMipmapLinearFilter;
  tex.magFilter =
    THREE.LinearFilter;
  tex.anisotropy =
    options.anisotropy
    || 4;
  return tex;
}

const diffuse =
  loadTexture(
    'brick_diff.jpg',
    { repeat: 2 });
const normal =
  loadTexture(
    'brick_norm.jpg',
    { srgb: false,
      repeat: 2 });
const roughness =
  loadTexture(
    'brick_rough.jpg',
    { srgb: false,
      repeat: 2 });

const material =
  new THREE
  .MeshStandardMaterial({
    map: diffuse,
    normalMap: normal,
    roughnessMap:
      roughness });

Real-World Examples

// Texture atlas manager
import * as THREE from
  'three';

class TextureAtlas {
  constructor(
    imagePath,
    cols, rows
  ) {
    this.texture =
      new THREE
      .TextureLoader()
      .load(imagePath);
    this.cols = cols;
    this.rows = rows;
    this.texture
      .colorSpace =
      THREE.SRGBColorSpace;
  }

  getMaterial(
    col, row
  ) {
    const tex =
      this.texture.clone();
    tex.repeat.set(
      1 / this.cols,
      1 / this.rows);
    tex.offset.set(
      col / this.cols,
      row / this.rows);
    tex.needsUpdate = true;
    return new THREE
      .MeshStandardMaterial(
        { map: tex });
  }

  dispose() {
    this.texture.dispose();
  }
}

const atlas =
  new TextureAtlas(
    'tileset.png', 4, 4);
const grassMat =
  atlas.getMaterial(0, 0);
const stoneMat =
  atlas.getMaterial(1, 0);
console.log(
  'Atlas loaded: '
  + '4x4 tiles');

Advanced Tips

Set anisotropy to the renderer maximum for sharp textures at oblique viewing angles. Use KTX2 compressed textures with the KTX2Loader for GPU-native formats that reduce memory and load time. Keep texture dimensions as powers of two for optimal mipmap generation.

When to Use It?

Use Cases

Apply PBR texture sets with diffuse, normal, and roughness maps to a product model. Build a tiled environment using texture atlas offsets for efficient rendering. Optimize texture delivery for a web application with compressed formats.

Related Topics

Three.js, textures, UV mapping, PBR materials, mipmapping, texture compression, and WebGL rendering.

Important Notes

Requirements

Three.js library with TextureLoader for image-based textures. Image assets in web-compatible formats such as JPEG, PNG, or KTX2 for GPU compression. Properly UV-unwrapped geometry for correct texture alignment on model surfaces.

Usage Recommendations

Do: set colorSpace to SRGBColorSpace for diffuse maps and LinearSRGBColorSpace for data textures like normals. Dispose textures when they are no longer needed to free GPU memory. Use texture compression for web delivery to reduce download sizes.

Don't: use non-power-of-two textures with repeat wrapping since this disables mipmaps in WebGL. Load full-resolution textures for thumbnails since this wastes bandwidth and memory. Skip anisotropic filtering for ground planes since textures appear blurry at shallow angles.

Limitations

WebGL has maximum texture size limits that vary by device and GPU. Compressed texture format support depends on browser and hardware capabilities. Memory for all loaded textures counts against the GPU memory budget which is limited on mobile.