Using the three.js material

What materials are available from 1.three.js?

Meshbasicmaterial (mesh base material)/base material, which can be used to enrich geometry a simple Arthur, or a wireframe showing the geometry

Meshdepthmaterial (Mesh depth material)/example based on mesh to camera, this material determines how to dye the mesh

Meshnormalmaterial (mesh normal material)/This is a simple material that calculates color based on the direction vector of the object's surface

Meshfacematerial (mesh surface material)/This is a container in which you can specify different colors for each surface of an object

Meshlambertmaterial (grid Lambert material)/This material takes into account the effects of illumination and can be used to create objects that are dim and light-colored.

Meshphongmaterial (Mesh Phong material)/This material takes into account the effects of illumination and can be used to create shiny objects

Shadermaterial (coloring equipment)/This material allows the use of custom shader programs that directly control how vertices are cloned and how pixels are shaded

Linebasicmaterial (linear base material)/This material can be used for three.line geometry to create shaded lines

Linedashedmaterial (dashed material)/This material is the same as a straight line base material, but can be used to create a dashed effect

2.MeshBasicMaterial Common Properties

color/setting the color of a material

wireframe/set this property to render the material as a wireframe. Very advantageous for commissioning

wireframelinewidth/if Wireframe is already open, this property can define the width of the centerline of the wireframe

Wireframelinecap (end of wireframe line)/This property defines how the endpoints of the segments between vertices in wireframe mode are displayed. may include butt (flat), round (circle), Squre (square). The default value is round. Webglrenderer does not support this property

Shading (shaded)/This property defines how to Colorize. The optional values are three.smoothshading and three.flatshading.

Vertexcolors (vertex color)/This property allows you to define a different color for each vertex. This property has no effect when using canvasrenderer, but can work when Webglrenderer is used.

Fog (atomized)/This property specifies whether the current material is affected by the global atomization effect settings.

Initialization mode:

var New Three. Meshbasicmaterial ({color:0x7777ff});

Mashmaterial.visible = false;

3. Meshdepthmaterial based on deep coloring

Objects of this material, whose appearance is not determined by illumination or a material property, are determined by the distance from the object to the camera. You can combine this material with other materials to make it easy to create a fade-out effect.

4. Fusion Material

We know that meshdepthmaterial can't set the color, everything is determined by the default property of the material. However, three.js can create new effects by combining materials. Use the following methods:

... varCubegeometry =Newthree.                Boxgeometry (Cubesize, Cubesize, cubesize); varCubematerial =Newthree.                Meshdepthmaterial (); varColormaterial =NewThree. Meshbasicmaterial ({color:0x00ff00, transparent:true, Blending:three.                Multiplyblending}); varCube =Newthree.                Sceneutils.createmultimaterialobject (Cubegeometry, [Colormaterial, cubematerial]); cube.children[1].scale.set (0.99, 0.99, 0.99);...

The results are shown below:

These blocks can get a gradient from the Meshdepthmaterial object and get the color from the meshbasicmaterial. In order for the color to have a gradient effect, you must set meshbasicmaterial transparent to true to set the way to dissolve blending. In view of the last line of code, how not to set this, the rendering will appear flashing.

5. Calculating the meshnormalmaterial of color

The meshnormalmaterial determines the color based on the normal vector of each face, and if it is a sphere, the color of each polygon is different because the normal vector of each polygon is different. One of the most important properties of the material is shading, which sets the shading method: three.flatshading represents planar shading, three. The smoothshading represents a smooth stained. Two coloring differences as shown:

5. Specify the meshfacematerial of the material for each face

Meshfacematerial allows you to specify a different material for each face of the geometry. Add you have a block with six faces, you can use this material to specify a material for each face. For example:

varGroup =Newthree.        Mesh (); varMats = []; Mats.push (NewThree. Meshbasicmaterial ({Color:0x009e60})); Mats.push (NewThree. Meshbasicmaterial ({Color:0x009e60})); Mats.push (NewThree. Meshbasicmaterial ({color:0x0051ba})); Mats.push (NewThree. Meshbasicmaterial ({color:0x0051ba})); Mats.push (NewThree. Meshbasicmaterial ({color:0xffd500})); Mats.push (NewThree. Meshbasicmaterial ({color:0xffd500})); Mats.push (NewThree. Meshbasicmaterial ({color:0xff5800})); Mats.push (NewThree. Meshbasicmaterial ({color:0xff5800})); Mats.push (NewThree. Meshbasicmaterial ({COLOR:0XC41E3A})); Mats.push (NewThree. Meshbasicmaterial ({COLOR:0XC41E3A})); Mats.push (NewThree. Meshbasicmaterial ({color:0xffffff})); Mats.push (NewThree. Meshbasicmaterial ({color:0xffffff})); varFacemeterial =Newthree.        Meshfacematerial (mats); varCubegeom =NewThree. Cubegeometry (3, 3, 3); varCube =Newthree.        Mesh (Cubegeom, facemeterial); Scene.add (cube);

6. Dull, non-shiny surface material meshlambertmaterial

Two more important attributes are ambient and emissive. Ambient (ambient color) is used with the ambientlight light source. This color is multiplied by the color of the ambientlight light source. The default value is white; Emissvie (emitted) is the color emitted by the material. It is not really like a light source, it is just a pure color that does not affect other lighting. The default value is black. Instantiation mode:

var New Three. Meshlambertmaterial ({color:0x7777ff});

7. Meshphongmaterial for Bright surfaces

