skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-materials

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

Updated Sep 1, 2026
Search Tags:#textures#webgl#three.js#materials#pbr#3d rendering#glsl shaders
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-materials-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-materials
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-materials-zamansepeti43

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. This Skill provides ready-to-use configurations and property references for every built-in Three.js material plus custom shader materials. ## Core Features & Use Cases - Material Type Selection: Compare MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, and more with a lighting and use-case matrix. - PBR and Advanced Effects: Configure roughness, metalness, clearcoat, transmission, sheen, iridescence, and anisotropy for realistic glass, car paint, and fabric surfaces. - Custom Shaders: Write ShaderMaterial and RawShaderMaterial GLSL code with correct uniforms, built-in attributes, and animation updates. - Use Case: You need a transparent glass material for a product viewer. Use the MeshPhysicalMaterial transmission example with ior and thickness settings, then apply an HDR environment map 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, ior around 1.5, and a thickness value for refraction volume. Add an environment map to the scene for realistic reflections and refractions.

What is the difference between MeshStandardMaterial and MeshPhysicalMaterial?▼

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

Which Three.js material should I use for better 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.

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 to uv2 using geometry.setAttribute before the ambient occlusion map will render correctly.

When should I use RawShaderMaterial instead of ShaderMaterial?▼

Use RawShaderMaterial when you need full control without Three.js built-in uniforms and attributes, such as porting existing GLSL code. You must declare all matrices, precision, and attributes manually.

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

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

Official
Advanced
fanguyunfanguyun

threejs-postprocessing

Configure bloom and depth-of-field post-processing effects in Three.js scenes.

Community
Intermediate
X-manistX-manist

threejs-materials

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

Community
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate