skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-materials

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

Updated May 5, 2026
Search Tags:#textures#shaders#webgl#three.js#materials#pbr#3d rendering
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill threejs-materials-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-materials
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/threejs-materials
Command: npx skills add https://github.com/josippapez/ai-setup --skill threejs-materials-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Choosing and configuring the right Three.js material requires knowing dozens of properties, texture map slots, and trade-offs between realism and performance, which slows down 3D scene development. ## Core Features & Use Cases - Material Type Reference: Covers MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, MeshToonMaterial, and more with complete property examples. - Custom Shaders: Provides ShaderMaterial and RawShaderMaterial templates with built-in uniforms, attributes, and GLSL snippets. - Use Case: When building a product configurator, use the MeshPhysicalMaterial examples to create realistic glass with transmission and car paint with clearcoat, 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.

Which Three.js material should I use for realistic rendering?▼

MeshStandardMaterial is the recommended choice for realistic PBR rendering, supporting roughness, metalness, normal maps, and ambient occlusion. For advanced effects like clearcoat or transmission, use MeshPhysicalMaterial.

What is the difference between ShaderMaterial and RawShaderMaterial in Three.js?▼

ShaderMaterial automatically provides built-in uniforms like projectionMatrix and attributes like position and uv. RawShaderMaterial gives full control with no built-ins, requiring you to declare all uniforms, attributes, and precision manually.

Why does my Three.js aoMap not work?▼

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 renders correctly.

How do I improve Three.js material performance?▼

Reuse materials so draw calls can be batched, prefer alphaTest over transparency when possible, and choose simpler materials since Basic is fastest and Physical is slowest. Dispose of materials when no longer needed.

Related Skills

Explore More Design & Creative Skills→
TenBeltzTenBeltz

threejs-webgl

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

Official
Advanced
StonelukasStonelukas

threejs

Create interactive 3D web apps with Three.js for WebGL/WebGPU rendering.

Community
Advanced
brunoolfbrunoolf

threejs-lighting

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

Community
Intermediate
UniquecreteUniquecrete

threejs-shaders

Develop custom Three.js GLSL shaders for ShaderMaterial and RawShaderMaterial workflows.

Community
Intermediate