Threejs Deep Dive animation, texture, control, etc. (ii)

If the Threejs still not know the friend, you can first go to see my previous blog, Threejs (a), after reading will have a general understanding of the Threejs;

In this blog, we deal with a number of solid geometry, animation, texture, and add control, and so on;

1, first we add a number of solid geometry on the basis of the previous article

Cube var cubegeometry = new three. Boxgeometry (15,15,15,1,1,1); var cubematerial = new three.  Meshnormalmaterial ({wireframe:true}); Material cube = new three. Mesh (Cubegeometry, cubematerial); var border = new three.  Edgeshelper (CUBE,0XFFFF00); Add Border Scene.add (cube); Scene.add (border);//cylinder var cylindergeometry = new three. Cylindergeometry (8, 8,10,30,30); var cylindermaterial = new three. Meshnormalmaterial (); var cylinder = new three. Mesh (cylindergeometry,cylindermaterial); cylinder.position.x = -10;CYLINDER.POSITION.Y = -5;cylinder.position.z = 25; Cylinder.castshadow = True;scene.add (cylinder);//sphere var spheregeometry = new three. Spheregeometry (7, +); var spherematerial = new three. Meshlambertmaterial ({color:0x7777ff}); var sphere = new three. Mesh (Spheregeometry, spherematerial);//Position the spheresphere.position.x = 0;SPHERE.POSITION.Y = 0;  Sphere.position.z = 0;sphere.castshadow = true;//Add the sphere to the scenescene.add (sphere);//ring var torusgeometry = new Three. Torusgeometry (10,3,20,var torusmaterial = new three. Meshbasicmaterial (); var tours = new three. Mesh (torusgeometry,torusmaterial); tours.position.x = 10;TOURS.POSITION.Y = -10;tours.position.z =-40;　 Tours.castshadow = True;scene.add (tours); We pass the Position property

Adjust the position of the stereo geometry in scene (x, Y, z)

One thing to emphasize when creating geometry is that for parameter settings, such as when creating a ring,

Three. Torusgeometry (10,3,20,20)
The greater the value of our 34th parameter segmentation ratio, the more planar graphics are pieced together in the stereo geometry, the more smooth the stereo geometry, and that is the principle of the rabbit in the previous blog.

2, adding animations

We want to add different animations for each geometry, so we need to add a Name property for each geometry to specify, for example:

cube.name = ' cube '; cylinder.name = ' cylinder ';

Then in the render function, using GetObjectByName to obtain the corresponding geometry, using the setinterval thought principle, through the Requestanimationframe function to make the geometry move up

Scene.getobjectbyname (' cube '). rotation.x + = control.rotationspeed;scene.getobjectbyname (' cube '). Scale.set ( Control.scale, Control.scale, Control.scale); Scene.getobjectbyname (' cylinder '). Rotation.z + = Control.rotationspeed2;scene.getobjectbyname (' Tours '). Rotation.z + = 0.05;requestanimationframe (render);

　　

3,stats Performance Plug-in

The stats.js is used for performance testing of JavaScript.

We create a createstats function and call it in init initialization

function Createstats () {    var stats = new stats ();    Stats.setmode (0);    stats.domElement.style.position = ' absolute ';    Stats.domElement.style.left = ' 0px ';    Stats.domElement.style.top = ' 5px ';    return stats;}

It is important to note that we need to constantly update the stats display in the render function

Stats.update ();

Dat.gui.js is used to create a menu bar that can be used to control various parameters in the scene to debug the scene.

function Addcontrols (controlobject) {        var gui = new dat. GUI ();        Gui.add (controlobject, ' rotationspeed ', -0.1,0.1);        Gui.add (controlobject, ' scale ', 0.01, 2);        Gui.add (controlobject, ' rotationSpeed2 ',-0.1, 0.1);}

Create the Addcontrols function, and then set the default value in the INIT initialization function and call this function

Control = new Function () {    this.rotationspeed = 0.005;    This.scale = 1;    This.rotationspeed2 = 0.05;} Addcontrols (Control);

4, adding textures

The first thing to note is that the image should be asynchronous to get, so you can put in the local Apache, you can also use Nodejs very convenient to build a server, otherwise, he will error, cross-domain.

var texture = new three. Imageutils.loadtexture ("http://10.1.26.29:84/Brick-2399.jpg"); torusmaterial.map = texture;

The last of the following:

　

Complete code:GitHub (threejs-two) If you think that I wrote to help you, please give me a star, thank you, I will continue to update the

5, finally, from the complete code, we can see, about the material, we also call a different function, here to summarize the material

Material Type:
Meshbasicmaterial: Assigns a simple color to geometry, or a wireframe that displays geometry
Meshdepthmaterial: Depending on the distance from the mesh to the camera, the material determines how the mesh is dyed
Meshnormalmaterial: Calculates color based on the normal vector of the object's surface
Meshfacematerial: This is a container in which you can set different colors on each surface of an object
Meshlambertmaterial: Consider the effects of illumination to create objects that are dim and light-colored
Meshphongmaterial: Consider the effects of illumination to create shiny objects
Shadermaterial: Use a custom shader program to directly control how vertices are placed and how the pixels are shaded.
Linebasicmaterial: Can be used for three.line geometry to create shaded lines
Linedashedmaterial: Similar to base material, but can create dashed effect

(1) Meshbasicmaterial: does not consider the influence of illumination.

