skills.rest
calesthio
calesthioCOMMUNITY
Explore all skills by this author →
𝕏@calesthioailabsGitHub

threejs-textures

Load and configure Three.js textures for standard materials.

46.2k|5.7k|Updated Mar 29, 2026
Search Tags:#textures#webgl#threejs#texture-loading#uv-mapping#environment-maps#material-maps
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill threejs-textures-calesthio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-textures
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/threejs-textures
Command: npx skills add https://github.com/calesthio/OpenMontage --skill threejs-textures-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Efficiently loading and applying textures in Three.js projects to produce accurate visuals without manual trial-and-error.

Core Features & Use Cases

  • Load and apply color, normal, roughness, metalness, AO, and emissive textures to standard materials.
  • Support for UV mapping, UV2 for AO, and environment maps (cube textures and HDR-based scenes).
  • Examples for regular textures, data textures, canvas textures, and video textures to cover multiple asset pipelines.

Quick Start

Load a texture with THREE.TextureLoader and apply it to a MeshStandardMaterial to preview results.

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 multiple textures to a Three.js MeshStandardMaterial?▼

To apply multiple textures in Three.js, use TextureLoader to import color, normal, roughness, metalness, AO, and emissive maps, then assign them to the corresponding slots on a MeshStandardMaterial for accurate real-time rendering.

What is the best way to configure UV mapping and environment maps in Three.js?▼

Configuring UV mapping and environment maps in Three.js involves assigning UV2 coordinates for ambient occlusion textures and loading cube textures or HDR-based scenes to accurately reflect the surrounding environment on standard materials.

Can I use video textures and canvas textures in Three.js real-time workflows?▼

Yes, you can use video textures and canvas textures in Three.js. The workflow supports these dynamic texture types alongside regular and data textures to cover multiple asset pipelines for real-time scene updates.

How do texture wrap modes, min/mag filters, and mipmaps affect WebGL rendering?▼

Texture wrap modes, min/mag filters, and mipmaps control how textures are sampled and displayed in WebGL. Configuring these settings correctly ensures efficient rendering and prevents visual artifacts on materials.

Does this Three.js texture workflow support data textures for custom asset pipelines?▼

Yes, this Three.js texture workflow supports data textures. It provides practical examples for regular, data, canvas, and video textures to ensure comprehensive coverage across multiple asset pipelines.

Related Skills

Explore More Software Engineering Skills→
norrbackanorrbacka

threejs-lighting

Configure Three.js lighting, shadows, helpers, and environment illumination.

Community
Advanced
ghufronbagaskaraghufronbagaskara

p5js

Generate interactive p5.js visual art with headless export to PNG, GIF, or MP4.

Community
Advanced
adamhjkadamhjk
2

pixijs-custom-rendering

Create custom shaders and filters for PixiJS v8 with WebGL and WebGPU.

Community
Intermediate
utsavm81098utsavm81098

threejs-materials

Select and configure Three.js material types for lighting, textures, and shaders.

Community
Advanced