Shulou(Shulou.com)06/01 Report--

What materials are available from 1.three.js?

MeshBasicMaterial (mesh Base material) / Base material, which you can use to enrich geometry, a simple Arthur, or a wireframe that displays geometry.

MeshDepthMaterial (mesh depth material) / based on a mesh-to-camera example, 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 face material) / this is a container in which you can assign different colors to each surface of an object.

MeshLambertMaterial (mesh Lambert material) / this material takes into account the effect of light and can be used to create dim, non-bright objects.

MeshPhongMaterial (mesh Phong material) / this material takes into account the effects of lighting and can be used to create bright objects

ShaderMaterial (shading equipment) / this material allows you to use custom shader programs that directly control how vertices are copied and how pixels are shaded.

LineBasicMaterial (Line Base material) / this material can be used for THREE.Line geometry to create shaded lines

LineDashedMaterial (dotted line material) / this material is the same as the line base material, but can be used to create a dashed line effect.

2.MeshBasicMaterial Common Properties

Color/ sets the color of the material

Wireframe/ sets this property to render the material as wireframe. It is very beneficial to debugging.

WireframeLinewidth/ if wireframe is already open, this property defines the width of the center line of the wireframe

WireframeLinecap (wireframe endpoints) / this attribute defines how the endpoints of segments between vertices are displayed in wireframe mode. Can include butt (flat), round (circle), squre (square). The default value is round. This attribute is not supported by WebGlRenderer

Shading (shading) / this attribute defines how to color. The optional values are THREE.SmoothShading and THREE.FlatShading.

VertexColors (Vertex Color) / you can define a different color for each vertex through this property. This property does not work when using CanvasRenderer, but it can work when using WebGLRenderer.

Fog / this attribute specifies whether the current material is affected by the global fog effect setting.

Initialization method:

Var meshMaterial = new THREE.MeshBasicMaterial ({color: 0x7777ff}); mashMaterial.visible = false

3. MeshDepthMaterial based on depth shading

The appearance of an object using this material is not determined by lighting or a material property; it is determined by the distance from the object to the camera. You can combine this material with other materials to easily create an effect that fades away.

4. Blend material

We know that MeshDepthMaterial cannot set colors, and everything is determined by the default properties of the material. However, three.js can create new effects by combining materials. The mode of use is as follows:

... Var cubeGeometry = new THREE.BoxGeometry (cubeSize, cubeSize, cubeSize); var cubeMaterial = new THREE.MeshDepthMaterial (); var colorMaterial = new THREE.MeshBasicMaterial ({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending}); var cube = new THREE.SceneUtils.createMultiMaterialObject (cubeGeometry, [colorMaterial, cubeMaterial]); cube.children [1] .scale.set (0.99,0.99,0.99);

The display results are as follows:

These squares can get gradient effects from MeshDepthMaterial objects and colors from MeshBasicMaterial. In order for the color to have a gradient effect, you must set the transparent of MeshBasicMaterial to true and set the way to blend blending. When you look at the last line of code, if you don't set it this way, it will flicker when you render.

5. Calculate the MeshNormalMaterial to the color

MeshNormalMaterial determines the color according to the normal vector of each face. if it is a sphere, because the normal vector of each face is different, the color of each face is also different. One of the most important properties of this material is shading, which sets the way it is shaded: THREE.FlatShading for planar shading and THREE.SmoothShading for smooth coloring. The difference between the two shading is shown in the following figure:

5. Assign the MeshFaceMaterial of the material to each face

MeshFaceMaterial lets you assign a different material to each face of the geometry. Add that you have a square with six faces on it, and you can use this material to assign a material to each face. For example:

Var group = new THREE.Mesh (); var mats = []; mats.push (new THREE.MeshBasicMaterial ({color: 0x009e60})); mats.push (new THREE.MeshBasicMaterial ({color: 0x009e60})); mats.push (new THREE.MeshBasicMaterial ({color: 0x0051ba})); mats.push (new THREE.MeshBasicMaterial ({color: 0x0051ba})); mats.push (new THREE.MeshBasicMaterial ({color: 0xffd500})) Mats.push (new THREE.MeshBasicMaterial ({color: 0xffd500})); mats.push (new THREE.MeshBasicMaterial ({color: 0xff5800})); mats.push (new THREE.MeshBasicMaterial ({color: 0xff5800})); mats.push (new THREE.MeshBasicMaterial ({color: 0xC41E3A})); mats.push (new THREE.MeshBasicMaterial ({color: 0xC41E3A})); mats.push (new THREE.MeshBasicMaterial ({color: 0xffffff})) Mats.push (new THREE.MeshBasicMaterial ({color: 0xffffff})); var faceMeterial = new THREE.MeshFaceMaterial (mats); var cubeGeom = new THREE.CubeGeometry (3,3,3); var cube = new THREE.Mesh (cubeGeom, faceMeterial); scene.add (cube)

6. Dull, matte surface material MeshLambertMaterial

Two of the more important properties are ambient and emissive. Ambient (ambient color) is used with AmbientLight light sources. 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. In fact, it is not like a light source, but a pure color that is not affected by other light. The default value is black. Instantiation method:

