Agent skill · design visual · cloudai-x
threejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
Why this skill is useful
Provides detailed examples and properties for various Three.js materials that enhance the AI's ability to generate realistic 3D rendering code.
What it needs
About 6k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
Three.js Materials Quick Start Material Types Overview Material Use Case Lighting -------------------- ------------------------------------- ------------------ MeshBasicMaterial Unlit, flat colors, wireframes No MeshLambertMaterial Matte surfaces, performance Yes (diffuse only) MeshPhongMaterial Shiny surfaces, specular highlights Yes MeshStandardMaterial PBR, realistic materials Yes (PBR) MeshPhysicalMaterial Advanced PBR, clearcoat, transmission Yes (PBR+) MeshToonMaterial Cel-shaded, cartoon look Yes (toon) MeshNormalMaterial Debug normals No MeshDepthMaterial Depth visualization No ShaderMaterial Custom GLSL shaders Custom RawShaderMaterial Full shader control Custom MeshBasicMaterial No lighting calculations. Fast, always visible. MeshLambertMaterial Diffuse-only lighting. Fast, no specular highlights. MeshPhongMaterial Specular highlights. Good for shiny, plastic-like surfaces. MeshStandardMaterial (PBR) Physically-based rendering. Recommended for realistic results. MeshPhysicalMaterial (Advanced PBR) Extends MeshStandardMaterial with advanced features. Glass Material Example Car Paint Example MeshToonMaterial Cel-shaded cartoon look. MeshNormalMaterial Visualize surface normals. Useful for debugging. MeshDepthMaterial Render depth values. Used for shadow maps, DOF effects. PointsMaterial For point clouds. LineBasicMaterial & LineDashedMaterial ShaderMaterial Custom GLSL shaders with Three.js uniforms. Built-in Uniforms (auto-provided) RawShaderMaterial Full control - no built-in uniforms/attributes. Common Material Properties All materials share these base properties: Multiple Materials Environment Maps Material Cloning and Modification Performance Tips 1. Reuse materials: Same material = batched draw calls 2. Avoid transparent when possible: Transparent materials require sorting 3. Use alphaTest instead of transparency: When applicable, faster 4. Choose simpler materials: Basic > Lambert > Phong > Standard > Physical 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-materials