Material Gallery
Light & surfaces
Lesson 6 of 15
Isolate roughness and metalness using identical spheres under identical lighting.
Compare a controlled 3 × 3 material grid: roughness increases left to right and metalness increases bottom to top.
How this scene works
Every sphere shares the same geometry, base color, scale, and environment. Only roughness and metalness vary, so the comparison is not confused by different shapes or colors. Columns use roughness 0.1, 0.5, and 0.9; rows from bottom to top use metalness 0, 0.5, and 1. Metals reflect their environment instead of showing the same diffuse response as nonmetals. A procedural cube environment supplies visible reflections. The spheres cast actual shadows onto the receiving floor.
Material Gallery
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Set every sphere to metalness 1, keeping the three roughness columns. Then remove scene.environment and explain why the metal surfaces become much darker.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