Var meshMateial = new THREE.MeshLambertMaterial ({color: 0x7777ff})

7. MeshPhongMaterial for bright surfaces

In addition to the basic properties and the same ambient and emissive properties as MeshLambertMaterial. It also includes:

Specular (specular) / this attribute specifies the brightness of the material and the color of its highlighted parts. If you set it to the same color as 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. Use ShaderMaterial to create your own shader

ShaderMaterial is the most versatile and complex material in the Three.js library. With it, you can use your own custom shaders to run directly in the WebGL environment. Several common properties included in ShaderMaterial wireframe, wireframeLinewidth, shading, vertexColors, fog and other materials have been introduced. ShaderMaterial also contains several special properties:

FragementShader (chip 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/ can send messages to your shader through this property. The same information is sent to every vertex and element.

The defines/ attribute can be converted to # define code in vertexShader and fragmentShader. This property can be used to set some global variables in the shader program

Attributes/ changes the properties to modify each vertex and slice element. It is usually used to transfer position data and data related to normal vectors. If you want to use this property, anemia, you need to provide information for all vertices in the geometry

Lights/ defines whether the lighting data is passed to the shader. Default is false

When you create a ShaderMaterial, you must pass two important properties, vertexShader and fragmentShader. Both are corresponding WebGL vertex and chip element shader source strings. For example, let's define a piece of vertexShader code in js:

Uniform float time; varying vec2 vUv; void main () {vec3 posChanged = position; posChanged.x = posChanged.x* (abs (sin (time*1.0); posChanged.y = posChanged.y* (abs (cos (time*1.0); posChanged.z = posChanged.z* (abs (sin (time*1.0) / / gl_Position = projectionMatrix * modelViewMatrix * vec4 (position* (abs (sin (time) / 2.0) + 0.5), 1.0); gl_Position = projectionMatrix * modelViewMatrix * vec4 (posChanged,1.0);}

Because several geometry has multiple faces, all will generally write multiple fragmentShader, each face containing a corresponding fragmentShader. FragmentShader We can copy a variety of element shaders from the website (https://www.shadertoy.com)). Here is an example of creating a ShaderMaterial:

Function createMaterial (vertexShader, fragmentShader) {var verShader = document.getElementById (vertexShader) [xss_clean]; var fragShader = document.getElementById (fragmentShader) [xss_clean]; var attributes = {} Var uniforms = {time: {type: 'fags, value: 0.2}, scale: {type:' fags, value: 0.2}, alpha: {type: 'fags, value: 0. 6}, resolution: {type:' v2' Value: new THREE.Vector2 ()}} uniforms.resolution.value.x = window.innerWidth Uniforms.resolution.value.y = window.innerHeight; var meshMaterial = new THREE.ShaderMaterial ({uniforms: uniforms, attributes: attributes, vertexShader: verShader, fragmentShader: fragShader, transparent: true}); return meshMaterial;}

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

Var cubeGeometry = new THREE.BoxGeometry (20,20,20); var meshMaterial1 = createMaterial ("vertex-shader", "fragment-shader-1"); var meshMaterial2 = createMaterial ("vertex-shader", "fragment-shader-2"); Var material = new THREE.MeshFaceMaterial ([meshMaterial1, meshMaterial2, meshMaterial3, meshMaterial4, meshMaterial5, meshMaterial6]); var cube = new THREE.Mesh (cubeGeometry, material); scene.add (cube)

9. Segment Geometry material LineBasicMaterial

The attributes that LineBasiceMaterial contains are as follows:

Color/ specifies the color of the line. If vertexColors is specified, this property is ignored.

Linewidth/ this attribute defines the width of the line

LineCap/ this attribute defines how the endpoints of segments built by vertices are displayed. Optional values include butt (flat), round (circle), square (square), and the default value is round. This attribute is not supported by WebGLRenderer.

LineJoin/ this property defines how segment connection points are displayed. This attribute is not supported by WebGLRenderer

VertexColors/ sets this property to the THREE.VecterColors value to specify a color for each vertex.

Fog/ specifies whether the current object is affected by the global atomization effect

The following code is the wire display code created from the Gosper curve using LineBasicMaterial:

Var points = gosper (4,60); var lines = new THREE.Geometry (); var colors = []; var I = 0; points.forEach (function (e) {lines.vertices.push (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); / / sets the HSL color, providing hue (hue), saturation (saturation), luminance (lightness) iTunes;}); lines.colors = colors Var material = new THREE.LineBasicMaterial ({opacity: 1, linewidth: 1, vertexColors: THREE.VertexColors}); var line = new THREE.Line (lines, material); line.position.set (25,-30,-60)

The code creates an instance of THREE.Geometry, creates a vertex for each coordinate, and places it in the segment property of the instance. We also calculate a color value for each coordinate, which is used to set the colors property.

There is another LineDashedMaterial material for the segment, which is similar to the LineBasicMaterial material. The difference is that line segments are displayed with dashes and spaces. The containing properties are scale, dashSize (broken length), and gapSize (interval length). It is also important to note that the computeLineDistance () method of THREE.Geometry must be called, and if not, the interval will not be displayed.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.