skills.rest
dogmandcl
dogmandclCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

Explain Three.js texture types, UV mapping, and optimization for real-time rendering.

Updated Mar 25, 2026
Search Tags:#performance#textures#webgl#threejs#hdr#env-map#uv-mapping
One-click install
npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-textures-dogmandcl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/dogmandcl/Claude-Threejs-Skills/tree/main/skills/threejs-textures
Command: npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-textures-dogmandcl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js texture workflows can be complex, requiring knowledge of texture types, UV mapping, and performance considerations. This Skill consolidates guidance on texture types (regular, data, canvas, video), UV channels, environment maps, HDR support, and practical optimization techniques to streamline web-based 3D workflows.

Core Features & Use Cases

  • Learn and apply various texture types in Three.js, including color textures, normal maps, roughness/metalness maps, ambient occlusion maps, emissive maps, and displacement maps.
  • Understand and configure texture properties such as wrap modes, filtering, anisotropy, and mipmaps to balance visuals and performance.
  • Utilize UV channels (uv and uv2) and texture atlases to maximize efficiency across models and scenes.

Quick Start

Load a texture, create a material, and apply it to a mesh to see textured results.

Frequently Asked Questions about threejs-textures

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

FAQPage Schema
How do I apply normal, roughness, and metalness maps to a Three.js mesh?▼

To apply normal, roughness, and metalness maps in Three.js, load the texture files and assign them to the corresponding material properties to define surface detail and light reflection behavior.

What is the difference between uv and uv2 channels in Three.js texture mapping?▼

UV channels in Three.js define how textures wrap around geometry; uv is standard for color and normal maps, while uv2 is typically required for lightmaps or ambient occlusion maps.

How do I optimize WebGL texture performance using mipmaps and texture atlases?▼

Optimize WebGL texture performance by enabling mipmaps, configuring appropriate wrap modes and filtering, and combining multiple materials into a single texture atlas to minimize draw calls.

Can I use HDR environment maps and cubemaps for real-time reflections in Three.js?▼

Yes, Three.js supports HDR environment maps and cubemaps to render real-time reflections, providing accurate image-based lighting and ambient background visuals for WebGL scenes.

What are the best texture filtering and anisotropy settings for web-based 3D scenes?▼

The best texture filtering settings balance visual quality and performance by configuring mipmaps, selecting linear or nearest filters, and adjusting anisotropy to reduce blur at grazing angles.

Why do my Three.js textures look stretched or incorrectly placed on the model?▼

Stretched or misplaced Three.js textures usually indicate incorrect UV mapping, requiring adjustments to the geometry's UV channels or modifying texture wrap modes to ensure proper projection.

Related Skills

Explore More Software Engineering Skills→
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
LrmdomLrmdom

mrgoonie-threejs

Develop Three.js-based 3D web applications with WebGL and WebGPU rendering.

Community
Intermediate
assofohdzassofohdz
25

jme-materials

Configure jMonkeyEngine 3 materials for shader parameters, render states, and texture maps.

Community
Intermediate
mitgar14mitgar14

threejs-textures

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

Community
Intermediate