skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

Configure Three.js materials including PBR, Phong, toon, and custom GLSL shaders.

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

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 visuals or slow 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. - Custom Shaders: Provides ShaderMaterial and RawShaderMaterial templates with built-in uniforms, attributes, and GLSL vertex/fragment examples. - Use Case: When building a product configurator, use MeshPhysicalMaterial with clearcoat for car paint or transmission and IOR for realistic glass, then apply an HDR environment map via RGBELoader for accurate reflections. ## Quick Start Ask the AI to 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 realistic 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 so the transmission has something to refract.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

MeshPhysicalMaterial extends MeshStandardMaterial with clearcoat, transmission, sheen, iridescence, and anisotropy. Use MeshStandardMaterial for general PBR surfaces and MeshPhysicalMaterial for glass, car paint, fabric, or brushed metal.

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

MeshBasicMaterial is fastest since it skips lighting, followed by Lambert, Phong, Standard, then Physical. Reuse materials across meshes to enable batched 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) before the ambient occlusion map will render.

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

Set values on material.uniforms, for example material.uniforms.time.value = clock.getElapsedTime() inside the animation loop. Declare the uniform in both the uniforms object and the GLSL shader code.

When should I call material.needsUpdate in Three.js?▼

Set material.needsUpdate = true when changing flat shading, swapping textures, toggling transparency, or modifying shader code. Simple property changes like color or opacity do not require it.

Related Skills

Explore More Software Engineering Skills→
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-syntax-loaders

Load 3D models and textures in Three.js with glTF, FBX, OBJ, Draco, KTX2, and HDR support.

Community
Intermediate
BoneTheDeveloperBoneTheDeveloper

threejs

Create and render interactive 3D scenes in browsers using Three.js.

Community
Advanced
yogaprasetya22yogaprasetya22

threejs-lighting

Configure Three.js lighting and shadows for realistic scenes.

Community
Basic
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate