skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-textures

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

1|Updated Aug 17, 2025
Search Tags:#textures#webgl#three.js#3d graphics#hdr#uv mapping#environment map
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-textures-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-textures-ratnesh-maurya

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, mipmaps, HDR formats, and memory management—that are easy to get wrong and cause washed-out colors, blurry surfaces, or GPU memory leaks. ## 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 equirectangular environments with RGBELoader and PMREMGenerator, and create dynamic reflections with CubeCamera. - Procedural & Special Textures: Generate DataTexture, CanvasTexture, VideoTexture, compressed KTX2 textures, texture atlases, and render-to-texture with WebGLRenderTarget. - Use Case: You are building a PBR material and need to wire up color, normal, roughness, metalness, and AO maps with correct color spaces and a second UV channel—this Skill provides the exact code patterns. ## Quick Start Ask the AI to show how to load a color texture and a normal map in Three.js and apply them to a MeshStandardMaterial with 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 file, then assign the result to a material property such as map on MeshStandardMaterial. For multiple textures, wrap loader.load in a Promise and use Promise.all to load them in parallel.

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

Load the .hdr file with RGBELoader, set texture.mapping to THREE.EquirectangularReflectionMapping, and assign it to scene.environment and scene.background. For better quality, prefilter it with PMREMGenerator's fromEquirectangular method.

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

Color textures need texture.colorSpace set to THREE.SRGBColorSpace for accurate reproduction. Data textures like normal, roughness, and metalness maps must keep the default NoColorSpace, so only set color space on color and emissive maps.

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. Compressed textures reduce GPU memory and download size for web delivery.

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

Ambient occlusion maps require a second UV channel named uv2 on the geometry. Copy the existing UV attribute with geometry.setAttribute('uv2', geometry.attributes.uv) before the material renders.

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 a material before disposing the material itself. You can check current usage via renderer.info.memory.textures.

Related Skills

Explore More Software Engineering Skills→
fyunusafyunusa

substance-3d-texturing

Automate PBR material export with channel packing for WebGL engines.

Community
Advanced
tadams95tadams95
1

threejs-materials

Apply and configure Three.js materials to 3D meshes for realistic rendering.

Community
Intermediate
tjboudreauxtjboudreaux
6

tools-unity-profiling

Profile Unity CPU/GPU timings, memory, and code execution with ProfilerMarker and FrameTimingManager.

Community
Intermediate
tadams95tadams95
1

r3f-shaders

Integrate custom GLSL shaders into React Three Fiber with shaderMaterial.

Community
Advanced