Three.js Learning Lamber material and Phong material _javascript class Library

Objective

Material (Material) is an attribute that is independent of the vertex information of the object and is related to the rendering effect. By setting the material can change the object's color, texture mapping, lighting mode, etc.

　　meshbasicmaterial: no sense of illumination, give geometry a simple color or display wireframe.

　　meshlambertmaterial: This material reacts to light to create dim, glowing objects.

　　meshphongmaterial: This material is also responsive to light, used to create bright metallic objects.

1. Basic material

Objects that use the basic material (basicmaterial), the color of the object after rendering is always the color of the material, and not due to light and shading, shadow effect. If you do not specify a color for the material, the color is random. Its constructors are:

THREE. Meshlambertmaterial (OPT)

Where opt can be default, or a value that contains each property. For example, create a new yellow material with an opacity of 0.75:

New THREE. Meshbasicmaterial ({

 color:0xffff00,

 opacity:0.75

});

Apply it to a cube (method see "Three.js Learning Geometry", the effect is:

Source:

<! DOCTYPE html>  

　Some of the more commonly used properties of basicmaterial :

　　Visible: visible, default to True

　　side: renders the front or the opposite side of the surface, the default is the positive three.frontside, can be set to the reverse three.backside, or double-sided three.doubleside

　　wireframe: render line rather than face, default to False

　　color: hexadecimal RGB color, as shown in red as 0xff0000

　　Map: Using texture mapping

For the basic material, even if you change the light source in the scene, the object using the material will always be the same color everywhere. Of course, this is not very realistic, so next we will introduce a more realistic illumination model: TheLambert illumination model and the Phong Illumination model.

2.Lamber Material and Phong material

The Lambert material (meshlambertmaterial) is the material that conforms to the Lambert illumination model. The main feature of the Lambert illumination model is to consider only diffuse reflection without considering specular reflection, so it is not suitable for objects that need specular reflection, such as metals and mirrors, which are suitable for the diffuse reflection effect of most other objects.

　　Its illumination model formula is:

Idiffuse = Kd * Id * cos (theta)

Among them, the idiffuse is diffuse reflection light strong, KD is the object surface diffuse reflection attribute, the ID is the light intensity, theta is the light angle of incidence radian.

Of course, for the use of Three.js Lambert material, do not need to understand the above formula can be used directly.

The method of creating a yellow Lambert material is:

New THREE. Meshlambertmaterial ({

 color:0xffff00

})

After using the light, you get this effect:

Color is used to represent the reflection of the material on the scattered light, and is the most commonly used to set the properties of the material color. In addition, you can use ambient and emissive to control the color of the material.

Ambient represents the ability to reflect the ambient light, only when the ambientlight is set, the value is effective, the material to the ambient light reflection ability and ambient light intensity by multiplying the actual performance of the material color.

Emissive is the spontaneous light color of the material, which can be used to represent the color of the light source, not a light source, but a color unaffected by the light. Use the red spontaneous light alone:

New THREE. Meshlambertmaterial ({

 emissive:0xff0000

})

The effect is:

If you use both the red spontaneous light and the yellow scattering light:

New THREE. Meshlambertmaterial ({

 color:0xffff00,

 emissive:0xff0000

})

The effect is:

The effect of the sphere:

summarizes the unique properties of the Lamber material:

　　Ambient: sets the ambient color of the material and uses it with the ambientlight light source, which is multiplied by the color of ambient light. That is to respond to the light source.

　　emissive: Set the color of the material launch, not a light source, but a color unaffected by the light. The default is black.

　Source:

<! DOCTYPE html>  

3.phong Material

The Phong material (meshphongmaterial) is the material that conforms to the Phong illumination model. Unlike Lambert, the Phong model considers the effect of specular reflection, so it is particularly suitable for metal and mirror performance.

The diffuse part is the same as the Lambert illumination model, and the Specular reflection section is modeled as:

Ispecular = Ks * Is * (cos(alpha)) ^ n

Among them, Ispecular is specular reflection of the light intensity, KS is the material surface specular reflection coefficient, is is the intensity of light source, alpha is reflected light and the angle of sight, n is the high light index, the larger the highlight light spot smaller.

Because the diffuse part is consistent with the Lambert model, if the specular reflection coefficient is not specified and only the diffuse reflection is set, the effect is the same as the Lambert:

New THREE. Meshphongmaterial ({

 color:0xffff00

});

Similarly, you can specify emissive and ambient values, which are no longer explained here. The following is a description of the specular reflection coefficient specified for the specular value. First, we use only specular reflection, set the highlight to red, and apply to a sphere:

var material = new THREE. Meshphongmaterial ({

 specular:0xff0000

});

var sphere = new THREE. Mesh (New THREE. Spheregeometry (3, 8), material);

The effect is:

You can control the n values in the illumination model through the Shininess property, and when the shininess value is larger, the highlight is smaller and the default value is 30. When we set it to 1000:

New THREE. Meshphongmaterial ({

 specular:0xff0000,

 shininess:1000

});

The effect is:

Using the yellow specular light, the red scattering light:

Material = new THREE. Meshphongmaterial ({

 color:0xff0000,

 specular:0xffff00,
 
 shininess:100

});

　　Summarizes the unique properties of the Phong material:

　　Ambient: sets the ambient color of the material and uses it with the ambientlight light source, which is multiplied by the color of ambient light. That is to respond to the light source.

　　emissive: Set the color of the material launch, not a light source, but a color unaffected by the light. Default is Black

　　Specular: Specifies the brightness of the material and the color of its highlights, and if set to the same colour as the color property, you get another more metal-like material, which, if set to grey, looks like plastic

　　shininess: Specifies the brightness of the highlight portion, with a default value of 30.

　　Source code:

<! DOCTYPE html>  

Summarize

The contents of this article to this end, the article through a detailed example and pictures introduced Three.js in the Lamber and Phong, hope to help you learn, small series will be sorted out three.js related articles, to three.js interested friends please continue to support the cloud habitat community.