skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

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

Updated Apr 19, 2026
Search Tags:#textures#webgl#three.js#pbr#hdr#uv mapping#environment map
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill threejs-textures-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/divinaarmuela/Content --skill threejs-textures-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Working with textures in Three.js involves many error-prone details—color spaces, wrapping modes, mipmaps, UV channels, and HDR environment maps—and getting any of them wrong produces washed-out colors, blurry surfaces, or broken reflections. ## Core Features & Use Cases - Texture Loading & Configuration: Load images with TextureLoader, set sRGB color space for color maps, configure wrapping, repeat, offset, rotation, filtering, and anisotropy. - Environment Maps & HDR: Build cubemaps, load HDR/EXR files with RGBELoader and EXRLoader, and convert equirectangular maps with PMREMGenerator for realistic PBR lighting. - Advanced Texture Workflows: Create DataTexture, CanvasTexture, and VideoTexture procedurally, render to WebGLRenderTarget, use CubeCamera for dynamic reflections, and manage PBR texture sets (normal, roughness, metalness, AO maps). - Use Case: You are building a product configurator and need to apply a full PBR texture set to a mesh, add an HDR studio environment for reflections, and keep memory usage low on mobile devices. ## Quick Start Ask the AI to load a color texture with correct sRGB color space and apply it to a MeshStandardMaterial in Three.js.

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 file, then assign the returned texture to a material property such as map on MeshStandardMaterial. For color textures, set texture.colorSpace to THREE.SRGBColorSpace for accurate color reproduction.

How to add 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 PBR lighting.

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

This usually happens when the color space is wrong. Color and albedo textures need texture.colorSpace set to THREE.SRGBColorSpace, while data textures like normal, roughness, and metalness maps must keep the default NoColorSpace.

Does Three.js support compressed textures like KTX2?▼

Yes, use KTX2Loader from three/examples/jsm/loaders, call setTranscoderPath with the Basis transcoder files, and run detectSupport(renderer) before loading .ktx2 files. Compressed textures reduce GPU memory and download size.

Why does my aoMap not work in Three.js?▼

Ambient occlusion maps require a second UV channel. Copy the existing UVs with geometry.setAttribute('uv2', geometry.attributes.uv) so the aoMap has coordinates to sample from.

How do I free texture memory in Three.js?▼

Call texture.dispose() on every texture when it is no longer needed, including all maps attached to materials before disposing the material itself. You can check current usage with renderer.info.memory.textures.

Related Skills

Explore More Software Engineering Skills→
camillanapolescamillanapoles

3d-model-generation

Generate production-ready 3D models from text or images with PBR textures.

Community
Advanced
ayofemiadeayofemiade

threejs-webgl

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

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-errors-performance

Diagnose Three.js performance issues and memory leaks in WebGL scenes.

Official
Advanced
CriezzzCriezzz

lighting-nav-baker

Automate lighting and NavMesh baking in Unity Editor.

Community
Intermediate