Search⌘ K
AI Features

Advanced Materials: Standard, Physical, and Shadow

Explore how to apply and customize advanced materials in Three.js, including MeshStandardMaterial for metallic and rough surfaces, MeshPhysicalMaterial for enhanced reflectivity, and ShadowMaterial for rendering shadows. This lesson helps you understand material properties and adjust them dynamically to achieve realistic visual effects in 3D graphics.

The THREE.MeshStandardMaterial 

THREE.MeshStandardMaterial is a material that takes a physics approach to determine how to react to the lighting in the scene. It is a great material for shiny and metal-like materials, and provides several properties we can use to configure this material: 

  • metalness: This property determines how metal-like a material is. Non-metallic materials should use a value of 0, whereas metallic materials should use a value close to 1. The default is 0.5.

  • roughness: We can also set how rough the material is. This determines how the light that hits this material is diffused. The default is 0.5. A value of 0 is a mirror-like reflection, whereas a value of 1 diffuses ...