threejs-textures

name	threejs-textures
description	Three.js texture loading and management — TextureLoader, colour spaces (SRGBColorSpace), wrapping modes, filtering, mipmaps, UV mapping, texture atlases, PBR texture sets (map/normalMap/roughnessMap/metalnessMap/aoMap/emissiveMap/displacementMap), video textures, canvas textures, DataTexture for procedural content, KTX2 compressed textures, and memory disposal. Use when loading or creating textures, configuring UV mapping, or managing texture memory. Adapted from CloudAI-X/threejs-skills (MIT).
license	MIT
compatibility	Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Three.js source files and texture asset pipeline.
disable-model-invocation	true
metadata	{"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","upstream_references":["https://github.com/CloudAI-X/threejs-skills (MIT — see NOTICE.md)"],"tags":["three-js","textures","texture-loading","uv-mapping","pbr","normal-map","colour-space","video-texture","canvas-texture","ktx2","memory-management"],"intents":["texture-loading","colour-space-selection","uv-configuration","pbr-texture-set","texture-compression","memory-disposal"],"output_types":["code-example","api-reference","texture-budget"]}

Three.js Textures

Quick Start

import * as THREE from 'three';

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

// Colour textures must be in sRGB space
texture.colorSpace = THREE.SRGBColorSpace;

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

---

TextureLoader

Basic Loading

const loader = new THREE.TextureLoader();

// Callback-based
loader.load(
  'texture.jpg',
  texture => { material.map = texture; material.needsUpdate = true; },
  undefined,  // onProgress (not supported for single textures)
   => .(, err),
);


  () {
    ( {
    loader.(url, resolve, , reject);
  });
}

 texture =  ();