Material is introduced

The material describe
MeshBasicMaterial A wireframe used to give geometry a simple color, or to display geometry
MeshDepthMaterial(Network Depth material) Use the distance from the camera to the grid to determine how to color each grid
MeshNormalMaterial(MeshNormalMaterial) Calculate object surface color according to normal vector
MeshFaceMaterial A container that can assign different materials to different sides of a geometry
MeshLambertMaterial This is a light-sensitive material that can be used to create dull, unshiny objects
MeshPhoneMaterial This is a material that takes light factor into account and is used to create bright objects
ShaderMaterial (coloring material) This material allows you to use custom shader programs to directly control how vertices are placed and how pixels are colored
LineBasicMaterial Can be used with line geometry to create colored lines
LineDashMaterial(dotted material) Used to create a dotted line shader effect
The common properties of the material
  • Basic properties
attribute describe
Id (Identifier) Used to identify the material and assign to it when the material is created
Uuid (Universal Unique Identifier) This is the unique GENERATED ID for internal use
The name (name) The material can be given a name for debugging purposes
Opacity: Ranges from 0 to 1 and is used with Transparent
Transparent The value can be true or false, or set to true if using alpha channel textures
Overdraw When using three. CanvasRender, polygons will be rendered a bit larger, and you can set this property to true when there are gaps
Visible (whether visible) Sets whether the material is visible, if false, the object is not visible in the scene
Side (side) Set the applied material for that side of the geometry
NeedsUpdata (update or not) Setting true will update the cache with the new material
  • Convergence properties
attribute describe
Blending theory NormalBlending determines how materials on an object want to blend with the background. The general blending mode is THREE
Blendsrc (Fusion source) Defines how object sources fuse with background object sources. Default is three. SrcAlphaFactor, i.e. Alpha (transparency) channel
Blenddst (Fusion target) Defines how to use the background when fusion target, the default value is THREE. OneMinusSrcAlphaFactor, meaning source alpha channel is also used for fusion, just use a value of 1
Blendequation (Fusion formula) Defines how to use blendsrc and blenddst values. By default, they are added together, and with these three properties, you can create a custom fusion pattern
  • Advanced properties
attribute describe
depthTest Turn on or off the GL-DEPth_test parameter, which controls whether the new pixel depth is used to calculate the value of the new pixel
depthWrite Determines whether materials affect WebGL’s depth cache
alphatest Range 0-1. If the alpha value of a pixel is less than that value, the pixel will not be displayed. This is used to remove some opacity related burr
Base material

1. THREE.MeshBasicMaterial

  • Definition: a simple material that will not be affected by lighting and will be rendered as simple flat polygons, and can also display geometric wireframes.

  • Private attributes:

attribute describe
color color
wireframe Sets material rendering to wireframes for true
wireframeLinewidth Set the wire width of the wire frame
wireframeLinecap Set the end styles of the segment: butt(flat),round(round),square(square). The default is round. WebGRenderer objects do not support this property
wireframeLinejoin The inflection points of line segments are styled the same as wireframeLinecap
shading Set how shading, optional values: THREE SmoothShading/THREE NoShading and THREE FlatShading. The default is THREE.SmoothShading, which produces a smooth object
vertexColors Vertex color
Fog (fog) Set whether the material is affected by atomization effect
  • use
let basic = new THREE.MeshBasicMaterial({color:0xcccccc})
Copy the code

2. THREE.MeshDepthMaterail

  • Definition: independent of lighting, determined by the distance of the object to the camera. Can be used in combination with other materials
  • Private attributes:
attribute describe
wireframe Whether to display a wireframe
wireframeLineWidth Width of wireframe
  • Usage:
// Every object in the scene will use this material
scene.overrideMaterial = new THREE.MeshDepthMaterial()
Copy the code

3. Combine materials

  • Implementation method:
// Define mesh quality
let cubeMaterial = new THREE.MeshDepthMaterial(); 

// Define mesh quality
let colorMaterial = new THREE.MeshBasicMaterial({
    color:0x00ff00.transparent:true.// Turn on transparency
    blending:THREE.MultiplyBlending // Set fusion mode (foreground and background multiplied)
});

