skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-syntax-materials

Configures Three.js materials, textures, and PBR workflows with correct color space and disposal patterns.

1|Updated Aug 20, 2023
Search Tags:#textures#color space#webgl#three.js#materials#pbr#meshstandardmaterial
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-syntax-materials-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-syntax-materials
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-syntax-materials
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-syntax-materials-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing and configuring Three.js materials involves many silent failure modes: wrong color space on data textures, opacity ignored without the transparent flag, GPU memory leaks from undisposed materials, and textures that refuse to tile. This Skill provides a decision tree, API reference, and anti-pattern catalog to get materials and textures right the first time. ## Core Features & Use Cases - Material Selection Guide: A decision tree covering 15+ material types (MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, and more) mapped to concrete use cases like glass, fabric, toon shading, and particles. - Texture & Color Space Rules: Complete tables defining which maps need SRGBColorSpace versus NoColorSpace, plus wrapping, filtering, anisotropy, and flipY rules. - Anti-Pattern Catalog: Ten documented mistakes with wrong/correct code pairs, including disposal leaks, needsUpdate misuse, and missing uv2 attributes for aoMap. - Use Case: When building a PBR brick wall with diffuse, normal, roughness, and AO maps, follow the working example to set color spaces, RepeatWrapping, and the uv2 attribute correctly. ## Quick Start Ask the AI to set up a MeshStandardMaterial with diffuse, normal, and roughness textures for a tiling floor in Three.js r160+.

Frequently Asked Questions about threejs-syntax-materials

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

FAQPage Schema
How do I choose the right Three.js material for my scene?▼

Use MeshStandardMaterial for general-purpose PBR rendering, MeshPhysicalMaterial only when you need clearcoat, transmission, sheen, or iridescence, and MeshBasicMaterial for unlit UI elements. MeshToonMaterial handles cel-shading, while MeshMatcapMaterial works for sculpting previews without lights.

Which textures need SRGBColorSpace in Three.js?▼

Only diffuse, emissive, light, and environment color textures should use SRGBColorSpace. Data textures like normalMap, roughnessMap, metalnessMap, aoMap, and bumpMap must stay at NoColorSpace, otherwise lighting calculations become corrupted.

Why is my Three.js texture not tiling with repeat?▼

Texture repeat values above (1, 1) have no effect with the default ClampToEdgeWrapping, which stretches edge pixels instead. Set wrapS and wrapT to RepeatWrapping or MirroredRepeatWrapping before assigning repeat values.

Why is my material opacity not working in Three.js?▼

The opacity property is silently ignored unless transparent is set to true on the material. Always pair opacity values below 1 with transparent: true so the renderer enables alpha blending.

How do I prevent GPU memory leaks when removing Three.js objects?▼

Call geometry.dispose() and material.dispose() before removing meshes, and iterate material properties to dispose every texture. scene.remove() only detaches the object from the graph and never frees GPU-side resources.

When should I not use MeshPhysicalMaterial?▼

Avoid MeshPhysicalMaterial when MeshStandardMaterial suffices, because it compiles a significantly larger shader with extra GPU overhead. Reserve it for clearcoat, transmission, sheen, iridescence, anisotropy, or dispersion effects.

Related Skills

Explore More Software Engineering Skills→
mmdonohuemmdonohue
1

threejs-textures

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

Community
Intermediate
TenBeltzTenBeltz

threejs-webgl

Create interactive 3D scenes with Three.js using WebGL rendering.

Official
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-errors-performance

Diagnose Three.js performance issues and memory leaks in WebGL scenes.

Official
Advanced
utsavm81098utsavm81098

r3f-shaders

Create and apply GLSL shader materials in React Three Fiber.

Community
Advanced