threejs-textures

import * as THREE from "three";
 
// Load texture
const loader = new THREE.TextureLoader();
const texture = loader.load("texture.jpg");
 
// Apply to material
const material = new THREE.MeshStandardMaterial({
  map: texture,
});

const loader = new THREE.TextureLoader();
 
// Async with callbacks
loader.load(
  "texture.jpg",
  (texture) => console.log("Loaded"),
  (progress) => console.log("Progress"),
  (error

function loadTexture(url) {
  return new Promise((resolve, reject) => {
    new THREE.TextureLoader().load(url, resolve, undefined, reject);
  });
}
 
// Usage
const [colorMap, normalMap, roughnessMap

// Color/albedo textures - use sRGB
colorTexture.colorSpace = THREE.SRGBColorSpace;
 
// Data textures (normal, roughness, metalness, AO) - leave as default
// Do NOT set colorSpace for data textures (NoColorSpace is default)

texture.wrapS = THREE.RepeatWrapping; // Horizontal
texture.wrapT = THREE.RepeatWrapping; // Vertical
 
// Options:
// THREE.ClampToEdgeWrapping - Stretches edge pixels (default)
// THREE.RepeatWrapping - Tiles the texture
// THREE.MirroredRepeatWrapping - Tiles with mirror flip

// Tile texture 4x4
texture.repeat.set(4, 4);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
 
// Offset (0-1 range)
texture.offset.set(0.5, 0.5);
 
// Rotation (radians, around center)
texture.rotation = Math.PI / 4;

// Minification (texture larger than screen pixels)
texture.minFilter = THREE.LinearMipmapLinearFilter; // Default, smooth
texture.minFilter = THREE.NearestFilter; // Pixelated
texture.minFilter = THREE.LinearFilter; // Smooth, no mipmaps
 
// Magnification (texture smaller than screen pixels)
texture.magFilter = THREE.LinearFilter; // Smooth (default)
texture.magFilter = THREE.NearestFilter; // Pixelated (retro games)

// Usually true by default
texture.generateMipmaps = true;
 
// Disable for non-power-of-2 textures or data textures
texture.generateMipmaps = false;
texture.minFilter = THREE.LinearFilter;

const texture = new THREE.Texture(image);
texture.needsUpdate = true;

// Create gradient texture
const size = 256;
const data = new Uint8Array(size * size * 4);
 
for (let i = 0; i < size; i++) {
  for (let j = 0

const canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext("2d");
 
// Draw on canvas
ctx.fillStyle = "red";
ctx.fillRect(0

const video = document.createElement("video");
video.src = "video.mp4";
video.loop = true;
video.muted = true;
video.play();
 
const texture = new THREE.VideoTexture(video);
texture.colorSpace = THREE.SRGBColorSpace;

import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js";
 
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath("path/to/basis/");
ktx2Loader.detectSupport(renderer);
 
ktx2Loader.load("texture.ktx2", (texture) => {
  material.map = texture;
});

const loader = new THREE.CubeTextureLoader();
const cubeTexture = loader.load([
  "px.jpg",
  "nx.jpg", // +X, -X
  "py.jpg",
  "ny.jpg", // +Y, -Y
  "pz.jpg",
  "nz.jpg", // +Z, -Z
]);
 
// As background
scene.background 

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
 
new RGBELoader().load("environment.hdr", (texture) => {
  const envMap = pmremGenerator.

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
const loader = new RGBELoader();
loader.load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});

import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
 
const loader = new EXRLoader();
loader.load("environment.exr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
});

scene.background = texture;
scene.backgroundBlurriness = 0.5; // 0-1, blur background
scene.backgroundIntensity = 1.0; // Brightness
scene.backgroundRotation.y = Math.PI; // Rotate background

// Create render target
const renderTarget = new THREE.WebGLRenderTarget(512, 512, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.RGBAFormat,
});
 
// Render scene to target
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

const renderTarget = new THREE.WebGLRenderTarget(512, 512);
renderTarget.depthTexture = new THREE.DepthTexture(
  512,
  512,
  THREE.UnsignedShortType,
);
 
// Access depth
const depthTexture = renderTarget.depthTexture;

const renderTarget = new THREE.WebGLRenderTarget(512, 512, {
  samples: 4, // MSAA
});

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});
 
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);

const uvs = geometry.attributes.uv;
 
// Read UV
const u = uvs.getX(vertexIndex);
const v = uvs.getY(vertexIndex);
 
// Modify UV
uvs.setXY(vertexIndex, newU, newV);
uvs.needsUpdate = true;

// Required for aoMap
geometry.setAttribute("uv2", geometry.attributes.uv);
 
// Or create custom second UV
const uv2 = new Float32Array(vertexCount * 2);
// ... fill uv2 data
geometry.setAttribute("uv2", new THREE.BufferAttribute(uv2, 2));

const material = new THREE.ShaderMaterial({
  uniforms: {
    map: { value: texture },
    uvOffset: { value: new THREE.Vector2(0, 0) },
    uvScale: { value: new THREE.Vector2(1, 1) },
  },

// Atlas with 4 sprites (2x2 grid)
const atlas = loader.load("atlas.png");
atlas.wrapS = THREE.ClampToEdgeWrapping;
atlas.wrapT = THREE.ClampToEdgeWrapping;
 
// Select sprite by UV offset/scale
function selectSprite(row, col, gridSize = 2) {
  atlas.offset.set

const material = new THREE.MeshStandardMaterial({
  // Base color (sRGB)
  map: colorTexture,
 
  // Surface detail (Linear)
  normalMap: normalTexture,
  normalScale: new THREE.Vector2(1, 1),
 
  // Roughness (Linear, grayscale)

// OpenGL style normals (default)
material.normalMapType = THREE.TangentSpaceNormalMap;
 
// Object space normals
material.normalMapType = THREE.ObjectSpaceNormalMap;

function generateNoiseTexture(size = 256) {
  const data = new Uint8Array(size * size * 4);
 
  for (let i = 0; i < size * size; i++) {
    const value = Math.

function generateGradientTexture(color1, color2, size = 256) {
  const canvas = document.createElement("canvas");
  canvas.width = size;
  canvas.height = 1;
  const ctx = canvas.getContext("2d"

// Single texture
texture.dispose();
 
// Material textures
function disposeMaterial(material) {
  const maps = [
    "map",
    "normalMap",
    "roughnessMap",
    "metalnessMap",
    "aoMap",
    "emissiveMap",
    "displacementMap",

class TexturePool {
  constructor() {
    this.textures = new Map();
    this.loader = new THREE.TextureLoader();
  }
 
  async get(url) {
    if (this.textures.

// Check texture memory
console.log(renderer.info.memory.textures);
 
// Optimize for mobile
const maxSize = renderer.capabilities.maxTextureSize;
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
const textureSize = isMobile ? 1024 : 2048;