Skip to main content Home Creators beko2210 firstbrain threejs-textures
threejs-textures Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-texturesThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name threejs-textures description Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization. type skill created 2026-02-27T00:00:00.000Z domain design-creative category 3d-animation risk unknown source community tags ["skill","design-creative","3d-animation","threejs","textures"]
Three.js Textures
When to Use
You need to load, configure, or optimize textures in Three.js.
The task involves UV mapping, texture settings, cubemaps, environment maps, or HDR texture workflows.
You are working on surface detail and material inputs rather than geometry or animation.
Quick Start
import * as THREE from "three" ;
const loader = new THREE .TextureLoader ();
const texture = loader.load ("texture.jpg" );
const material = new THREE .MeshStandardMaterial ({
map : texture,
});
Texture Loading
Basic Loading
const loader = new THREE .TextureLoader ();
loader.load (
"texture.jpg" ,
(texture ) => console .log ("Loaded" ),
(progress ) => console .log ("Progress" ),
(error ) => console .error ("Error" ),
);
const
load
"texture.jpg"
map
Promise Wrapper function loadTexture (url ) {
return new Promise ((resolve, reject ) => {
new THREE .TextureLoader ().load (url, resolve, undefined , reject);
});
}
const [colorMap, normalMap, roughnessMap] = await Promise .all ([
loadTexture ("color.jpg" ),
loadTexture ("normal.jpg" ),
loadTexture ("roughness.jpg" ),
]);
Texture Configuration
Color Space Critical for accurate color reproduction.
colorTexture.colorSpace = THREE .SRGBColorSpace ;
Wrapping Modes texture.wrapS = THREE .RepeatWrapping ;
texture.wrapT = THREE .RepeatWrapping ;
Repeat, Offset, Rotation
texture.repeat .set (4 , 4 );
texture.wrapS = THREE .RepeatWrapping ;
texture.wrapT = THREE .RepeatWrapping ;
texture.offset .set (0.5 , 0.5 );
texture.rotation = Math .PI / 4 ;
texture.center .set (0.5 , 0.5 );
Filtering
texture.minFilter = THREE .LinearMipmapLinearFilter ;
texture.minFilter = THREE .NearestFilter ;
texture.minFilter = THREE .LinearFilter ;
texture.magFilter = THREE .LinearFilter ;
texture.magFilter = THREE .NearestFilter ;
texture.anisotropy = renderer.capabilities .getMaxAnisotropy ();
Generate Mipmaps
texture.generateMipmaps = true ;
texture.generateMipmaps = false ;
texture.minFilter = THREE .LinearFilter ;
Texture Types
Regular Texture const texture = new THREE .Texture (image);
texture.needsUpdate = true ;
Data Texture Create texture from raw data.
const size = 256 ;
const data = new Uint8Array (size * size * 4 );
for (let i = 0 ; i < size; i++) {
for (let j = 0 ; j < size; j++) {
const index = (i * size + j) * 4 ;
data[index] = i;
data[index + 1 ] = j;
data[index + 2 ] = 128 ;
data[index + 3 ] = 255 ;
}
}
const texture = new THREE .DataTexture (data, size, size);
texture.needsUpdate = true ;
Canvas Texture const canvas = document .createElement ("canvas" );
canvas.width = 256 ;
canvas.height = 256 ;
const ctx = canvas.getContext ("2d" );
ctx.fillStyle = "red" ;
ctx.fillRect (0 , 0 , 256 , 256 );
ctx.fillStyle = "white" ;
ctx.font = "48px Arial" ;
ctx.fillText ("Hello" , 50 , 150 );
const texture = new THREE .CanvasTexture (canvas);
texture.needsUpdate = true ;
Video Texture 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 ;
Compressed Textures 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;
});
Cube Textures For environment maps and skyboxes.
CubeTextureLoader const loader = new THREE .CubeTextureLoader ();
const cubeTexture = loader.load ([
"px.jpg" ,
"nx.jpg" ,
"py.jpg" ,
"ny.jpg" ,
"pz.jpg" ,
"nz.jpg" ,
]);
scene.background = cubeTexture;
scene.environment = cubeTexture;
material.envMap = cubeTexture;
Equirectangular to Cubemap 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.fromEquirectangular (texture).texture ;
scene.environment = envMap;
scene.background = envMap;
texture.dispose ();
pmremGenerator.dispose ();
});
HDR Textures
RGBELoader 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;
});
EXRLoader 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;
});
Background Options scene.background = texture;
scene.backgroundBlurriness = 0.5 ;
scene.backgroundIntensity = 1.0 ;
scene.backgroundRotation .y = Math .PI ;
Render Targets Render to texture for effects.
const renderTarget = new THREE .WebGLRenderTarget (512 , 512 , {
minFilter : THREE .LinearFilter ,
magFilter : THREE .LinearFilter ,
format : THREE .RGBAFormat ,
});
renderer.setRenderTarget (renderTarget);
renderer.render (scene, camera);
renderer.setRenderTarget (null );
material.map = renderTarget.texture ;
Depth Texture const renderTarget = new THREE .WebGLRenderTarget (512 , 512 );
renderTarget.depthTexture = new THREE .DepthTexture (
512 ,
512 ,
THREE .UnsignedShortType ,
);
const depthTexture = renderTarget.depthTexture ;
Multi-Sample Render Target const renderTarget = new THREE .WebGLRenderTarget (512 , 512 , {
samples : 4 ,
});
CubeCamera Dynamic environment maps for reflections.
const cubeRenderTarget = new THREE .WebGLCubeRenderTarget (256 , {
generateMipmaps : true ,
minFilter : THREE .LinearMipmapLinearFilter ,
});
const cubeCamera = new THREE .CubeCamera (0.1 , 1000 , cubeRenderTarget);
scene.add (cubeCamera);
reflectiveMaterial.envMap = cubeRenderTarget.texture ;
function animate (visible = false ;
cubeCamera.position .copy (reflectiveObject.position );
cubeCamera.update (renderer, scene);
reflectiveObject.visible = true ;
}
UV Mapping
Accessing UVs const uvs = geometry.attributes .uv ;
const u = uvs.getX (vertexIndex);
const v = uvs.getY (vertexIndex);
uvs.setXY (vertexIndex, newU, newV);
uvs.needsUpdate = true ;
Second UV Channel (for AO maps)
geometry.setAttribute ("uv2" , geometry.attributes .uv );
const uv2 = new Float32Array (vertexCount * 2 );
geometry.setAttribute ("uv2" , new THREE .BufferAttribute (uv2, 2 ));
UV Transform in Shader const material = new THREE .ShaderMaterial ({
uniforms : {
map : { value : texture },
uvOffset : { value : new THREE .Vector2 (0 , 0 ) },
uvScale : { value : new THREE .Vector2 (1 , 1 ) },
},
vertexShader : `
varying vec2 vUv;
uniform vec2 uvOffset;
uniform vec2 uvScale;
void main() {
vUv = uv * uvScale + uvOffset;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
` ,
fragmentShader : `
varying vec2 vUv;
uniform sampler2D map;
void main() {
gl_FragColor = texture2D(map, vUv);
}
` ,
});
Texture Atlas Multiple images in one texture.
const atlas = loader.load ("atlas.png" );
atlas.wrapS = THREE .ClampToEdgeWrapping ;
atlas.wrapT = THREE .ClampToEdgeWrapping ;
function selectSprite (row, col, gridSize = 2 ) {
atlas.offset .set (col / gridSize, 1 - (row + 1 ) / gridSize);
atlas.repeat .set (1 / gridSize, 1 / gridSize);
}
selectSprite (0 , 0 );
Material Texture Maps
PBR Texture Set const material = new THREE .MeshStandardMaterial ({
map : colorTexture,
normalMap : normalTexture,
normalScale : new THREE .Vector2 (1 , 1 ),
roughnessMap : roughnessTexture,
roughness : 1 ,
metalnessMap : metalnessTexture,
metalness : 1 ,
aoMap : aoTexture,
aoMapIntensity : 1 ,
emissiveMap : emissiveTexture,
emissive : 0xffffff ,
emissiveIntensity : 1 ,
displacementMap : displacementTexture,
displacementScale : 0.1 ,
displacementBias : 0 ,
alphaMap : alphaTexture,
transparent : true ,
});
geometry.setAttribute ("uv2" , geometry.attributes .uv );
Normal Map Types
material.normalMapType = THREE .TangentSpaceNormalMap ;
material.normalMapType = THREE .ObjectSpaceNormalMap ;
Procedural Textures
Noise Texture function generateNoiseTexture (size = 256 ) {
const data = new Uint8Array (size * size * 4 );
for (let i = 0 ; i < size * size; i++) {
const value = Math .random () * 255 ;
data[i * 4 ] = value;
data[i * 4 + 1 ] = value;
data[i * 4 + 2 ] = value;
data[i * 4 + 3 ] = 255 ;
}
const texture = new THREE .DataTexture (data, size, size);
texture.needsUpdate = true ;
return texture;
}
Gradient Texture function generateGradientTexture (color1, color2, size = 256 ) {
const canvas = document .createElement ("canvas" );
canvas.width = size;
canvas.height = 1 ;
const ctx = canvas.getContext ("2d" );
const gradient = ctx.createLinearGradient (0 , 0 , size, 0 );
gradient.addColorStop (0 , color1);
gradient.addColorStop (1 , color2);
ctx.fillStyle = gradient;
ctx.fillRect (0 , 0 , size, 1 );
return new THREE .CanvasTexture (canvas);
}
Texture Memory Management
Dispose Textures
texture.dispose ();
function disposeMaterial (material ) {
const maps = [
"map" ,
"normalMap" ,
"roughnessMap" ,
"metalnessMap" ,
"aoMap" ,
"emissiveMap" ,
"displacementMap" ,
"alphaMap" ,
"envMap" ,
"lightMap" ,
"bumpMap" ,
"specularMap" ,
];
maps.forEach ((mapName ) => {
if (material[mapName]) {
material[mapName].dispose ();
}
});
material.dispose ();
}
Texture Pooling class TexturePool {
constructor (this .textures = new Map ();
this .loader = new THREE .TextureLoader ();
}
async get (url ) {
if (this .textures .has (url)) {
return this .textures .get (url);
}
const texture = await new Promise ((resolve, reject ) => {
this .loader .load (url, resolve, undefined , reject);
});
this .textures .set (url, texture);
return texture;
}
dispose (url ) {
const texture = this .textures .get (url);
if (texture) {
texture.dispose ();
this .textures .delete (url);
}
}
disposeAll (this .textures .forEach ((t ) => t.dispose ());
this .textures .clear ();
}
}
Performance Tips
Use power-of-2 dimensions : 256, 512, 1024, 2048Compress textures : KTX2/Basis for web deliveryUse texture atlases : Reduce texture switchesEnable mipmaps : For distant objectsLimit texture size : 2048 usually sufficient for webReuse textures : Same texture = better batching
console .log (renderer.info .memory .textures );
const maxSize = renderer.capabilities .maxTextureSize ;
const isMobile = /iPhone|iPad|Android/i .test (navigator.userAgent );
const textureSize = isMobile ? 1024 : 2048 ;
KTX2Loader BC3 Alpha Fix (r183) As of r183, KTX2Loader correctly handles BC3 compressed textures with alpha channels, fixing previously incorrect alpha rendering.
ISO 21496-1 Gainmap Metadata (r183) Three.js r183 supports ISO 21496-1 gainmap metadata in HDR textures, enabling proper tone mapping of gainmap-based HDR images (such as those produced by recent smartphone cameras).
See Also
threejs-materials - Applying textures to materialsthreejs-loaders - Loading texture filesthreejs-shaders - Custom texture sampling
Connections
Domain: [[Design & Kreativitaet]]Kategorie: [[3D & Animation]]Navigation: [[Skills Uebersicht]], [[Home]] 