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 ...