Learn Three.js for 3D Computer Graphics/

...

/

Properties of Materials in Three.js

Properties of Materials in Three.js

Learn about the basic, blending, and advanced properties of materials in Three.js.

We'll cover the following...

Basic properties

The basic properties of the THREE.Material object are listed here (we will see these properties in action in the THREE.MeshBasicMaterial): 

  • id: This is used to identify a material and is assigned when we create a material. This starts at 0 for the first material and is increased by 1 for each additional material that is created.

  • uuid: This is a uniquely generated ID and is used internally.

  • name: We can assign a name to a material with this property. This can be used for debugging purposes.

  • opacity: This defines how transparent an object is. Use this together with the transparent property. The range of this property is from 0 to 1.

  • transparent: If this is set to true, Three.js will render this object with the set opacity. If this is set to false, the object won’t be transparent, just more lightly colored. This property should also be set to true if we use a texture that uses an alpha (transparency) channel.

  • visible: This defines whether this material is visible. If we set this to false, we won’t see the object in the scene.

  • side: With this property, we can define to which side of the geometry a ...