- Three.js Tutorial
- Three.js - Home
- Three.js - Introduction
- Three.js - Installation
- Three.js - Hello Cube App
- Three.js - Renderer and Responsiveness
- Three.js - Responsive Design
- Three.js - Debug and Stats
- Three.js - Cameras
- Three.js - Controls
- Three.js - Lights & Shadows
- Three.js - Geometries
- Three.js - Materials
- Three.js - Textures
- Three.js - Drawing Lines
- Three.js - Animations
- Three.js - Creating Text
- Three.js - Loading 3D Models
- Three.js - Libraries and Plugins
- Three.js Useful Resources
- Three.js - Quick Guide
- Three.js - Useful Resources
- Three.js - Discussion
Three.js - Materials
Material is like the skin of the object. It defines the outer appearance of the geometry. Three.js provides many materials to work. We should choose the type of material according to our needs. In this chapter, we'll discuss the most commonly used materials in Three.js.
| Sr.No | Materials & Description |
|---|---|
| 1 |
It is the very basic material in Three.js. |
| 2 |
It uses the distance from the camera to determine how to color your mesh in a greyscale. |
| 3 |
This material uses the magnitude of the x/y/z values of the faces’ normal vectors to calculate and set the red/green/blue values of the colors displayed on the face. |
| 4 |
You can use this material to create dull-looking, non-shiny surfaces. |
| 5 |
This material is similar to MeshLambertMaterial but can create more shiny surfaces. |
| 6 |
It is similar but gives a more accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial. Instead of shininess, it has two properties: roughness and metalness. |
| 7 |
It is pretty similar to MeshStandardMaterial. You can control the reflectivity of the material. |
| 8 |
Until now, while creating a Mesh, you added a single material to it. |