skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-materials

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

1|Updated Aug 17, 2025
Search Tags:#glsl#shaders#webgl#three.js#materials#pbr#3d rendering
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-materials-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-materials
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-materials-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Choosing and configuring the right Three.js material is confusing given the many material types, texture map options, and performance trade-offs involved in styling 3D meshes. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, and more with usage guidance. - PBR and Advanced Effects: Provides ready-to-adapt configurations for glass (transmission), car paint (clearcoat), sheen, iridescence, and anisotropy. - Custom Shaders: Includes ShaderMaterial and RawShaderMaterial examples with GLSL vertex/fragment code and uniform management. - Use Case: When building a product configurator, use the MeshPhysicalMaterial glass and car paint examples to render realistic materials, 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 effects.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

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

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

Why does my aoMap not work 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) to make ambient occlusion maps render 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 auto-provides built-in uniforms like modelViewMatrix and projectionMatrix; update custom uniforms each frame via material.uniforms.

Related Skills

Explore More Software Engineering Skills→
shelbeelyshelbeely

threejs-fundamentals

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

Community
Intermediate
HsnSaboorHsnSaboor

3d-graphics

Develop interactive 3D web graphics with Three.js, WebGL, and WebGPU.

Community
Advanced
ElementTechElementTech
2

threejs-materials

Configure Three.js materials for shading, textures, and runtime performance.

Community
Intermediate
yogaprasetya22yogaprasetya22

react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Community
Intermediate