# Threejs Textures

Three.js textures: image loading, color spaces, UV channels and transforms, texture...

- Repository: https://github.com/CloudAI-X/threejs-skills (3906 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-19
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add CloudAI-X/threejs-skills --skill threejs-textures -g -a claude-code -y`
Codex: `npx skills add CloudAI-X/threejs-skills --skill threejs-textures -g -a codex -y`
Cursor: `npx skills add CloudAI-X/threejs-skills --skill threejs-textures -g -a cursor -y`
Gemini CLI: `npx skills add CloudAI-X/threejs-skills --skill threejs-textures -g -a gemini-cli -y`

## Description

Three.js textures: image loading, color spaces, UV channels and transforms, texture types from canvas to HDR and KTX2, render targets, texture memory. Use when working with images on materials, UV coordinates, cubemaps, render targets or texture optimization; on WebGL or with WebGPU and TSL.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Three.js Textures

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

## Quick Start

```javascript
import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 2);

// Color images must be tagged sRGB or they render too bright and washed out
const texture = new THREE.TextureLoader().load("diffuse.jpg");
texture.colorSpace = THREE.SRGBColorSpace;

const mesh = new THREE.Mesh(
  new THREE.PlaneGeometry(2, 2),
  new THREE.MeshBasicMaterial({ map: texture }),
);
scene.add(mesh);

renderer.setAnimationLoop(animate);

function animate() {
  mesh.rotation.z += 0.01;
  renderer.render(scene, camera);
}
```

## Loading

```javascript
// load() returns the texture at once; its image arrives asynchronously
const texture = new THREE.TextureLoader().load("diffuse.jpg");
texture.colorSpace = THREE.SRGBColorSpace;
mesh.material.map = texture; // before the first render; afterwards also set mesh.material.needsUpdate = true

// When the next step needs the loaded image, await it
const colorMap = await new THREE.TextureLoader().loadAsync("diffuse.jpg");
colorMap.colorSpace = THREE.SRGBColorSpace;
```

TextureLoader's `onProgress` parameter is unsupported and never fires; a `LoadingManager` reports progress as each file finishes:

```javascript
const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total}: ${url}`);
const loader = new THREE.TextureLoader(manager);
```

## Color Space

Color management is on by default and every texture starts at `NoColorSpace`:

The rest: https://github.com/CloudAI-X/threejs-skills/blob/HEAD/skills/threejs-textures/SKILL.md