skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

Configure Three.js materials including PBR, toon, and custom GLSL shaders for mesh styling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Choosing and configuring the right Three.js material is confusing: each material type has different lighting behavior, texture slots, and performance costs, and misconfigured properties like aoMap UV channels or transmission settings silently break rendering. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, MeshNormalMaterial, MeshDepthMaterial, PointsMaterial, and line materials with full property examples. - Advanced PBR Recipes: Ready-made configurations for glass (transmission, IOR, thickness), car paint (clearcoat), sheen, iridescence, and anisotropy via MeshPhysicalMaterial. - Custom Shaders: ShaderMaterial and RawShaderMaterial templates with built-in uniform documentation and animation-loop uniform updates. - Use Case: When building a 3D product configurator, use the glass and car paint examples to create realistic materials, apply an HDR environment map via RGBELoader, and follow the performance tips to pool and reuse materials. ## Quick Start Ask the AI to create a realistic glass material with transmission and an HDR environment map for a Three.js scene.

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. Add an environment map via scene.environment for realistic refraction and reflections.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

MeshPhysicalMaterial extends MeshStandardMaterial with advanced features: clearcoat for car paint, transmission for glass, sheen for fabric, iridescence, and anisotropy for brushed metal. Use Standard for basic PBR and Physical when you need these effects.

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

Simpler materials render faster: MeshBasicMaterial is cheapest, followed by Lambert, Phong, Standard, then Physical. Reuse materials to enable batched draw calls, prefer alphaTest over transparency, and limit active lights.

Why is my aoMap not working in Three.js?▼

The aoMap requires a second UV channel (uv2) on the geometry. Copy the existing UV attribute with geometry.setAttribute('uv2', geometry.attributes.uv) before the ambient occlusion map will render.

How do I update ShaderMaterial uniforms in Three.js?▼

Set uniform values directly on the material, for example material.uniforms.time.value = clock.getElapsedTime() inside the animation loop. Declare the uniform in the uniforms object when creating the ShaderMaterial first.

When should I use RawShaderMaterial instead of ShaderMaterial?▼

Use RawShaderMaterial when you need full control with no built-in uniforms or attributes, requiring you to declare projectionMatrix, modelViewMatrix, and position attributes yourself. ShaderMaterial auto-provides these and suits most custom effects.

Related Skills

Explore More Software Engineering Skills→
shelbeelyshelbeely

threejs-fundamentals

Create Three.js scenes with cameras, renderers, meshes, and lighting.

Community
Intermediate
Immanuel-AristotleImmanuel-Aristotle

threejs-webgl

Build interactive 3D web scenes with Three.js.

Community
Advanced
yogaprasetya22yogaprasetya22

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Community
Basic
TenBeltzTenBeltz

react-three-fiber

Render declarative 3D scenes in React using JSX components mapped to Three.js objects.

Official
Advanced