Preface
Material is a property related to rendering effects independent of object vertex information. By setting the material, you can change the color, texture map, lighting mode, etc. of the object.
MeshBasicMaterial: No sense of light, giving geometry a simple color or display wireframe.
MeshLambertMaterial: This material is responsive to light and is used to create dim and non-luminous objects.
MeshPhongMaterial: This material also reacts to light and is used to create bright metal objects.
1. Basic Materials
Use Basic Material objects, the color of the object after rendering is always the color of the material without light and dark or shadow effects due to lighting. If there is no color for the specified material, the color is random. Its constructor is:
THREE.MeshLambertMaterial(opt)
Among them, opt can be defaulted or is a value containing each attribute. 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 (see "Three.js Learning Geometry", the effect is:
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test 7.1</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light); var material = new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.75 }); var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material); scene.add(cube); renderer.render(scene, camera); } </script></html>Several more commonly used properties of BasicMaterial :
・ visible: whether it is visible, default is true
・ side: Render the front or the back of the face, the default is the front THREE.FrontSide, which can be set to the back THREE.BackSide, or the double-sided THREE.DoubleSide
・Wireframe: Whether to render lines instead of faces, default to false
・ color: Hexadecimal RGB color, if red is represented as 0xff0000
・ map: Use texture maps
For basic materials, even if the light source in the scene is changed, the objects using that material always have the same effect in the color everywhere. Of course, this is not very realistic, so we will introduce more realistic lighting models: Lambert lighting models and Phong lighting models .
2. Lamber material and Phong material
Lambert Material (MeshLambertMaterial) is a material that conforms to the Lambert lighting model. The main feature of the Lambert lighting model is that it only considers diffuse reflection but does not consider the effect of specular reflection. Therefore, it is not suitable for objects such as metals and mirrors that require specular reflection, and is suitable for the diffuse reflection effects of most other objects.
The lighting model formula is:
Idiffuse = Kd * Id * cos(theta)
Among them, Idiffuse is the diffuse intensity of light, Kd is the diffuse reflection attribute of the object surface, Id is the light intensity, and theta is the incident angle arc of light.
Of course, for Lambert material using Three.js, you don’t need to understand the above formula to use it directly.
The method to create a yellow Lambert material is:
new THREE.MeshLambertMaterial({ color: 0xffff00})After using lighting, you get the following effect:
color is used to express the material's ability to reflect scattered light, and is also the most commonly used attribute to set the color of the material. In addition, you can also use ambient and emissive to control the color of the material.
ambient represents the reflection ability to ambient light. This value is only valid when AmbientLight is set. The material's reflection ability to ambient light is multiplied by the ambient light intensity to obtain the actual color of the material.
emissive is a self-luminous color of the material, which can be used to express the color of the light source. It is not a light source, but a color that is not affected by light. Self-luminescence in red alone:
new THREE.MeshLambertMaterial({ emitsive: 0xff0000})The effect is:
If using both red self-luminescent and yellow scattered light:
new THREE.MeshLambertMaterial({ color: 0xffff00, emitive: 0xff0000})The effect is:
Effects of the sphere:
Summarize the unique properties of Lamber material:
ambient: Set the ambient color of the material and use it with the AmbientLight light source. This color will be multiplied by the ambient light color. That is, reacting to the light source.
emissive: Set the color emitted by the material, not a light source, but a color that is not affected by light. Default is black.
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test7.2</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light); var material = new THREE.MeshLambertMaterial({ color: 0xffff00, emitive: 0xff0000 }); var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material); scene.add(cube);// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);// scene.add(sphere); renderer.render(scene, camera); } </script></html>3.phong material
Phong Material (MeshPhongMaterial) is a material that conforms to the Phong lighting model. Unlike Lambert, the Phong model considers the effect of specular reflection, so it is particularly suitable for metal and mirror performance.
The diffuse reflection part and the Lambert lighting model are the same, and the model of the specular reflection part is:
Ispecular = Ks * Is * (cos(alpha)) ^ n
Among them, Ispecular is the light intensity reflected by the specular surface, Ks is the specular reflection coefficient of the material surface, Is is the light source intensity, alpha is the angle between the reflected light and the line of sight, n is the highlight index, and the larger the highlight spot, the smaller the highlight spot.
Since the diffuse reflection part is consistent with the Lambert model, if the specular reflection coefficient is not specified, but only diffuse reflection is set, the effect is the same as that of Lambert:
new THREE.MeshPhongMaterial({ color: 0xffff00});Similarly, both emissive and ambient values can be specified, and will not be explained here. The specular reflection coefficient is specified below. First, we only use specular reflection, set the highlight to red, and apply it to a sphere:
var material = new THREE.MeshPhongMaterial({ specular: 0xff0000});var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);The effect is:
The n-value in the lighting model can be controlled through the shininess attribute. When the shininess value is larger, the smaller the spot of the highlight, and the default value is 30. When we set it to 1000:
new THREE.MeshPhongMaterial({ specular: 0xff0000, shininess: 1000});The effect is:
Use yellow mirror light, red scattered light:
material = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffff00, shininess: 100});Summarize the unique properties of Phong material:
ambient: Set the ambient color of the material and use it with the AmbientLight light source. This color will be multiplied by the ambient light color. That is, reacting to the light source.
emissive: Set the color emitted by the material, not a light source, but a color that is not affected by light. Default is black
specular: Specifies the brightness of the material and the color of the highlights. If set to the same color as the color property, another more metal-like material will be obtained. If set to grey gray, it will look like plastic.
shininess: Specifies the brightness of the highlight part, the default value is 30.
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test7.3</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 200); light.position.set(10, 15, 25); scene.add(light); var material = new THREE.MeshPhongMaterial({// specular: 0xff0000, color: 0xff0000, specular: 0xffff00, shininess: 100 }); // var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);// scene.add(cube); var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material); scene.add(sphere); renderer.render(scene, camera); } </script></html>Summarize
The content of this article ends here. The article introduces Lamber and Phong in Three.js through detailed examples and pictures. I hope it will be helpful to everyone's learning. The editor will sort out related articles on Three.js one after another. Friends who are interested in Three.js, please continue to support Wulin.com.