skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

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

Updated Jul 16, 2026
Search Tags:#textures#webgl#three.js#shader#materials#pbr#3d rendering
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-materials-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-materials
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-materials-x-manist

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 misconfiguration leads to broken rendering or poor frame rates. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, ShaderMaterial, and more with complete property examples. - Advanced PBR Effects: Provides ready-to-adapt configurations for glass (transmission), car paint (clearcoat), fabric (sheen), iridescence, and anisotropy. - Custom Shaders: Includes ShaderMaterial and RawShaderMaterial templates with built-in uniform documentation and GLSL examples. - Use Case: When building a 3D product viewer, use this Skill to create a realistic glass material with transmission and IOR settings, then apply an HDR environment map for accurate reflections. ## Quick Start Ask the AI to create a Three.js glass material 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. Adding an environment map via scene.environment produces realistic refraction and reflections.

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 effects.

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

MeshBasicMaterial is fastest since it skips lighting calculations, followed by MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, and MeshPhysicalMaterial. Reusing materials and avoiding transparency also reduces draw call and sorting overhead.

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

The aoMap requires a second UV channel on the geometry. Copy the existing uv attribute to uv2 using geometry.setAttribute('uv2', geometry.attributes.uv) so ambient occlusion renders correctly.

How do I write a custom shader material 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, while RawShaderMaterial requires declaring everything manually.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

threejs-fundamentals

Bootstrap Three.js scenes with camera, renderer, and Object3D hierarchies.

Community
Intermediate
LrmdomLrmdom

mrgoonie-threejs

Develop Three.js-based 3D web applications with WebGL and WebGPU rendering.

Community
Intermediate
ayofemiadeayofemiade

threejs-textures

Implements Three.js texture loading, UV mapping, environment maps, and render targets.

Community
Intermediate
UniquecreteUniquecrete

threejs-shaders

Develop custom Three.js GLSL shaders for ShaderMaterial and RawShaderMaterial workflows.

Community
Intermediate