In addition to the underlying properties and the same ambient and emissive properties as the meshlambertmaterial. Also includes:
Specular (specular)/This property specifies how bright the material is and the color of its highlighted portion. If you set it to a color, you will get a more metal-like material. If set to grey, the material becomes more plastic.
shininess/Specifies the brightness of the highlighted part, which defaults to 30

8. Create your own shader using shadermaterial

Shadermaterial is one of the most versatile and complex materials in the Three.js library. It allows you to use your own custom shaders to run directly in the WEBGL environment. Shadermaterial contains several common properties wireframe, Wireframelinewidth, shading, vertexcolors, fog other materials have been introduced. Shadermaterial also contains several special attributes:
Fragementshader (element Shader)/This shader defines the color of each incoming pixel
VertexShader (vertex shader)/This shader allows you to modify the position of each incoming vertex
Uniforms/This property allows you to send messages to your shader. The same information is sent to each vertex and element
Defines/This property can be converted to the # define code in VertexShader and Fragmentshader. This property can be used to set some global variables in the shader program
attributes/properties can modify each vertex and slice. Typically used to pass positional data and normal vector-related data. If you want to use this property, anemia you want to provide information for all vertices in the geometry
lights/defines whether the lighting data is passed to the shader. Default is False

In creating shadermaterial, you must pass two important properties VertexShader and Fragmentshader. Each of the two is a corresponding section of the WebGL vertex and element shader source string. For example, we first define a section of VertexShader code in JS:

 <script id= "Vertex-shader" type= "X-shader/x-vertex" > uniform  float   time;    Varying VEC2 vUv;  void   main () {VEC3 poschanged  =
   
     position;    Poschanged.x  = poschanged.x* (abs (Sin (time*1.0
     = poschanged.y* (abs (cos (time*1.0 = poschanged.z* (abs (Sin (time*1.0 // gl_position = ProjectionMatrix *    Modelviewmatrix * VEC4 (position* (Sin (time)/2.0) +0.5), 1.0);     gl_position = ProjectionMatrix * Modelviewmatrix * VEC4 (Poschanged,1.0 </script> 
   

Because several geometries have multiple faces, all generally write multiple fragmentshader, each of which contains a fragmentshader. Fragmentshader we can copy a variety of chip shaders from the website (https://www.shadertoy.com). Here is an example of creating a shadermaterial:

functioncreatematerial (vertexshader, fragmentshader) {varVershader =document.getElementById (vertexshader). InnerHTML; varFragshader =document.getElementById (Fragmentshader). InnerHTML; varattributes = {}; varUniforms ={time: {type:' F ', value:0.2}, Scale: {type:' F ', value:0.2}, Alpha: {type:' F ', value:0.6}, Resolution: {type:' V2 ', Value:Newthree. Vector2 ()}} uniforms.resolution.value.x=window.innerwidth; Uniforms.resolution.value.y=Window.innerheight; varMeshmaterial =Newthree. Shadermaterial ({uniforms:uniforms, attributes:attributes, Vertexshader:ve Rshader, Fragmentshader:fragshader, Transparent:true            }); returnmeshmaterial; }

We set the attributes, uniforms parameters. Passed in when initializing the shadermaterial. Finally, create a geometry. For example:

var New Three. Boxgeometry (a);         var meshMaterial1 = creatematerial ("Vertex-shader", "fragment-shader-1");         var meshMaterial2 = creatematerial ("Vertex-shader", "fragment-shader-2");        ...         var New three. Meshfacematerial ([MeshMaterial1, MeshMaterial2, MeshMaterial3, MeshMaterial4, MESHMATERIAL5, meshMaterial6]);         var New three. Mesh (cubegeometry, material);        Scene.add (cube);

9. Line Geometry material linebasicmaterial

The linebasicematerial contains the following properties:

color/Specifies the color of the line. If Vertexcolors is specified, this property is ignored.

linewidth/This property defines the width of the line

Linecap/This property defines how the end point of a vertex-built segment is displayed. The optional values are butt (flat), round (circle), Square (square), and the default value is round. Webglrenderer does not support this property.

Linejoin/This property defines how the segment connection points are displayed. Webglrenderer does not support this property

vertexcolors/set this property to a three.vectercolors value, you can assign a color to each vertex

fog/Specifies whether the current object is affected by the global atomization effect

The following code is a line display code created using linebasicmaterial based on the Gosper curve:

varPoints = Gosper (4, 60); varLines =Newthree.            Geometry (); varcolors = []; vari = 0; Points.foreach (function(e) {Lines.vertices.push (Newthree.                Vector3 (e.x, E.z, e.y)); Colors[i]=NewThree. Color (0XFFFFFF); COLORS[I].SETHSL (e.x/100 + 0.5, (E.Y * 20)/300, 0.8);//set HSL color, provide hue (hue), saturation (saturation), brightness (lightness)i++;            }); Lines.colors=colors; varMaterial =Newthree. Linebasicmaterial ({opacity:1.0, LineWidth:1, Vertexcolors:three.            Vertexcolors}); varline =Newthree.            Line (lines, material); Line.position.set (25,-30,-60);

The code creates a Three.geometry instance, creates a vertex for each coordinate, and puts it into the segment attribute of the instance. For each coordinate we also calculate a color value that is used to set the Colors property.

The line segment also has another linedashedmaterial material, similar to the linebasicmaterial material. The difference is that the line segment is displayed with dashes and spaces. The containing attributes are scale, dashsize (wire break length), gapsize (interval length). It is also important to note that the Three.geometry computelinedistance () method must be called, and the interval will not be displayed if it is not called.

Using the three.js material