Threejs Textures

This handles the full texture pipeline in Three.js, from basic loading and UV mapping to HDR environment maps and render targets. You'll reach for it when setting up PBR materials with multiple texture maps, configuring color spaces correctly (sRGB for color, linear for data), or building dynamic reflections with cube cameras. The examples cover practical scenarios like promise-based loading, video textures, and equirectangular to cubemap conversion. One thing to appreciate is the explicit coverage of filtering and wrapping modes, which are easy to get wrong but make a visible difference in render quality. Also includes canvas and data texture generation if you need procedural textures without external files.

skills.sh installs: 16.1K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-textures --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Textures

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

Quick Start

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);
}