Property:

Color
Wireframe
Wireframelinewidth
Wireframelinecap: How the segment endpoint is displayed. Optional values are: Butt (flat), round, square. The default is round. The Webglrenderer object does not support this property.
Wireframelinejoin: How the segment connection points are displayed. Optional values are: round, bevel (bevel), miter (sharp angle). The default is round. The Webglrenderer object does not support attributes.
Shading: Shading mode. Optional values: three.smoothshading, three. Flatshading.
Vertexcolors: Defines a different color for each vertex. does not work in the Canvasrenderer object.
Fog: Indicates whether it is currently affected by the global atomization effect settings.

Two ways to set properties:

1. constructor var meshmaterial = new three. Meshbasicmaterial ({COLOR:0XFFCCFF});//2 property meshmaterial.visible = false;

(2) Meshdepthmaterial

Objects of this material, whose appearance is not determined by the illumination or the properties of a material, are determined by the distance from the object to the camera. This material can be combined with other materials, making it easy to create fading effects.

Only two properties of the control wireframe:
Wireframe
Wireframelinewidth

You can control the vanishing speed of objects using this material in the creation by setting the camera's near and far values. If the difference between near and fat is greater, the object disappears only slightly when it is away from the camera, whereas the effect of the object disappears is very obvious.

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);//flicker caused by avoiding rendering occlusion

(3) Meshnormalmaterial

The function of the normal vector: determines the direction of light emission, provides information when calculating illumination, shadows, and paints the surface of the object. The direction that the normal vector refers to determines the color that each face gets from the meshnormalmaterial material.

Property:
Wireframe
Wireframelinewidth
Shading

for (var f = 0, f1 = sphere.geometry.faces.length; f < F1; f++) {    var. face = Spere.geometry.faces[f];    var arrow = new three. Arrowhelper (FACE.NORMAL,FACE.CENTROID,2,0X3333FF);    Spere.add (arrow);}

An arrow with a length of 2 and a color of 0x3333ff is added to each face of the sphere

(4) Meshfacematerial

You can specify a different material for each face of the geometry.

Suppose you have a cube that specifies a different color for each polygon.

var matarray = [];matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})); Matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})); Matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})); Matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})); Matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})); Matarray.push (new three. Meshbasicmaterial ({color:0x00ff00})), var facematerial = new three. Meshfacematerial (Matarray); var cubegeometry = new three. Cubegeometry (3,3,3); var cube = new three. Mesh (cubegeometry,facematerial);

(5) Meshlambertmaterial

Reacts to light sources.

Basic properties:
Color, opacity, shading, blending, depthtest, Depthwrite, wireframe, Wireframelinewith, Wireflinecap, Wireframelinejoin , Vertexcolors, fog.

Unique properties:

Ambient: Used with ambientlight light source. The color is multiplied by the color of the ambientlight light source. The default is white.
Emissive: The properties emitted by the material. Unlike a light source, it is purely a color that is unaffected by other lighting. The default is black.

(6) Meshphongmaterial

Basic properties:
Color, opacity, shading, blending, depthtest, Depthwrite, wireframe, Wireframelinewith, Wireflinecap, Wireframelinejoin , Vertexcolors, fog.

Unique properties:

Ambient
Emissive
Specular: Specifies the light level of the material and the color of its specular portion. If you set him to the same color as the colour attribute, you will get a more metal-like material. If it is set to gray, the material becomes more like plastic.
Shininess: Specifies the brightness of the highlight section. The default is 30.

(7) Shadermaterial

Property:
Wireframe
Wireframelinewidth
Shading
Vertexcolor
Fog: Indicates whether it is currently affected by the global atomization effect settings.

Unique properties:

Fragmentshader: Defines the color of each incoming pixel.
VertexShader: Allows you to modify the location of each incoming vertex
Uniforms: This property can send a message to your shader. Send the same information to each vertex and fragment.
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: This property can modify each vertex and fragment. Commonly used to pass positional data and normal vector-related data. If you want to use this property, spicy you need to provide information for all vertices in the geometry.
Lights: Defines whether the lighting data is passed to the shader. The default is False.

Unique properties:

Fragmentshader: Defines the color of each incoming pixel.
VertexShader: Allows you to modify the location of each incoming vertex
Uniforms: This property can send a message to your shader. Send the same information to each vertex and fragment.
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: This property can modify each vertex and fragment. Commonly used to pass positional data and normal vector-related data. If you want to use this property, spicy you need to provide information for all vertices in the geometry.
Lights: Defines whether the lighting data is passed to the shader. The default is False.

(8) Linebasicmaterial

Basic properties:

Color
LineWidth
Linecap:butt, round, square. The default is round. Webglrenderer does not support this property.
Linejoin:round, bevel (oblique cut), miter (sharp angle). The default is round. Webglrenderer does not support this property.
Vertexcolors: The property value is set to three. When you vertexcolors a value, you can assign a color to each vertex.
Fog: Specifies whether the current object is affected by the global atomization effect.

(9) Linedashedmaterial

It has the same properties as linebasicmaterial, but there are several additional attributes that can be used to define the length of the dash and the length of the middle space of the dash.

Unique properties:
Scale: Scales dashsize and Gapsize. If scale<1, then dashsize and gapsize will increase.
Dashsize: Length of short stroke
Gapsize: Length of interval

Threejs Deep Dive animation, texture, control, etc. (ii)