Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Starting with Simple Materials

Explore how to create and configure simple materials in Three.js, focusing on MeshBasicMaterial and its properties such as color, wireframe, and vertexColors. Understand how these materials affect rendering without lighting and enhance model appearance for 3D web graphics.

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: 

Javascript (babel-node-es2024)
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: 

Javascript (babel-node-es2024)
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 ...