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.
Best for Three.js developers working…Works with GitHubLow risk
⌘source
- author
@sickn33- language
- Python
★34kstars
5.6kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Provides quick-start code snippet for PBR material creation
- ·Lists common Three.js material types with use cases and lighting requirements
- ·Covers material properties like color, roughness, and metalness
- ·Supports custom shader creation via ShaderMaterial
Use Cases
- →Styling 3D meshes with different visual properties
- →Applying textures to 3D objects
- →Creating custom visual effects with GLSL shaders
- →Optimizing material performance for different rendering needs
Best for
- ✓Three.js developers working on 3D visualization
- ✓Teams implementing realistic PBR rendering
Not ideal for
- !Complete beginners to Three.js or 3D graphics
FAQs
name
threejs-materials
description
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
risk:unknown
source:community
Three.js Materials
Quick Start
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 |
$install
1-click copynpx skills add sickn33/antigravity-awesome-skills --skill threejs-materialsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.