How do I prevent texture memory leaks?

Always call texture.dispose() and material.dispose() when removing objects from your scene to explicitly free up GPU memory.

What is the best way to load multiple textures efficiently?

Wrap the TextureLoader in a Promise and use Promise.all to load your color, normal, and roughness maps concurrently to avoid loading bottlenecks.

Can I use a canvas or video as a texture source?

Yes, Three.js provides CanvasTexture and VideoTexture classes that allow you to use dynamic 2D content as surfaces for 3D objects.

Why are my ambient occlusion (AO) maps not working?

In Three.js, AO maps require a second set of UV coordinates. You must set the 'uv2' attribute on your geometry, often by copying the primary UV attribute.

How do I handle color spaces for textures in Three.js?

Use THREE.SRGBColorSpace for color/albedo textures to ensure accurate color reproduction, while keeping data textures (normal, roughness, metalness) as NoColorSpace.

Three.js Texture Mastery

Name: Three.js Texture Mastery
Author: Microck

byMicrock

•

Game Development

Implements and optimizes Three.js textures, UV mapping, and environment maps for high-performance 3D web graphics.

This skill provides a comprehensive toolkit for managing textures within the Three.js ecosystem, covering everything from basic image loading to advanced PBR material mapping and procedural texture generation. It assists developers in configuring critical settings like color spaces, wrapping modes, and anisotropic filtering to ensure visual fidelity and performance. Whether you are building immersive 3D environments with HDR skyboxes, dynamic reflections via CubeCamera, or custom shader-based UV transforms, this skill offers production-ready patterns and best practices for modern WebGL development.

Key Features

01Performance optimization through mipmap management, filtering, and texture disposal

02Automated texture loading patterns including async/await Promise wrappers

032 GitHub stars

04Advanced PBR material mapping for normal, roughness, metalness, and AO maps

05Specialized texture types including Data, Canvas, Video, and Compressed (KTX2) textures

06Environment map configuration for HDR, EXR, and equirectangular backgrounds

Use Cases

01Implementing dynamic reflections and environment lighting using CubeCamera and HDRIs

02Building realistic 3D environments with physically-based rendering (PBR) materials

03Optimizing web-based 3D applications through texture atlases and compressed formats

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck threejs-textures

For use in Claude.ai and ChatGPT

Download Skill