skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

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

1|Updated Aug 28, 2026
Search Tags:#textures#webgl#three.js#hdr#uv mapping#pbr materials#environment map
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill threejs-textures-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/threejs-textures
Command: npx skills add https://github.com/mooch10/mochiptos --skill threejs-textures-mooch10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Working with textures in Three.js involves many subtle configuration details—color spaces, wrapping modes, filtering, mipmaps, and UV channels—that are easy to get wrong, leading to washed-out colors, blurry surfaces, or broken environment reflections. ## 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: Load cubemaps, HDR (RGBELoader), and EXR files, convert equirectangular maps with PMREMGenerator, and control background blurriness and intensity. - Advanced Texture Workflows: Create DataTexture, CanvasTexture, and VideoTexture procedurally, render to WebGLRenderTarget for effects, build dynamic reflections with CubeCamera, and manage PBR texture sets (normal, roughness, metalness, AO maps). - Use Case: When building a 3D product configurator, use this Skill to correctly apply a PBR texture set with proper color spaces, set up an HDR environment for realistic reflections, and dispose of textures to prevent memory leaks. ## Quick Start Ask the AI to load a color texture with correct sRGB color space and apply it to a MeshStandardMaterial with repeat tiling 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 it to a material's map property. Set texture.colorSpace to THREE.SRGBColorSpace for color textures to ensure 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 use PMREMGenerator to prefilter it for better quality.

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

This usually happens when color textures lack the sRGB color space setting. Set texture.colorSpace = THREE.SRGBColorSpace on color and emissive maps, but leave data textures like normal and roughness maps at the default.

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

Yes, aoMap uses the uv2 attribute by default. Copy the existing UVs with geometry.setAttribute('uv2', geometry.attributes.uv) if your geometry only has one UV set.

How do I prevent texture memory leaks in Three.js?▼

Call texture.dispose() on every texture when no longer needed, including all maps attached to materials. You can also implement a texture pool to reuse loaded textures and monitor usage via renderer.info.memory.textures.

Related Skills

Explore More Software Engineering Skills→
capella-hotel-groupcapella-hotel-group

threejs-textures

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

Official
Intermediate
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
gyalamanch001agyalamanch001a

threejs-shaders

Create custom Three.js shader effects with ShaderMaterial and RawShaderMaterial.

Community
Advanced
TenBeltzTenBeltz

react-three-fiber

Render declarative 3D scenes in React using JSX components mapped to Three.js objects.

Official
Advanced