/ / call THREE. SceneUtils. CreateMultiMaterialObject () to create a grid, geometric experience to be copied, returned to a grid group, two completely same grid inside.
let cube = new THREE.SceneUtils.createMultiMaterialObject(
cubeGeometry,[colorMaterial, cubeMaterial]);

// Shrink the THREE.MeshDepthMaterial mesh to avoid flickering
cube.children[1].scale.set(0.99.0.99.0.99);

Copy the code

4. THREE.MeshNormalMaterial

  • Material rendering: The color of each face is obtained by the outward-facing normal vector (normal vector is the vector perpendicular to the face)

  • Properties:

attribute describe
wireframe Whether to display a wireframe
wireframeLinewidth Line width
shading Shading method: THREE.FlatShading, THREE.SmoothShading

The material container

THREE.MeshFaceMaterial

  • Definition: Allows you to specify a different material for each face of a geometry
  • Usage:
let matArray = [];
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x000060 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x00ff60 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x001260 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009130 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009ee0 }));

let faceMaterial = new THREE.MeshFaceMaterial(matArray);

let cubeGeom = new THREE.BoxGeometry(3.3.3);
let cube = new THREE.Mesh(cubeGeom, faceMaterial)
Copy the code

Advanced materials

1. THREE.MeshLambertMaterial

  • Action: Can be influenced by light sources, used to create dull surfaces

  • Private attributes:

attribute describe
Ambient (Ambient color) The ambient color of the material, used together with the ambient light, is multiplied, and the default is white
Emissive The color of the material emission, which is black by default, is unaffected by other lighting
wrapAround How can I set it to true to enable the semi-Lambert lighting technology to make the light drop more subtle, soft and even
wrapRGB When wrapAround is true, THREE.Vector3 can be used to control the speed at which the light falls
  • Usage: Same as other materials

2. THREE.MeshPhonegMaterial

  • Action: A material used to create light that is influenced by the light source
  • Private attributes:
attribute describe
ambient The ambient color of the material
Emissive The color of the material emission, which is black by default, is unaffected by other lighting
specular If you specify the light level of the material and the color of the highlights, how about the same as the color setting, the material will look like metal, if you set it to Grey, the material will look like plastic
shininess Specifies the brightness of the specular highlights. Default is 30
metal Set to true to make the object look like metal (fine tuning)
wrapAround How can I set it to true to enable the semi-Lambert lighting technology to make the light drop more subtle, soft and even
wrapRGB When wrapAround is true, THREE.Vector3 can be used to control the speed at which the light falls
  • Usage: Same as other materials

3. THREE.ShaderMaterail

  • Role: You can use your own custom shaders

  • It’s a little complicated, but I’ll do that in Chapter 11

Linear geometry material

1. THREE.LineBasicMaterial

  • Definition: Linear base material
  • Properties:
attribute describe
color The color of the line
linewidth This property defines the width of the line
linecap Display styles for endpoints, butt (flat), round (round), square (square), round by default
linejoin Line segment connection styles, butt (flat), round (round), square (square), default round
vertexColors Set it to three. VertexColors and give each vertex a color
fog Whether the material is affected by atomization
  • Example:
let points = gosper(4.60); // Return a Gosper curve
let lines = new  THERR.Geometry();
let colors = [];
let i = 0;
points.forEach(function (e) {
    lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
    colors[i] = new THREE.Color(0xffffff);
    colors[i].setHSL(e.x/100+0.5), (e.y*20) /300.0.8);
    i++
});
lines.colors = colors;
let material = new THREE,LineBasicMaterial({
    opacity: 1.0.linewidth: 1.vertexColors: THREE.VertexColors
});
let line = new THREE.Line(lines, material);

Copy the code

2. THREE.LineDashedMaterial

  • Definition: This material has the same properties as THREE.LineBasicMaterial, with a few additional properties described below
  • Private attributes:
attribute describe
scale Scale dashSize and gapSize; if scale is less than 1, dashSize and gapSize increase; If scale is less than 1, dashSize and gapSize decrease
dashSize The length of the dashed line segment
gapSize The width of the dashed line interval
  • Usage:
let material = new THREE,LineDashedMaterial({
    vertexColors:true.color:0xffffff.dashSize:10.gapSize:1.scale:0.1
});
Copy the code