skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

Manage Three.js texture loading, configuration, and material map application.

Updated Apr 2, 2026
Search Tags:#textures#webgl#three.js#hdr#uv mapping#environment maps#material maps
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-textures-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/threejs-textures
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-textures-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork from using textures in Three.js, helping you load, configure, and optimize image-based materials without color, UV, or performance issues.

Core Features & Use Cases

  • Texture Loading: Load regular image textures, data textures, canvas textures, video textures, and compressed textures.
  • Mapping and Control: Manage UV coordinates, atlas selection, wrapping, offsets, rotation, filtering, mipmaps, and color space.
  • Environment and Reflection: Set up cube maps, HDR environment maps, render targets, and dynamic reflections.
  • Material Workflows: Apply PBR texture sets such as albedo, normal, roughness, metalness, AO, emissive, displacement, and alpha maps.
  • Use Case: Build a realistic product viewer with correct sRGB color handling, tiled surfaces, environment lighting, and clean texture disposal for good runtime performance.

Quick Start

Use the threejs-textures skill to help me load, configure, and apply a texture to a Three.js material with correct color space and UV settings.

Frequently Asked Questions about threejs-textures

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

FAQPage Schema
How do I apply PBR texture maps to a Three.js material correctly?▼

PBR texture maps in Three.js require loading and configuring albedo, normal, roughness, metalness, AO, emissive, and displacement images while applying correct color space handling and UV settings to ensure accurate material rendering.

Why does my Three.js texture look washed out or have incorrect colors?▼

Incorrect colors in Three.js textures usually happen when color space handling is misconfigured. You must apply the correct sRGB color space settings to your image textures during the loading and configuration process to ensure accurate rendering.

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

Setting up an HDR environment map in Three.js involves loading the HDR file and configuring it as an environment map to provide dynamic reflections and realistic image-based lighting for your web graphics scenes.

Can I use video textures and canvas textures in Three.js?▼

Yes, Three.js supports loading regular image textures, data textures, canvas textures, video textures, and compressed textures, allowing you to apply dynamic visual sources to materials within your web graphics scenes.

What is the best way to manage texture memory disposal in Three.js?▼

Managing texture memory disposal in Three.js requires explicitly disposing of textures when they are no longer needed, alongside proper mipmap configuration and filtering control, to maintain good runtime performance in complex scenes.

Related Skills

Explore More Software Engineering Skills→
CarlosQ96CarlosQ96

threejs-fundamentals

Create and configure a Three.js scene, camera, and renderer for interactive 3D graphics.

Community
Intermediate
UncodierUncodier

webgl-threejs-pixi

Optimize WebGL rendering performance and memory usage in Three.js, React Three Fiber, and Pixi.js apps.

Community
Intermediate
HsnSaboorHsnSaboor

3d-graphics

Develop interactive 3D web graphics with Three.js, WebGL, and WebGPU.

Community
Advanced
Thanh-aperoThanh-apero
1

ck:shader

Develop custom GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Advanced