threejs-textures

Configure and optimize Three.js textures for rendering in web graphics scenes.

Updated May 4, 2026
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill threejs-textures-jtgiron
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/threejs-textures
Command: npx skills add https://github.com/jtgiron/portfolio --skill threejs-textures-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you choose, configure, and troubleshoot Three.js textures so images, maps, and environment data render correctly in 3D scenes.

Core Features & Use Cases

  • Texture Loading and Configuration: Load regular, data, canvas, video, compressed, cube, HDR, and EXR textures with the right color space, wrapping, filtering, and mipmap settings.
  • UV and Material Mapping: Edit UVs, create secondary UV channels, build texture atlases, and apply PBR texture sets to standard materials.
  • Performance and Memory Management: Optimize texture size and anisotropy, use render targets and cube cameras, and dispose textures safely to control GPU memory.
  • Use Case: Build a realistic portfolio scene with an HDR environment, tiled surface maps, and a reflective object while keeping texture uploads efficient.

Quick Start

Describe how to use this Skill to set up a Three.js material with the correct texture type, color space, and UV mapping for my scene.

Frequently Asked Questions about threejs-textures

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

FAQPage Schema
How do I configure Three.js textures with the correct color space and filtering?

To configure Three.js textures, load images or environment data and apply the correct color space, wrapping, filtering, and mipmap settings to ensure accurate rendering in your 3D scene. This prevents visual artifacts.

Why do my PBR texture sets look wrong on standard materials?

PBR texture sets look wrong when color space handling and material map assignments are incorrect. Apply the proper texture channels to your standard materials and verify color space settings to fix rendering.

What is the best way to load HDR and EXR environment maps in Three.js?

The best way to load HDR and EXR environment maps is using specific texture loaders that correctly parse high dynamic range data, applying proper color space conversion for realistic lighting and reflections.

How do I optimize texture memory and dispose of unused maps in Three.js?

Optimize texture memory by controlling texture size and anisotropy, then safely dispose of unused textures to control GPU memory. This prevents memory leaks during scene transitions.

Can I create texture atlases and edit UV mapping for web graphics scenes?

Yes, you can create texture atlases and edit UV mapping. This Skill supports editing UVs, creating secondary UV channels, and building atlases to combine multiple textures for efficient rendering.

How do render targets and cube cameras work for dynamic reflections?

Render targets and cube cameras capture dynamic scene data into textures, generating real-time reflections and environment maps. Configure these render targets to map dynamic surroundings onto reflective objects.