Three.js Learning grid _javascript class Library

Objective

Small knitting before published about geometry and materials, I believe we have read the study, we can use them to create objects. The most commonly used object is the mesh (mesh), which consists of vertices, edges and faces, and other objects include line lines, Bones (bone), particle systems (particlesystem), etc. To create an object, you need to specify the geometry and material, in which the geometrical shape determines the vertex position of the object, and the material determines the color, texture, and other information of the object.

1. Create a Grid

In the first few, we learned how to create geometric shapes and textures, and the grid is very simple to create, as long as the geometry and material are passed into its constructor. The most commonly used object is the mesh (mesh), which represents the geometry of points, lines, and faces, and its constructors are:

Mesh (geometry, material)

Below, let's take a concrete example to learn how to create a grid:

var material = new THREE. Meshlambertmaterial ({

 color:0xffff00

});

var geometry = new THREE. Cubegeometry (1, 2, 3);

var mesh = new THREE. Mesh (geometry, material);

Scene.add (mesh);

If material and geometry are not reused, they can also be written together as:

var mesh = new THREE. Mesh (New THREE. Cubegeometry (1, 2, 3),

 new THREE. Meshlambertmaterial ({

  color:0xffff00

 })

);

Scene.add (mesh);

After adding the illumination, the effect is:

If you do not specify material, a material of wireframe true is randomly assigned each time, and the color is different each time the page is refreshed, one possible effect is:

Source:

<! DOCTYPE html>  

2. Modify Properties

　　2.1 Modification Material

In addition to specifying the material in the constructor, the material can be modified after the grid is created:

var material = new THREE. Meshlambertmaterial ({

 color:0xffff00

});

var geometry = new THREE. Cubegeometry (1, 2, 3);

var mesh = new THREE. Mesh (geometry, material);

 Scene.add (mesh);

mesh.material = new THREE. Meshlambertmaterial ({

 color:0xff0000

});

The final color to display is red:

Source:

<! DOCTYPE html>  

　　2.2 Position, zoom, rotate

Position, scaling, and rotation are three common properties of an object. Since the Three.mesh base is Three.object3d, it contains scale, rotation, position three properties. All of them are THREE.VECTOR3 instances, so the method to modify their values is the same, taking the position as an example.

THREE. Vector3 has x, Y, z three properties, and if you set only one of the properties, you can use the following methods:

Mesh.position.z = 1;

If you need to set multiple properties at the same time, you can use the following two methods:

Mesh.position.set (1.5,-0.5, 0);

Or:

Mesh.position = new THREE. Vector3 (1.5,-0.5, 0);

Scaling the corresponding property is scale, the rotation of the corresponding property is rotation, the same way as the previous example, respectively, in the X, Y, z three axes scaling or rotation.

Source:

<! DOCTYPE html>  

This article's content to this end, the article through the detailed example and the picture introduced the three.js in the grid, hoped this article to everybody study three.js to have the help.