Explore Three.js MeshToonMaterial properties including gradient maps, colors, metalness, and roughness. Perfect for learning cel-shading and cartoon rendering!
Tip: Try different presets to see dramatic variations in toon shading styles.
🎨 Toon Material Controls
Classic Toon
Traditional cel-shaded look with 3 steps
Pastel Dream
Soft, desaturated colors with smooth gradients
Vibrant Bold
High saturation with sharp 2-step gradient
Metallic Toon
High metalness for reflective surfaces
Rough Matte
High roughness for non-reflective surfaces
Emissive Glow
Glowing effect with high emissive intensity
Subtle Pastel
Very soft colors with 5-step gradient
High Contrast
Dramatic 2-step shading with strong lights
Smooth Gradient
No gradient map for smooth transitions
📐 Shape & Gradient
🎨 Colors & Material
0.80
0.00
0.00
💡 Lighting
0.50
1.00
🎓 Understanding Toon Materials
What is Toon Shading?
Toon shading (also called cel-shading) is a non-photorealistic rendering technique that makes 3D objects look like hand-drawn cartoons or anime. It uses distinct color bands instead of smooth gradients.
Gradient Map
The gradientMap is the most important property for toon materials. It controls how light intensity translates to color bands:
2 Steps: Creates a hard, comic book style with just light and shadow
3 Steps: Classic cel-shading with highlight, midtone, and shadow
5+ Steps: Softer toon look with more gradual transitions
None: Removes the toon effect, creates smooth shading
Creating Pastel Looks
To achieve soft, pastel colors:
Use desaturated colors (pinks, light blues, lavenders)
Increase ambient light (0.7-1.0)
Use 5+ step gradient maps for softer transitions
Lower directional light intensity
Add subtle emissive glow
Creating Vibrant/Bold Looks
For strong, punchy colors:
Use fully saturated colors (pure red, blue, green)
Use 2-3 step gradient maps for hard edges
Higher directional light intensity (1.5-2.0)
Lower ambient light for more contrast
Roughness
Controls surface smoothness:
0.0: Very smooth, glossy surface (mirror-like)
0.5: Semi-glossy (plastic-like)
1.0: Completely rough, matte surface
Metalness
Controls metallic appearance:
0.0: Non-metallic (plastic, rubber, wood)
0.5: Semi-metallic
1.0: Fully metallic (reflects environment)
Emissive
Makes objects appear to glow:
Set emissive color to add self-illumination
Increase intensity for stronger glow effect
Great for sci-fi or magical effects
Flat Shading
When enabled, each polygon face has a uniform color, creating a more angular, geometric look. Great for low-poly art styles!
💡 Pro Tips
Toon materials work best with strong directional lighting
Experiment with gradient steps - fewer steps = more stylized
Combine metalness and toon shading for unique effects