Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

Starting with a simple mesh

In this section, we'll look at a few simple materials: MeshBasicMaterial, MeshDepthMaterial, MeshNormalMaterial, and MeshFaceMaterial. We start with MeshBasicMaterial.

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

• You can pass in the arguments in the constructor as a parameters object, like this:

  var material = new THREE.MeshBasicMaterial(
  {
    color: 0xff0000, name: 'material-1', opacity: 0.5, transparency: true, ...
  });

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

  var material = new THREE.MeshBasicMaterial(); material.color = new THREE.Color(0xff0000); material.name ...