skills.rest
mmdonohue
mmdonohueCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

Load, configure, and optimize Three.js textures for PBR materials.

1|Updated Apr 7, 2025
Search Tags:#textures#webgl#threejs#PBR#uv-mapping#environment-maps#texture-optimization
One-click install
npx skills add https://github.com/mmdonohue/zuzu --skill threejs-textures-mmdonohue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/mmdonohue/zuzu/tree/main/.claude/skills/threejs-textures
Command: npx skills add https://github.com/mmdonohue/zuzu --skill threejs-textures-mmdonohue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill simplifies loading, configuring, and optimizing textures in Three.js projects, reducing trial-and-error work and ensuring consistent rendering across platforms.

Core Features & Use Cases

  • Texture Loading & Management: Load color, normal, roughness, and other maps with proper color spaces, wrapping, and mipmaps.
  • UV & Mapping Techniques: Apply correct UV sets, uv2 for ambient occlusion, and environment/cubemap textures for realistic materials.
  • Optimization & Formats: Advocate for mipmaps, texture atlases, and modern formats (KTX2/Basis) to improve web performance.
  • Use Case: You are building a web-based scene with PBR materials and multiple textures, and you need predictable texture behavior and performance.

Quick Start

Start by creating a basic Three.js material and applying a loaded texture to a mesh. Extend to multiple maps, environment textures, and atlas-driven textures as your scene grows.

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 configure PBR textures in Three.js?▼

To load PBR textures in Three.js, use texture loaders to import color, normal, roughness, and metallic maps, then configure the material with correct color spaces, wrapping, and mipmaps for consistent rendering.

What is the best way to optimize Three.js textures for web performance?▼

Optimize Three.js textures by enabling mipmaps, using texture atlases, and adopting modern formats like KTX2 or Basis to significantly reduce file sizes and improve web rendering performance.

Why do my ambient occlusion textures look wrong in Three.js?▼

Ambient occlusion textures in Three.js require applying the correct UV2 mapping set to the mesh, distinct from the primary UV coordinates used for base color and normal maps.

How does UV mapping work for multiple textures on a Three.js mesh?▼

UV mapping in Three.js assigns 2D coordinates to mesh geometry, allowing multiple textures like color and ambient occlusion to use different UV sets, ensuring each map aligns correctly on the model.

Can I use environment maps for realistic lighting in Three.js?▼

Yes, you can use environment and cubemap textures in Three.js to provide realistic reflections and image-based lighting for PBR materials, enhancing scene realism without heavy computational light calculations.

Do I need to set color spaces when loading normal maps in Three.js?▼

Yes, setting correct color spaces is essential when loading Three.js textures; color maps typically use sRGB, while normal, roughness, and metallic maps require linear color space to render accurately.

Related Skills

Explore More Software Engineering Skills→
tc9011tc9011

threejs-materials

Apply Three.js materials for 3D mesh styling with PBR and custom shaders.

Community
Intermediate
chef0111chef0111
1

threejs

Develop 3D web applications with Three.js scenes, assets, and materials.

Community
Advanced
nicolasieber-tmnicolasieber-tm

threejs-materials

Configure Three.js materials with PBR, textures, and shader integration.

Community
Intermediate
calesthiocalesthio
46.2k

threejs-textures

Load and configure Three.js textures for standard materials.

Community
Advanced