This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

A material can be combined with the three. Geometry object to form a three. Mesh object. The material is like the skin of the object, determining the appearance of the geometry. For example, a skin defines whether a geometry looks metallic, transparent, or appears as a wireframe. Then the resulting three. Mesh object can be added to the scene rendered by three. js.

Three.js material is divided into point material, line material, grid material, Sprite material and so on. Next, we will quickly understand how three.js uses these materials by using some common concrete materials.

Understand the common properties of materials: three.js provides a Material base class, three.material, which lists all the common properties. These common attributes can be roughly divided into basic attributes, fusion attributes, and advanced attributes. We won’t go into the usage and function of each attribute in detail here. We will only talk about some commonly used attributes, and you can check the others when you use them.

Some materialPointsMaterial

Point material is relatively simple, only PointsMaterial, usually when using the point model will use the point material. Its size property sets the size of each top rendered square area in pixels.

Let geometry = new THREE.SphereGeometry(100, 25, 25); // Create a point material object let Material = new three.pointsMaterial ({color: 0x0000FF, // color size: 3, // point render size}); Let point = new THREE.Points(geometry, material); Scene.add (point); // Add the grid model to the scene.Copy the code

Wire materialLineBasicMaterialandLineDashedMaterial

There are two types of Line material: Line basicMaterial and dashed Line material. Line material is usually used when using the Line iso-line model.

  • LineBasicMaterial: You can set colors, lineWidth, linecAP, and linejoin properties
  • LineDashedMaterial: The LineDashedMaterial property is the same as the LineBasicMaterial property. In addition, it can create the dashed line effect by specifying the length of the dashed line and the gap between the lines.

LineBasicMaterial

// let geometry = new THREE.SphereGeometry(100, 25, 25); Let material = new three.linebasicMaterial ({color: 0x0000ff}); Let line = new THREE.Line(geometry, material); Scene.add (line); scene.add(line);Copy the code

Dotted line material

Let material = new three.linedashedMaterial ({color: 0x0000FF, dashSize: 10, dashSize: 10,// Display the size of line segment. The default value is 3. GapSize: 5,// gapSize. Default is 1}); Let line = new THREE.Line(geometry, material); / / line.com puteLineDistances computeLineDistances method to calculate the distance the LineDashedMaterial required array (); Scene.add (line); scene.add(line);Copy the code

Grid model

Threejs has a lot of meshes, and there are a lot of different types and attributes of meshes. This article will take you through some simple meshes objects to get you started. A material object that is usually used in mesh class models.

The MeshBasicMaterial is not affected by the directional light source and has no angular feeling.

let material = new THREE.MeshBasicMaterial({ color: 0x0000ff, })
Copy the code

MeshLambertMaterial enables the calculation of diffuse light between the surface of the Mesh and the light source. With the calculation of light, the position of the boundary between the surface of the object gives the feeling of edges and corners. This material can be used to create dull, not shiny surfaces that react to the light sources in the scene.

let material = new THREE.MeshLambertMaterial({ color: 0x00ff00, });
Copy the code

The MeshPhongMaterial, in addition to the MeshLambertMaterial, can be used to calculate the diffuse light of the light source and the mesh surface, but also to produce specular effects (specular reflections). A bright material can be created with three.meshphongMaterial. It is the only material that can achieve a highlight effect on the surface of an object. It can simulate both plastic and, to a certain extent, metal.

let material = new THREE.MeshPhongMaterial({ color: 0xff0000, specular:0x444444,// Specular color shininess:20,// Specular brightness, default 30});Copy the code

In the new version of the Three. Js provides two new material: Three. MeshStandardMaterial (standard material) and Three MeshPhysicalMaterial (physical material). Use these two to achieve a more realistic rendering. So before using MeshPhongMaterial, consider using the new API.

THREE. MeshStandardMaterial this kind of material use more physical calculation to determine the correct surface how to interact with the scene in the light. Not only does this material better represent plastic and metal surfaces, but it also provides two new properties for developers to use:

  • Metalness: The degree of metal sensation. This property controls how metallic the surface of the object is. 0 means fully plastic and 1 means fully metal. The default value is 0.5.
  • Roughness. This property controls the roughness of the object’s surface. Visually, it determines the extent to which the surface diffuses the incident light. The default value is 0.5, with a value of 0 producing a mirror-like reflection and a value of 1 producing a fully diffuse effect.

THREE. With THREE MeshPhysicalMaterial. MeshStandardMaterial very similar, but provides more control of the luminosity.

However, the two new materials in the case of hands-on experiments, it is difficult to determine what kind of parameter value can meet a specific needs. So the best practice is to add a result UI to the program and look through the parameters to find the most satisfactory combination of parameters.

conclusion

Three.js provides a number of materials to skin geometry. ShaderMaterial is a custom shader, you can provide your own vertex shader and pixel shader program.

Not all materials will react to the light in the scene. If you want a material calculation the influence of illumination, should try to use standard material. THREE MeshStandardMaterial. When we need more control, consider using THREE. MeshPhysicalMaterial and THREE MeshPhongMaterial, or THREE. MeshLambertMaterial.

That’s all for today, thanks for your likes, followers and favorites.