skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

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

1|Updated Aug 20, 2023
Search Tags:#textures#webgl#three.js#3d rendering#hdr#uv mapping#environment map
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-textures-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-textures
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-textures-imanlangaran

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, mipmaps, UV channels, and HDR environment maps—that are easy to get wrong and cause washed-out colors, blurry surfaces, or broken reflections. ## Core Features & Use Cases - Texture Loading & Configuration: Load standard, data, canvas, video, and compressed KTX2 textures with correct color space, filtering, wrapping, and anisotropy settings. - Environment Maps & HDR: Set up cubemaps, equirectangular HDR/EXR environments, PMREM generation, and dynamic CubeCamera reflections. - Render Targets & UV Mapping: Render scenes to textures, capture depth textures, manage second UV channels for AO maps, and build texture atlases. - Use Case: You are building a product configurator and need PBR texture sets (color, normal, roughness, AO) applied correctly with proper sRGB handling, plus an HDR environment for realistic reflections. ## Quick Start Ask the AI to load a color texture and an HDR environment map in Three.js with correct color space settings and apply them to a standard material.

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. For color textures, set texture.colorSpace to THREE.SRGBColorSpace so colors render accurately.

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

Load the .hdr file with RGBELoader, then either set its mapping to EquirectangularReflectionMapping and assign it to scene.environment, or convert it with PMREMGenerator for better quality. The same texture can serve as scene.background.

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

This usually happens when color textures are not marked as sRGB. Set colorSpace to SRGBColorSpace on color and emissive maps, but leave data textures like normal, roughness, and metalness maps at the default NoColorSpace.

Does Three.js support compressed textures like KTX2?▼

Yes, Three.js supports KTX2/Basis compressed textures through the KTX2Loader. You must set the transcoder path and call detectSupport with your renderer before loading .ktx2 files.

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 aoMap takes effect.

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

Call texture.dispose() on each texture when it is no longer needed, and dispose materials after releasing their maps. You can check current GPU texture usage via renderer.info.memory.textures.

Related Skills

Explore More Software Engineering Skills→
brunoolfbrunoolf

threejs-textures

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

Community
Intermediate
yonetim258852yonetim258852

threejs-webgl

Build interactive 3D web experiences with Three.js scenes and animations.

Community
Advanced
buihuulocbuihuuloc

ue-shader-complexity-report

Profile Unreal Engine material shader complexity with instruction counts and GPU cost estimates.

Community
Intermediate
tadams95tadams95
1

r3f-textures

Load and apply textures in React Three Fiber projects using useTexture.

Community
Intermediate