skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-materials

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

2|10|Updated Jul 28, 2026
Search Tags:#glsl#shaders#webgl#three.js#3D rendering#Materials#PBR
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-materials-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-materials
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-materials-kodingvibes

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 slots, 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, and more, with a comparison table of lighting support and use cases. - Advanced PBR Effects: Provides ready-to-adapt configurations for glass (transmission), car paint (clearcoat), fabric (sheen), iridescence, and anisotropy using MeshPhysicalMaterial. - Custom Shaders: Includes ShaderMaterial and RawShaderMaterial templates with built-in uniform documentation for writing custom GLSL vertex and fragment shaders. - Use Case: When building a 3D product viewer, use the glass and car paint examples to create realistic transparent and metallic surfaces, 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 and transparency for glass or water surfaces.

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

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.

How do I write a custom shader 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 is my aoMap not working in Three.js?▼

The aoMap requires a second UV channel on the geometry. Set it by copying the existing uv attribute to uv2 with geometry.setAttribute("uv2", geometry.attributes.uv) before the ambient occlusion map takes effect.

When should I use RawShaderMaterial instead of ShaderMaterial?▼

Use RawShaderMaterial when you need full control over the shader with no built-in uniforms or attributes injected by Three.js. You must declare precision, matrices, and attributes manually in your GLSL code.

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
brunoolfbrunoolf

threejs-lighting

Configures Three.js lights, shadows, and image-based environment lighting for 3D scenes.

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

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate