Metalness and Roughness Maps

Explore how to enhance the realism of 3D materials in Three.js by using metalness and roughness maps. Learn to control material properties for shiny or rough surfaces by applying textures that affect how light interacts with each part of a mesh, improving the visual complexity of your scenes.

We'll cover the following...

Create more realistic materials
Example: Texture metalness map
Example: Texture roughness map

Create more realistic materials

When discussing the materials available in Three.js, we mentioned that a good default material to use is THREE.MeshStandardMaterial. We can use this to create shiny, metal-like materials but also to apply roughness to make the mesh look more like wood or plastic. By using the metalness and roughness properties, we can configure the material to represent what we want.

Aside from these two properties, we can also configure these properties by using a texture. So, if we have a rough object and we want to specify that a certain part of that object is shiny, we can set the metalnessMap property ...

1.Introduction to the Course

2.Part 1: Getting Up and Running

3.Creating the First 3D Scene with Three.js

4.The Basic Components That Make Up a Three.js Application

5.Working with Light Sources in Three.js

6.Part 2: Working with the Three.js Core Components

7.Working with Three.js Materials

8.Learning to Work with Geometries

9.Exploring Advanced Geometries

10.Points and Sprites

11.Part 3: Particle Clouds, Loading, and Animating Models

12.Creating and Loading Advanced Meshes and Geometries

13.Animation and Moving the Camera

14.Loading and Working with Textures

15.Part 4: Post-Processing, Physics, and Sounds

16.Render Post-Processing

17.Adding Physics and Sounds to Our Scene

18.Working with Blender and Three.js

19.Three.js: Together with React, TypeScript, and WebXR

20.Conclusion

21.Appendix

Metalness and Roughness Maps

Create more realistic materials