This is the 28th day of my participation in the August Challenge

When we buy clothes, there will be cashmere, leather, cotton and other different materials made of clothes, different materials present different textures. Material can be regarded as the combination of material and texture. In rendering programs, it is a combination of the visual properties of the surface, such as color, texture, smoothness, transparency, reflectivity, refractive index, luminescence, etc. Three.js encapsulates most of the material effects for us.

MeshBasicMaterial

This material is a simple material that will not be affected by light. The effect you can see directly is that the color of the whole object is the same without a three-dimensional feeling.

1. Initialize color

var material = new THREE.MeshBasicMaterial({color:0x00ffff});
var geometry = new THREE.BoxGeometry(1.1.1);

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Copy the code

2. Set change color

var material = new THREE.MeshBasicMaterial({color:0x00ffff}); // Set the initial color to light blue
material.color.set(0xff00ff); // Change the color to purple
Copy the code

3. We can also assign a new three.color object directly

var material = new THREE.MeshBasicMaterial({color:0x00ffff}); // Set the initial color to light blue material. Color = new three. color (0xff00ff); // Change the color to purpleCopy the code

MeshNormalMaterial

This material will automatically change color according to the direction of the face, which is the material we have been using.

This material is not affected by lighting.

geometry = new THREE.BoxGeometry( 2.2.2 ); // Create geometry
material = new THREE.MeshNormalMaterial(); // Create a material

mesh = new THREE.Mesh( geometry, material ); // Create a grid
scene.add( mesh ); // Add the grid to the scene

Copy the code

LineBasicMaterial Line material

To draw a line segment, we need to identify two points, the starting point and the ending point. In our case, we used four vertices to create three lines. The Geometry object then uses this set of vertices to configure Geometry, instantiates the material for the Line, and finally generates the Line using THREE.Line.

// Add a line
var pointsArr = [
    new THREE.Vector3( -10.0, -5 ),
    new THREE.Vector3( -5.15.5 ),
    new THREE.Vector3( 20.15, -5 ),
    new THREE.Vector3( 10.0.5)];var lineGeometry = new THREE.Geometry(); // Instantiate geometry
lineGeometry.setFromPoints(pointsArr); // Configure the geometry with the attributes of the current point

var lineMaterial = new THREE.LineBasicMaterial({color:0x00ff00}); / / material

line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

Copy the code

Add light

Since the MeshBasicMaterial is not affected by light, the presence of light does not affect its effect, and we did not add light earlier. However, the material introduced later will be affected by the light source. Before introducing, we need to add a light source to affect the appearance of the material.

// Create light
function initLight() {
    var light = new THREE.DirectionalLight(0xffffff); // Add a white parallel light
    light.position.set(20.50.50); // Set the direction of light
    scene.add(light); // Add to the scene

    // Add a global ambient light
    scene.add(new THREE.AmbientLight(0x222222));
}
Copy the code

MeshLambertMaterial

This material will react to light, but will not have highlights, and can simulate objects with rough materials such as wood or stone. Implementation cases:

geometry = new THREE.BoxGeometry( 2.2.2 ); // Create geometry
material = new THREE.MeshLambertMaterial({color:0x00ffff}); // Create a material

mesh = new THREE.Mesh( geometry, material ); // Create a grid
scene.add( mesh ); // Add the grid to the scene
Copy the code

MeshPhongMaterial High light material

This material has a high-gloss effect, which can simulate the effect of some smooth objects, such as paint surface, porcelain tile and other smooth objects. Implementation cases:

geometry = new THREE.BoxGeometry( 2.2.2 ); // Create geometry
material = new THREE.MeshPhongMaterial({color:0x00ffff}); // Create a material

mesh = new THREE.Mesh( geometry, material ); // Create a grid
scene.add( mesh ); // Add the grid to the scene

Copy the code