skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

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

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

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, plus points, lines, and debug materials with full property listings. - Custom Shaders: Provides ShaderMaterial and RawShaderMaterial templates with built-in uniforms, attributes, and GLSL examples. - Use Case: When building a product configurator, use the glass and car paint MeshPhysicalMaterial examples to set up transmission, clearcoat, and iridescence, then apply HDR environment maps for realistic 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 HDR environment map via scene.environment produces realistic refraction and reflections.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

MeshPhysicalMaterial extends MeshStandardMaterial with clearcoat, transmission, sheen, iridescence, and anisotropy properties. 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 Lambert, Phong, Standard, then Physical. Reusing materials across meshes also enables batched draw calls and reduces overhead.

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, plus position, normal, and uv attributes.

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

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

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

Official
Advanced
ratnesh-mauryaratnesh-maurya
1

threejs-skills

Create interactive 3D scenes, animations, and WebGL visualizations using Three.js.

Community
Intermediate
yogaprasetya22yogaprasetya22

threejs-textures

Configure Three.js textures for color, UV mapping, and environment reflections.

Community
Advanced
openaiopenai
5.3k

react-three-fiber-game

Build React-hosted 3D browser games using React Three Fiber and pmndrs libraries.

Official
Intermediate