skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-textures

Configure and manage Three.js textures including UV mapping, environment maps, and render targets.

2|10|Updated Jul 28, 2026
Search Tags:#textures#webgl#three.js#3D rendering#HDR#UV mapping#environment map
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-textures-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-textures
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-textures-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Working with textures in Three.js involves many subtle details—color spaces, wrapping modes, filtering, mipmaps, and memory management—that are easy to get wrong and cause washed-out colors, blurry surfaces, or GPU memory leaks. This Skill provides correct, copy-ready patterns for every common texture task. ## Core Features & Use Cases - Texture Loading & Configuration: Load images with TextureLoader, set sRGB color space for color maps, configure wrapping, repeat, offset, rotation, and anisotropic filtering. - Environment Maps & HDR: Set up cubemaps, equirectangular HDR/EXR environments with PMREMGenerator, and dynamic reflections with CubeCamera. - Specialized Textures: Create DataTexture, CanvasTexture, VideoTexture, compressed KTX2 textures, render targets, and texture atlases. - Use Case: You are building a 3D product viewer and need PBR materials. Use this Skill to correctly wire up color, normal, roughness, metalness, and AO maps with proper color spaces and the required uv2 attribute. ## Quick Start Ask the AI to set up a PBR material in Three.js with color, normal, and roughness textures using the correct color space settings.

Frequently Asked Questions about threejs-textures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load and apply a texture in Three.js?▼

Use THREE.TextureLoader to load an image, then assign it to a material's map property. For color textures, set texture.colorSpace = THREE.SRGBColorSpace so colors render accurately; leave data textures like normal maps at the default color space.

How to set up an HDR environment map in Three.js?▼

Load the .hdr file with RGBELoader, then either set texture.mapping to EquirectangularReflectionMapping and assign it to scene.environment, or convert it with PMREMGenerator.fromEquirectangular for prefiltered lighting. The same texture can serve as scene.background.

Why do my Three.js textures look washed out or too bright?▼

Washed-out colors usually come from missing sRGB color space configuration. Set colorSpace to THREE.SRGBColorSpace on color and emissive maps, but never on normal, roughness, or metalness maps, which must stay linear.

Does Three.js aoMap require a second UV channel?▼

Yes, aoMap uses the uv2 attribute by default. Add it with geometry.setAttribute('uv2', geometry.attributes.uv) if your geometry only has one UV set, or supply a custom second UV layout.

How do I free GPU memory from Three.js textures?▼

Call texture.dispose() on every texture you no longer need, including all maps attached to materials before calling material.dispose(). A texture pool that caches by URL and disposes on removal prevents duplicate loads and leaks.

What texture size should I use for web Three.js projects?▼

Use power-of-2 dimensions such as 512, 1024, or 2048 pixels, with 2048 as a typical web maximum. For mobile, 1024 is safer, and KTX2/Basis compressed textures reduce download size and GPU memory.

Related Skills

Explore More Software Engineering Skills→
brunoolfbrunoolf

threejs-textures

Implements Three.js texture loading, UV mapping, environment maps, and render targets.

Community
Intermediate
ayofemiadeayofemiade

threejs-webgl

Build interactive 3D web scenes with Three.js WebGL and WebGPU rendering.

Community
Advanced
mitgar14mitgar14

threejs-shaders

Build custom Three.js GLSL vertex and fragment shaders with ShaderMaterial.

Community
Advanced
jhaugajhauga

game-engine

Create web-based games with HTML5, Canvas, WebGL, and JavaScript frameworks.

Community
Advanced