threejs-materials

Consolidate Three.js material options into a reference guide for mesh styling.

Updated Mar 25, 2026

Search Tags:#rendering #webgl #threejs #shader #materials #pbr

Ready to run

npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-materials-dogmandcl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/dogmandcl/Claude-Threejs-Skills/tree/main/skills/threejs-materials
Command: npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-materials-dogmandcl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js projects often require rapid access to a variety of material types and their configurations. This guide consolidates options, textures, and shader approaches to streamline styling, iteration, and performance tuning for meshes.

Core Features & Use Cases

Comprehensive overview of material types (MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, MeshNormalMaterial, MeshDepthMaterial, ShaderMaterial, RawShaderMaterial)
Environment maps, textures, emissive, transparency, and advanced properties
Practical code examples and usage scenarios for design, performance, and prototyping

Quick Start

Apply Three.js materials to a mesh to achieve a range of looks from basic color to advanced PBR shading.

Frequently Asked Questions about threejs-materials

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

FAQPage Schema

What is the difference between MeshStandardMaterial and MeshPhongMaterial in Three.js?▼

This guide compares Three.js MeshStandardMaterial PBR shading against MeshPhongMaterial simpler specular highlights, detailing texture configuration, env maps, and performance tuning to help choose appropriate materials for your mesh styling needs.

How do I configure environment maps and transparency for Three.js materials?▼

You configure Three.js material transparency and environment maps by adjusting their advanced properties. This reference provides practical code examples for setting env maps, emissive textures, and transparency across PBR and basic material types.

When should I use ShaderMaterial instead of MeshBasicMaterial in Three.js?▼

Use Three.js ShaderMaterial for custom WebGL rendering logic and MeshBasicMaterial for simple unlit colors. This guide covers both, explaining when to apply shader approaches versus basic materials for optimal styling and performance.

How do I apply PBR textures to a mesh using Three.js?▼

Apply PBR textures to a Three.js mesh by configuring MeshStandardMaterial properties with image maps. This guide outlines practical usage scenarios and code examples for setting up textures, lighting, and advanced features.

Can I use Three.js MeshPhysicalMaterial for advanced rendering features?▼

Yes, Three.js MeshPhysicalMaterial supports advanced PBR properties like clearcoat and transmission. This reference details configuring MeshPhysicalMaterial alongside other material types to achieve specific visual effects and performance profiles.