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

threejs-materials

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

Updated Jun 30, 2026
Search Tags:#textures#shaders#webgl#three.js#3D rendering#Materials#PBR
One-click install
npx skills add https://github.com/ayofemiade/cleva --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/cleva/tree/main/.claude/skills/threejs-materials
Command: npx skills add https://github.com/ayofemiade/cleva --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-looking scenes or slow rendering. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, ShaderMaterial, and more with working code examples. - PBR and Advanced Effects: Provides ready-to-adapt configurations for glass (transmission), car paint (clearcoat), fabric sheen, iridescence, and anisotropy using MeshPhysicalMaterial. - Custom Shaders and Performance: Includes ShaderMaterial and RawShaderMaterial templates with built-in uniform documentation, plus material pooling and disposal patterns for performance. - Use Case: You are building a product configurator and need realistic glass and metallic paint on a 3D model. Use this Skill to get the correct MeshPhysicalMaterial settings with transmission, clearcoat, and environment maps. ## Quick Start Create a realistic glass material in Three.js using MeshPhysicalMaterial with transmission and an HDR environment map.

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 to the scene so the glass has something to refract and reflect.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

MeshPhysicalMaterial extends MeshStandardMaterial with advanced features like clearcoat, transmission, sheen, iridescence, and anisotropy. Use MeshStandardMaterial for typical PBR surfaces and MeshPhysicalMaterial for glass, car paint, or fabric.

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. Reuse materials across meshes to batch draw calls and prefer alphaTest over transparency when possible.

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) so ambient occlusion renders correctly.

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

Set the uniform value directly each frame, for example material.uniforms.time.value = clock.getElapsedTime(). Define uniforms in the material constructor and reference them in your GLSL vertex or fragment shader code.

Related Skills

Explore More Software Engineering Skills→
CloudAI-XCloudAI-X
2.9k

threejs-loaders

Load GLTF, GLB, OBJ, FBX, STL, PLY, and texture assets in Three.js.

Community
Intermediate
jonathanbelolojonathanbelolo
3

composable-svelte-graphics

Create declarative 3D scenes in Svelte with WebGPU/WebGL rendering.

Community
Advanced
X-manistX-manist

threejs-materials

Configure Three.js materials including PBR, shader, and toon materials for mesh styling.

Community
Intermediate
MonichreMonichre

threejs-shaders

Integrate custom GLSL shaders into Three.js using ShaderMaterial and RawShaderMaterial.

Community
Intermediate