Now that we understand the basics of materials, let's dive into some of the more advanced properties that can make our 3D objects incredibly realistic and visually interesting. These properties allow us to control how light interacts with surfaces, creating effects like shininess, roughness, and even transparency.
One of the most fundamental advanced material properties is shininess. This value determines how sharp or blurry the reflections on a material are. A high shininess value will result in sharp, mirror-like reflections, while a low value will create a more diffused, matte reflection. This is crucial for distinguishing between materials like polished metal (high shininess) and rough wood (low shininess).
const shinyMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000,
shininess: 100 // A higher value for sharper reflections
});
const matteMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
shininess: 10 // A lower value for diffused reflections
});Related to shininess is the concept of specular. The specular color determines the color of the highlight or reflection itself. For most realistic materials, the specular color is a shade of white or gray. However, you can experiment with colored specular highlights to create stylized or abstract effects. For example, a metallic material might have a specular color that matches its base color.
const metallicMaterial = new THREE.MeshStandardMaterial({
color: 0xcccccc, // Base color of the metal
shininess: 50,
specular: 0xaaaaaa // The color of the reflection highlight
});Transparency is another powerful property. By adjusting the opacity property, you can make materials partially or fully transparent. An opacity of 1 is fully opaque, while an opacity of 0 is completely invisible. Values in between create see-through effects, perfect for glass or water. When using transparency, it's important to set transparent: true on the material.
const glassMaterial = new THREE.MeshStandardMaterial({
color: 0xADD8E6, // A light blue color for glass
opacity: 0.5, // Half transparent
transparent: true,
side: THREE.DoubleSide // Important for transparent objects
});