Intro :

Hello and welcome to my ThreeJS introduction. I won't insult you by going over the basics when there are superb online resources such as the Threejs online book or simply the documentation. Instead, I'll try to answer some questions I've been asking myself since I first understood the basics. I'd like to start by talking about Materials and their incredible properties. Lets start with the Basic Material.

Basic Material:

As its name suggests, this is the most basic of all the materials we'll be looking at. It's used to create objects without shadows or reflections, and we don't need any light to see it in our scene. It's a really handy object for testing our code. Here's how to implement it.

  	const geometry = new THREE.BoxGeometry(1,1,1);// one unit in x,y,z
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //here we set the material.
    const cube = new THREE.Mesh(geometry, material);

    cube.rotateX(0.5);
    cube.rotateY(0.5);
    this._scene.add(cube);
    this._camera.position.z = 5;

visual:

We also have the option of showing only the edges that make up our shape, which is very useful for aesthetics during demonstrations. Just set the wireframe property to true.

//... same beore
const material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      wireframe: true, // this property
    });
//... same after

Lambert Material :

This one I use less, but it's always good to know, this material takes ambient lighting into account, creating surfaces without reflections. But be careful, if there's no light in your scene, it won't show up on your screen. So let's go with a lambert material and a well-lit scene. I'm putting the code here but I won't go into the properties one by one as this is an introduction to show you how the basics of materials work. If you want to go further, as I always say, documentation is your best friend: doc

const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
    }); // add the matérial nothing hard
    const cube = new THREE.Mesh(geometry, material);

    cube.rotateX(0.5);
    cube.rotateY(0.5);
    this._scene.add(cube);
    this._camera.position.z = 5;

    const directionalLight = new THREE.DirectionalLight(0xffffff, 2); //just paste this part we gonna look
    // in more details the light in another post.
    directionalLight.position.set(0, 0, 1);
    this._scene.add(directionalLight);

We can see here that the faces are darker or lighter depending on the position of the light, and that's a really nice way of bringing your world to life. It's cool, isn't it?!! 😅