skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

Configure Three.js materials including PBR, phong, toon, and custom GLSL shaders.

Updated Jun 10, 2026
Search Tags:#textures#webgl#three.js#materials#pbr#3d rendering#glsl shaders
One-click install
npx skills add https://github.com/ayofemiade/m3ta-dev --skill threejs-materials-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/ayofemiade/m3ta-dev/tree/main/.claude/skills/threejs-materials
Command: npx skills add https://github.com/ayofemiade/m3ta-dev --skill threejs-materials-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Choosing and configuring the right Three.js material is confusing because each material type has different lighting behavior, texture maps, and performance costs, and mistakes lead to flat visuals or slow rendering. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, ShaderMaterial, and more with working code examples. - Advanced PBR Effects: Provides ready configurations for glass (transmission), car paint (clearcoat), fabric (sheen), iridescence, and anisotropy using MeshPhysicalMaterial. - Custom Shaders: Includes ShaderMaterial and RawShaderMaterial templates with built-in uniform documentation for writing GLSL vertex and fragment shaders. - Use Case: When building a product configurator, use the glass and car paint examples to create realistic transparent and metallic surfaces, then apply the performance tips to reuse materials and reduce draw calls. ## Quick Start Ask the AI to create a realistic glass material in Three.js using MeshPhysicalMaterial with transmission and refraction settings.

Frequently Asked Questions about threejs-materials

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

FAQPage Schema
How do I create a glass material in Three.js?▼

Use MeshPhysicalMaterial with transmission set to 1, roughness and metalness at 0, thickness around 0.5, and ior at 1.5. This produces realistic refraction for glass and water surfaces.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

MeshPhysicalMaterial extends MeshStandardMaterial with advanced features like clearcoat, transmission, sheen, iridescence, and anisotropy. Use MeshStandardMaterial for general PBR work and Physical for effects like car paint or glass.

Which Three.js material should I use for best performance?▼

MeshBasicMaterial is fastest since it skips lighting calculations, followed by Lambert, Phong, Standard, then Physical. Choose the simplest material that meets your visual requirements and reuse material instances to batch draw calls.

Why is my Three.js aoMap not working?▼

The aoMap requires a second UV channel (uv2) on the geometry. Copy the existing uv attribute with geometry.setAttribute("uv2", geometry.attributes.uv) to make ambient occlusion maps render correctly.

How do I write a custom shader in Three.js?▼

Use ShaderMaterial with uniforms, a vertexShader, and a fragmentShader written in GLSL. Three.js automatically provides built-in uniforms like modelViewMatrix and projectionMatrix, plus position, normal, and uv attributes.

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

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

Official
Advanced
StonelukasStonelukas

threejs

Create interactive 3D web apps with Three.js for WebGL/WebGPU rendering.

Community
Advanced
brunoolfbrunoolf

threejs-lighting

Configures Three.js lights, shadows, and image-based environment lighting for 3D scenes.

Community
Intermediate
imanlangaranimanlangaran
1

r3f-shaders

Create custom GLSL shader materials and effects in React Three Fiber applications.

Community
Intermediate