threejs-textures

Configure and optimize Three.js texture loading, mapping, and rendering workflows.

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/mitgar14/app-embebidos --skill threejs-textures-mitgar14
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/mitgar14/app-embebidos/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/mitgar14/app-embebidos --skill threejs-textures-mitgar14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you configure, troubleshoot, and optimize texture workflows in Three.js so materials look correct and perform well across web 3D scenes.

Core Features & Use Cases

  • Texture Loading: Load regular, canvas, video, compressed, HDR, and EXR textures with the right setup for each source.
  • Mapping and UV Control: Work with UV coordinates, secondary UV channels, atlases, and shader-based UV transforms for precise surface placement.
  • Environment and Rendering: Set up cube textures, HDR environments, render targets, depth textures, and cube cameras for reflections and immersive lighting.
  • Material Integration: Apply textures to PBR materials with proper color space, filtering, wrapping, mipmaps, and memory management.
  • Use Case: Build a realistic 3D product viewer that loads optimized textures, applies an HDR environment, and keeps mobile performance stable.

Quick Start

Use the threejs-textures skill to set up the correct texture type, material settings, and UV mapping approach for your Three.js scene.

Frequently Asked Questions about threejs-textures

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

FAQPage Schema
How do I load HDR and EXR textures in Three.js for environment maps?

To load HDR and EXR textures in Three.js, you must configure the correct loader and set the proper color space for environment maps. This ensures accurate PBR lighting and reflections without visual artifacts in your web 3D scenes.

What is the best way to configure UV mapping and texture atlases in Three.js?

Configuring UV mapping and texture atlases in Three.js involves managing UV coordinates, secondary UV channels, and shader-based UV transforms. Correct placement requires precise surface coordinate control to avoid texture stretching across 3D models.

Why do my Three.js PBR materials look washed out or incorrect?

PBR materials look washed out in Three.js when texture color space, filtering, wrapping, or mipmaps are misconfigured. Applying textures to the correct material texture slots with proper color management ensures accurate appearance and rendering performance.

Can I use Three.js render targets and depth textures for custom reflections?

Yes, you can use Three.js render targets and depth textures for custom reflections by setting up cube textures and cube cameras. This approach captures real-time scene data to drive immersive lighting and accurate material reflections.

How do I optimize Three.js texture memory for mobile performance?

To optimize Three.js texture memory for mobile performance, apply correct filtering, wrapping, and mipmap configurations alongside compressed textures. Proper material texture slot management reduces memory overhead while keeping web 3D scenes stable.