Cloud picture 3 d | Three. Js material is introduced

Photo credit: unsplash.com/photos/EnxI…

We are committed to building the first “cloud CAD” collaborative design platform integrating viewing, modeling, assembly and rendering in China.

Three.js provides a variety of materials. A material defines what an object will look like in the scene. It is often confused with a texture map. A quick comparison:

Three.js provides the following materials:

• LineBasicMaterial
• LineDashedMaterial
• MeshBasicMaterial
• MeshDepthMaterial
• MeshDistanceMaterial
• MeshLambertMaterial
• MeshMatcapMaterial
• MeshNormalMaterial
• MeshPhongMaterial
• MeshPhysicalMaterial
• MeshStandardMaterial
• MeshToonMaterial
• PointsMaterial
• RawShaderMaterial
• ShaderMaterial
• ShadowMaterial
• SpriteMaterial

Here are a few highlights to introduce

Set the material

There are two ways to set most material properties. One is set at instantiation time

const material = new THREE.MeshPhongMaterial({
  color: 0xFF0000.// Red (you can also use the CSS color string)
  flatShading: true});Copy the code

The other is set after instantiation

const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0.1.. 5);  / / red
material.flatShading = true;
Copy the code

THREE.Color

In three. js, the operation of Color is realized through three. Color, and the properties can be set through a variety of general.

material.color.set(0x00FFFF);    // Same style as CSS #RRGGBB
material.color.set(cssString);   // Any CSS color string such as 'purple', '#F32',
                                 // 'rgb(255, 127, 64)',
                                 // 'hsl(180, 50%, 25%)'
material.color.set(someColor)    // Some other THREE
material.color.setHSL(h, s, l)   Where h, s, and L are from 0 to 1
material.color.setRGB(r, g, b)   Where r, g, and b are from 0 to 1
Copy the code

When instantiating, you can pass a hexadecimal number or CSS string as an argument.

