skills.rest
nicolasieber-tm
nicolasieber-tmCOMMUNITY
Explore all skills by this author →
GitHub

threejs-textures

Manage Three.js texture loading, configuration, and optimization for materials.

Updated Feb 2, 2026
Search Tags:#textures#threejs#envMap#UV mapping#texture optimization#TextureLoader
One-click install
npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-textures
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/nicolasieber-tm/threejs-skills/tree/main/skills/threejs-textures
Command: npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-textures

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing textures in Three.js can be challenging, requiring correct texture types, UV mapping, and environment setup to achieve accurate visuals and performance.

Core Features & Use Cases

  • Texture Types & Mappings: Regular textures, data textures, cube textures, HDR textures, and UV adjustments.
  • UV & Atlas Utilities: UV2 channel handling, UV transforms, tiling via wrap and repeat, and atlas-based sprite sheets.
  • Environment & Rendering: Environment maps, cubemaps, and HDR-based lighting configurations for realistic scenes.
  • Quick Start: Quick guidance to load an image and apply it to materials with basic settings.

Quick Start

Load an image texture with TextureLoader and apply it to a MeshStandardMaterial, then tweak wrap and repeat as needed.

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 apply image textures to a Three.js material?▼

TextureLoader loads image files asynchronously and returns a Texture object for MeshStandardMaterial. You then configure wrapping and repeat properties to control tiling and orientation across the mesh surface.

What's the best way to configure UV mapping and tiling for Three.js textures?▼

Configure UV mapping by adjusting wrap and repeat properties on the texture object. This handles UV transforms, tiling, and atlas-based sprite sheets to accurately position textures across geometry surfaces.

How do I set up environment maps and HDR lighting in Three.js?▼

Load HDR or cube textures and assign them to the scene environment property. This provides image-based lighting and realistic reflections for standard materials without requiring manual light placement.

What types of textures are supported for real-time rendering in Three.js?▼

Three.js supports regular image textures, data textures, cube textures, and HDR textures. These cover color, normal, roughness, and ambient occlusion maps needed for real-time rendering across standard materials.

Why do my Three.js textures look washed out or display incorrect colors?▼

Incorrect texture colors usually stem from improper color space handling. Enforcing correct color space configuration alongside proper mipmap generation and filtering ensures accurate visual output across standard materials.

Can I use UV2 channels and atlas-based sprite sheets with Three.js textures?▼

Yes, UV2 channels and atlas-based sprite sheets are supported. The Skill provides utilities for UV2 channel handling, UV transforms, and tiling via wrap and repeat for complex texture mapping scenarios.

Related Skills

Explore More Software Engineering Skills→
jenkinsm13jenkinsm13
31

texturing-pipeline

Generate UV maps, texture atlases, and color calibration for 3D meshes.

Community
Advanced
calesthiocalesthio
46.2k

threejs-materials

Select and apply varied Three.js materials to 3D meshes in WebGL scenes.

Community
Intermediate
gyalamanch001agyalamanch001a

threejs-materials

Configure Three.js mesh materials for PBR shading and shader effects.

Community
Intermediate
CloudAI-XCloudAI-X
2.9k

threejs-textures

Load and configure textures for Three.js scenes.

Community
Intermediate