Threejs Materials
Pick and tune Three.js material types (PBR, phong, shaders) when styling 3D meshes in a web or agent-assisted scene.
Overview
threejs-materials is an agent skill for the Build phase that guides Three.js material choice, PBR properties, textures, custom shaders, and material performance tuning.
Install
npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-materialsWhat is this skill?
- Covers nine material types with a comparison table (basic, Lambert, Phong, Standard, Physical, Toon, Normal, Depth, Shad
- Documents MeshStandardMaterial and MeshPhysicalMaterial PBR knobs (roughness, metalness, clearcoat, transmission)
- Guidance for custom ShaderMaterial and material performance optimization
- Quick-start snippet for importing THREE and attaching MeshStandardMaterial to a mesh
- Nine material types in the overview comparison table
Adoption & trust: 3.8k installs on skills.sh; 2.3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have geometry in the scene but surfaces look flat, unrealistic, or slow because you are unsure which Three.js material and properties to use.
Who is it for?
Solo builders adding or refining realistic or stylized surfaces in a Three.js web project with an coding agent.
Skip if: Teams that only need scene setup, loaders, or animation rigs without changing how meshes are shaded.
When should I use this skill?
Styling meshes, working with textures, creating custom shaders, or optimizing material performance in Three.js.
What do I get? / Deliverables
After applying the skill, meshes use the right material type and parameters for the lighting model and performance budget you need.
- Chosen material type with documented property values
- Shader or texture wiring aligned to the scene’s lighting model
Recommended Skills
Journey fit
Materials sit in the mesh-rendering layer of a Three.js product, which solo builders implement during the Build phase on the frontend. Styling meshes, textures, and GLSL-backed materials is core web 3D frontend work, not shipping or growth tooling.
How it compares
Use for material and shader decisions inside Three.js, not as a general WebGL tutorial or a 3D modeling DCC workflow.
Common Questions / FAQ
Who is threejs-materials for?
Indie and solo developers building Three.js experiences who want agent help choosing PBR vs basic materials, textures, and custom GLSL without trial-and-error in chat.
When should I use threejs-materials?
During Build when styling meshes, wiring textures, authoring ShaderMaterial, or optimizing draw-call-heavy material setups in a Three.js app.
Is threejs-materials safe to install?
Review the Security Audits panel on this skill’s Prism page and inspect the SKILL.md source in the repo before enabling it in your agent.
SKILL.md
READMESKILL.md - Threejs Materials
# Three.js Materials ## Quick Start ```javascript import * as THREE from "three"; // PBR material (recommended for realistic rendering) const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5, }); const mesh = new THREE.Mesh(geometry, material); ``` ## 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. ```javascript const material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5, side: THREE.DoubleSide, // FrontSide, BackSide, DoubleSide wireframe: false, map: texture, // Color/diffuse texture alphaMap: alphaTexture, // Transparency texture envMap: envTexture, // Reflection texture reflectivity: 1, // Env map intensity fog: true, // Affected by scene fog }); ``` ## MeshLambertMaterial Diffuse-only lighting. Fast, no specular highlights. ```javascript const material = new THREE.MeshLambertMaterial({ color: 0x00ff00, emissive: 0x111111, // Self-illumination color emissiveIntensity: 1, map: texture, emissiveMap: emissiveTexture, envMap: envTexture, reflectivity: 0.5, }); ``` ## MeshPhongMaterial Specular highlights. Good for shiny, plastic-like surfaces. ```javascript const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, specular: 0xffffff, // Highlight color shininess: 100, // Highlight sharpness (0-1000) emissive: 0x000000, flatShading: false, // Flat vs smooth shading map: texture, specularMap: specTexture, // Per-pixel shininess normalMap: normalTexture, normalScale: new THREE.Vector2(1, 1), bumpMap: bumpTexture, bumpScale: 1, displacementMap: dispTexture, displacementScale: 1, }); ``` ## MeshStandardMaterial (PBR) Physically-based rendering. Recommended for realistic results. ```javascript const material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.5, // 0 = mirror, 1 = diffuse metalness: 0.0, // 0 = dielectric, 1 = metal // Textures map: colorTexture, // Albedo/base color roughnessMap: roughTexture, // Per-pixel roughness metalnessMap: metalTexture, // Per-pixel metalness normalMap: normalTexture, // Surface detail normalScale: new THREE.Vector2(1, 1), aoMap: aoTexture, // Ambient occlusion (uses uv2!) aoMapIntensity: 1, displacementMap: dispTexture, // Vertex displacement displacementScale: 0.1, displacementBias: 0, // Emissive emissive: 0x000000, emissiveIntensity: 1, emissiveMap: emissiveTexture, // Environment envMap: envTexture, envMapIntensity: 1, // Other flatShading: false, wireframe: false, fog: true, }); // Note: aoMap requires second UV channel geometry.setAttribute("uv2", geometry.attributes