Learn Three.js for 3D Computer Graphics/

...

/

Starting with Simple Materials

Starting with Simple Materials

Learn how to configure simple materials and use MeshBasicMaterial in Three.js.

We'll cover the following...

Configuring the simple materials

We’ll look at a few simple materials: MeshBasicMaterial, MeshDepthMaterial, and MeshNormalMaterial. 

Before we look into the properties of these materials, here’s a quick note on how we can pass in properties to configure the materials. There are two options: 

  • We can pass in the arguments in the constructor as a parameter object, like this: 

Press + to interact
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    name: 'material-1',
    opacity: 0.5,
    transparent: true,
    ...
})

  • Alternatively, we can create an instance and set the properties individually, like this: 

Press + to interact
const material = new THREE.MeshBasicMaterial();
material.color = new THREE.Color(0xff0000);
material.name = 'material-1'; material.opacity = 0.5;
material.transparent = true;

Usually, the best way is to use the constructor if we know all the properties’ values while creating the material. The arguments used in both of these styles use the same format. The only exception to this rule is the color property. In the first style, we can just pass in the hex value and Three.js will create a THREE.Color object itself. In the ...