skills.rest
ElementTech
ElementTechCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-textures

Configure Three.js texture color spaces, UV mapping, and rendering performance.

2|Updated Jan 30, 2026
Search Tags:#textures#optimization#three.js#hdr#render-targets#cubemap#uv-mapping
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-textures-elementtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-textures
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-textures-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces visual bugs and performance pitfalls caused by incorrect texture loading, color space, UV configuration, and inefficient memory usage in Three.js projects, enabling consistent, high-quality rendering across devices.

Core Features & Use Cases

  • Texture Loading & Formats: Guidance for TextureLoader, CubeTextureLoader, RGBELoader/EXRLoader, and KTX2 compressed textures.
  • Color Space & Filtering: Best practices for sRGB vs linear data, mipmaps, anisotropic filtering, and min/mag filters to balance quality and performance.
  • UVs & Atlases: Techniques for UV mapping, uv2 for AO, atlas selection, and shader UV transforms for sprite selection and tiling.
  • Environment & HDR: Converting equirectangular HDR to PMREM cubemaps, setting scene.environment/background, and using CubeCamera for dynamic reflections.
  • Memory & Performance: Dispose patterns, texture pooling, render targets, and platform-aware sizing to optimize WebGL memory.
  • Use Case: Prepare a PBR material set for a web game, convert HDR environment maps to PMREM, compress textures to KTX2, and configure mipmaps and anisotropy for mobile.

Quick Start

Load and configure color, normal, and roughness maps, set albedo to sRGB, enable mipmaps and anisotropic filtering, assign uv2 for aoMap, and apply them to a MeshStandardMaterial.

Frequently Asked Questions about threejs-textures

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

FAQPage Schema
How do I fix incorrect colors when loading Three.js textures?▼

Fix Three.js texture color issues by setting albedo and color maps to sRGB color space while keeping normal and roughness maps in linear space, ensuring accurate PBR rendering and preventing washed-out visuals.

What's the best way to convert HDR environment maps for Three.js?▼

Convert equirectangular HDR environment maps to PMREM cubemaps using RGBELoader or EXRLoader, then assign the processed texture to scene.environment for accurate image-based lighting and stable reflections.

Does Three.js support KTX2 compressed textures for WebGL?▼

Three.js supports KTX2 compressed textures via KTX2 transcoders, significantly reducing WebGL memory usage and accelerating load times for heavy texture atlases across mobile and desktop web platforms.

How do I set up UV mapping for ambient occlusion maps in Three.js?▼

Set up ambient occlusion maps by assigning a secondary UV channel (uv2) to your geometry, allowing the aoMap to sample correctly independently from the primary albedo tiling and UV mapping coordinates.

Why are my Three.js textures blurry at grazing angles?▼

Textures appear blurry at grazing angles due to insufficient anisotropic filtering; enable mipmaps and increase the texture's anisotropy property to sharpen oblique viewing angles and improve visual quality.

How do I manage WebGL memory when disposing of Three.js textures?▼

Manage WebGL memory by calling the dispose() method on textures when they are no longer needed, freeing GPU memory and preventing memory leaks during scene transitions or texture pooling.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

threejs-loaders

Load Three.js GLTF/GLB models and textures with progress tracking.

Community
Intermediate
simon-tannasimon-tanna

threejs-materials

Configure and optimize Three.js materials for web-based 3D projects.

Community
Intermediate
shiqkuangsanshiqkuangsan
17

tooyoung:threejs-builder

Generate Three.js web applications with scene setup, lighting, geometries, materials, and animations.

Community
Intermediate
CarlosQ96CarlosQ96

threejs-textures

Load and configure image, video, and environment textures for Three.js scenes with proper UV mapping and memory management.

Community
Intermediate