const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         / / red
const m2 = new THREE.MeshBasicMaterial({color: 'red'});            / / red
const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           / / red
const m4 = new THREE.MeshBasicMaterial({color: 'RGB (0, 255)});   / / red
const m5 = new THREE.MeshBasicMaterial({color: 'an HSL (0100%, 50%)'); / / red
Copy the code

Effect of material

Let’s look at the effects of several materials for three.js.

MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial

The first is MeshBasicMaterial, which is characterized by not being affected by light. While the MeshLambertMaterial only calculates the light at the vertices, the MeshPhongMaterial calculates the light at each pixel, and the MeshPhongMaterial also supports specular highlights.

The shininess setting for the MeshPhongMaterial determines the glossiness of the specular highlight. Its default value is 30. By setting different values, you can see the following effect:

It is important to note that emissive of MeshLambertMaterial or MeshPhongMaterial is set to color and color is set to black (phong shininess is 0). It ends up looking like MeshBasicMaterial.

In practical application scenarios, different materials can be selected according to the requirements of different scenarios, which is why three. js provides these basic materials. Because more complex materials consume more GPU power. On a slower GPU, such as a mobile phone, it is common to use a less complex material to reduce the GPU power required to draw the scene. Again, if you don’t need extra functionality, you can get the best performance with the simplest materials. If you don’t need lighting and specular highlights, use MeshBasicMaterial.

MeshToonMaterial

MeshToonMaterial is similar to MeshPhongMaterial, but with one big difference. Instead of shading smoothly, it uses a gradient diagram (an X by 1 texture) to determine how to color. The default gradient is 70% brightness for the first part and 100% brightness for the next part. We can define our own gradient. This ends up giving a two-tone feel. Using MeshToonMaterial looks like this:

MeshStandardMaterial

Physically Based Rendering, or PHYSICAL Rendering, PBR is commonly referred to in graphics. Three.js provides two materials for physical rendering, namely MeshStandardMaterial and MeshPhysicalMaterial.

The materials mentioned above are implemented using simple math, and while they may look 3D, they are not something that actually exists in the real world. The MeshStandardMaterial and MeshPhysicalMaterialPBR materials use more complex mathematics to achieve real-world effects.

The biggest difference between MeshPhongMaterial and MeshStandardMaterial is that they use different parameters. MeshPhongMaterial has a parameter that sets the shininess property. MeshStandardMaterial has two parameters to set the Roughness and metalness properties respectively.

Roughness and shininess are, in a sense, the opposite. Roughness, like a baseball, doesn’t reflect as much, and non-roughness, like a billiard ball, is very shiny. Its Settings range from 0 to 1.

Another setting, metalness, refers to the metalness of the material. Metals behave differently from nonmetals. 0 for nonmetal, 1 for metal.

Below is a quick example of MeshStandardMaterial, from left to right, roughness from 0 to 1, and from top to bottom, metallicity from 0 to 1.

MeshPhysicalMaterial

MeshPhysicalMaterial is the same as MeshStandardMaterial, but it adds a ClearCoat parameter, which is 0 to 1, to determine the level of varnish shine to be applied, anda clearCoatRoughness parameter, Specifies the roughness of the gloss layer.

Here is the same comparison with 2d mesh as above, but you can set clearCoat and clearCoatRoughness evaluation tool.

The various standard materials are created in the order of fastest to slowest: MeshBasicMaterial -> MeshLambertMaterial-> MeshPhongMaterial-> MeshStandardMaterial-> MeshPhysicalMaterial The more realistic the scenario is, however, there may be performance problems on low power or mobile devices, so it needs to be optimized according to the specific scenario in the actual application.

Special material

The next three materials have special uses.

• ShadowMaterial is used to retrieve data for shadow creation.

• MeshDepthMaterial renders the depth of each pixel with a depth of 0 for pixels on the near negative side of the camera and 1 for pixels on the far negative side of the camera. You can use this property to achieve some special effects. A simple example

• MeshNormalMaterialWill be displayedThe normal of a geometry. A normal is the direction that a particular triangle or pixel faces. It is used more in debugging.MeshNormalMaterialView space normals (relative to camera normals) are drawn. X is red, y is green, and Z is blue, so the stuff facing right is pink, the stuff facing left is aqua blue, the stuff facing up is light green, the stuff facing down is purple, and the stuff facing the screen is lilac.

• ShaderMaterialUse the shader system of three. js to create custom materials.
• RawShaderMaterialFully custom shader without the help of three.js.

Common properties of material

Most materials share a set of properties called “Material”. All of the attributes can be found in the official documentation, but let’s start with two of the most commonly used.

• FlatShading: Whether an object is shading on a plane. Default is false.

• Side: Which side of the triangle to display. The default value isTHREE.FrontSideAnd other valuesTHREE.BackSide 和 THREE.DoubleSide. In three.js, most 3D objects are likely to be opaque entities, so there is no need to draw the reverse side (the face facing inside the entity). The most common reason to set side isUsed to draw planes or other nonphysical objects, you usually see the reverse side of a triangle in these objects.

Here are six plane contrast effects drawn with three. FrontSide and three. DoubleSide

• NeedsUpdate: three. js will apply the material Settings when the material is used. This means that the object with the material will be rendered. Some material Settings are only applied once because changing the material consumes a lot of resources. In this case, you need to set material. NeedsUpdate = true to tell three.js to apply the material change. The most common situations to set needsUpdate when you change the Settings after using the material are:

• flatShading

• It’s ok to add or remove textures, change textures, but to switch from using no textures to using textures, or from using textures to no textures, then you need to set needsUpdate = true.

Write in the last

This article introduces the material related content of three.js, Including MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshToonMaterial, MeshStandardMaterial, MeshPhysicalMaterial, I hope it helps

This article is published from yuntu 3D big front end team. Any unauthorized reprint of the article is prohibited.