This is the second part of the three.js source reading note, which begins directly.
Core::object3d
Object3d seems to be the most important class in the Three.js framework, and quite a few other classes are inherited from Object3d classes, such as Scene class, Geometry class, Camera class, illumination class, etc.: they are all objects in 3D space, so they are called Object3d classes. The Object3d constructor is as follows:
Copy Code code as follows:
THREE. Object3d = function () {
THREE. Object3dlibrary.push (this);
This.id = THREE. Object3didcount + +;
THIS.name = ';
This.properties = {};
this.parent = undefined;
This.children = [];
This.up = new THREE. Vector3 (0, 1, 0);
This.position = new THREE. Vector3 ();
This.rotation = new THREE. Vector3 ();
This.eulerorder = THREE. Object3d.defaulteulerorder;
This.scale = new THREE. Vector3 (1, 1, 1);
This.renderdepth = null;
This.rotationautoupdate = true;
This.matrix = new THREE. Matrix4 ();
This.matrixworld = new THREE. Matrix4 ();
This.matrixrotationworld = new THREE. Matrix4 ();
This.matrixautoupdate = true;
This.matrixworldneedsupdate = true;
This.quaternion = new THREE. Quaternion ();
This.usequaternion = false;
This.boundradius = 0.0;
This.boundradiusscale = 1.0;
This.visible = true;
This.castshadow = false;
This.receiveshadow = false;
This.frustumculled = true;
This._vector = new THREE. Vector3 ();
};
Before you introduce a function, you need to introduce several important properties of the class.
Attribute parent and children instructions, it is often necessary to use a tree to manage many Object3d objects. For example, a moving car is a Object3d object, the logic of controlling the driving route of the vehicle is realized inside the object, and each vertex of the automobile is located in the correct position after the model matrix is processed. But the car is swinging the wiper, not only with the car moving direction, and its own relative to the car is also swinging around, This oscillating logic cannot be implemented within the object of the vehicle. The solution is to set the wiper as the car's chidren, the internal logic of the wiper is only responsible for its relative to the car swing. Under this tree structure, a scene scene is actually the topmost object3d, and its model matrix is the inverse matrix of the view matrix (depending on the camera).
The properties matrix and Matrixworld are well understood, the matrix represents the local model matrix, representing only the movement of the object, while Matrixworld needs to iterate to the Father node, each iteration to the left by the local model matrix of the Father object, until the scene object- Of course, it is actually the global model matrix of the left-by-father object.
Property position, rotation, scale represent the three transformation parts of the model matrix, which are described in the Matrix4 class. Rotation and Eulerorder together describe a rotational state, and quaternion can also describe a rotational state, using which method to see the Boolean value of Usequation.
As you can see, the most important "transform state" information about the Object3d object is actually stored in two "backups", one is the Matrix object, and one is the position attribute, the two should be consistent, if a backup is changed in some way, Another backup should also be updated at the appropriate time. There are other attributes that are literal and type-able to see what they mean, and are not listed separately. Let's say the function:
The function Applymatrix (matrix) takes the argument matrix to the left of the This.matrix, which is actually a transformation of the Object3d object (the transformation may take several basic transformations, but is already stored in the parameter matrix). Note that after the This.matrix has been executed, the value of the position parameter is updated immediately. This function is more "advanced" than the following several transformation functions, allowing developers to specify the transformation matrix freely, rather than "5 unit distance toward the x-axis."
Copy Code code as follows:
Applymatrix:function (Matrix) {
This.matrix.multiply (Matrix, This.matrix);
This.scale.getScaleFromMatrix (This.matrix);
var mat = new THREE. Matrix4 (). Extractrotation (This.matrix);
This.rotation.setEulerFromRotationMatrix (Mat, This.eulerorder);
This.position.getPositionFromMatrix (This.matrix);
},
The function translate (distance, axis) makes the object move distance distance in the direction specified by the axis axis. function Translatex (distance), Translatey (distance), Translatez (distance) make it forward x,y,z distance to the distance axis. Note that these functions only change the value of the position object, without changing the value of the matrix.
Copy Code code as follows:
Translate:function (distance, axis) {
This.matrix.rotateAxis (axis);
This.position.addSelf (Axis.multiplyscalar (distance));
},
Translatex:function (distance) {
This.translate (Distance, this._vector.set (1, 0, 0));
},
The function Localtoworld (vector) converts local coordinates into world coordinates, and the function worldtolocal is the exact opposite. Note that the vector local coordinates here refer to the coordinates before the transformation, i.e. the vertex coordinates of the wiper's default position.
function LookAt (eye,center,up) executes the LookAt function of its Matrix Property object (previously described, Matrix4 object also has a LookAt function), which is generally used for camera objects. The function only changes the rotation state, so when the Matrix Property object finishes executing, if the property is Rotationautoupdate True, the value of rotation or quaternion is updated, and which one depends on the attribute usequation.
The function add (object) and function remove (object) Add a child object from the current Object3d object, or delete a child object, and it is easy to understand that many Object3d objects in the scene are managed with trees.
The function traverse (callback) traverses all descendants of the caller and the caller, and the callback parameter is a function that is invoked by the caller and each descendant object callback (this).
Copy Code code as follows:
Traverse:function (callback) {
Callback (this);
for (var i = 0, L = this.children.length I < L + +) {
this.children[I].traverse (callback);
}
},
The function Getchildbyname (name,recursive) is returned by a string of objects in the caller's child element (recursive to false) or the descendant element (recursive to true) that queries the property name.
The function getdescendants (array) push all descendant objects of the caller to the array array.
Functions Updatematrix () and Updatematrixworld (force) Update the Matrix and Quaternion,scale according to the position,rotation or Matrixworld parameters. Updatematrixworld also updates the matrixworld of all descendant elements if the force value is true or the matrixworldneedsupdate value of the caller itself is true. in function Applymatrix (matrix), changes to the matrix value immediately update the Position,rotation properties, but in the function translate (Distance,axis) Change the position variables (or directly change the position and other attributes) and do not immediately update the matrix value, this should be manually called Updatematrix (). These details are noteworthy, and you may think that you should join the event listener, and once a value changes, all the others will be updated immediately, but I think it might be for this reason that updating at the right time can lead to greater efficiency-for example, changing rotation values frequently, However, it is updated only before the Matrix property is used.
Copy Code code as follows:
Updatematrix:function () {
This.matrix.setPosition (this.position);
if (this.usequaternion = = False) {
This.matrix.setRotationFromEuler (This.rotation, This.eulerorder);
} else {
This.matrix.setRotationFromQuaternion (this.quaternion);
}
if (this.scale.x!== 1 | | this.scale.y!== 1 | | this.scale.z!== 1) {
This.matrix.scale (This.scale);
This.boundradiusscale = Math.max (this.scale.x, Math.max (This.scale.y, this.scale.z));
}
This.matrixworldneedsupdate = true;
},
Updatematrixworld:function (Force) {
if (this.matrixautoupdate = = True) This.updatematrix ();
if (this.matrixworldneedsupdate = = true | | force = = TRUE) {
if (this.parent = = undefined) {
This.matrixWorld.copy (This.matrix);
} else {
This.matrixWorld.multiply (This.parent.matrixWorld, This.matrix);
}
This.matrixworldneedsupdate = false;
force = true;
}
for (var i = 0, L = this.children.length I < L + +) {
this.children[i].updatematrixworld (force);
}
},
The function deallocate manually frees the space the caller occupies and does so when the object is no longer needed.
Core::P rojectors
The class that manages the projection matrix, the code is too complex, I guess it involves the operation in the render class, wait until the appropriate time to see it.
Core::uv
The constructor produces a material coordinate class--that is, the coordinates of the material, often corresponding to the vertex, raster after each pixel has a material coordinates, and then from the material "take color" to achieve texture.
Copy Code code as follows:
THREE. UV = function (U, v) {
this.u = u | | 0;
this.v = v | | 0;
};
The material coordinate class is a simplified Vector2 class, except that the attribute name is different.
Core::ray core::rectangle core:spline
Ray class, has the origin, direction, near and far truncated point. There should be applications in the point light source. Rectangular class, Curve class, relatively simple, and not so "core", see later.
Core::geometry
The geometry class is also a very important category, representing a geometric form made up of vertices and surfaces.
Copy Code code as follows:
THREE. Geometry = function () {
THREE. Geometrylibrary.push (this);
This.id = THREE. Geometryidcount + +;
THIS.name = ';
This.vertices = [];
This.colors = [];
This.normals = [];
This.faces = [];
This.faceuvs = [[]];
This.facevertexuvs = [[]];
This.morphtargets = [];
This.morphcolors = [];
This.morphnormals = [];
This.skinweights = [];
This.skinindices = [];
This.linedistances = [];
This.boundingbox = null;
This.boundingsphere = null;
This.hastangents = false;
This.dynamic = true;
This.verticesneedupdate = false;
This.elementsneedupdate = false;
This.uvsneedupdate = false;
This.normalsneedupdate = false;
This.tangentsneedupdate = false;
This.colorsneedupdate = false;
This.linedistancesneedupdate = false;
This.buffersneedupdate = false;
};
the following two sets of properties are most important：
The property vertics is an array, and each element is an object of the Vector3 type, representing a vertex coordinate. The attribute colors and normals represent the color values and the discovery vectors corresponding to the vertices. Used only in very few cases, most of the time, the color of the vertex and the definition of the "surface" when it is found--if the cube's 6-side colors are different, each vertex is a distinct color on a different surface.
The attribute faces is an array, each element is an object of Face4 or Face3 type, and when introduced Face3, it is only the index value of the vertex that is stored in the face, and the coordinate value of the vertex can be fetched by index value in the array vertices.
here's the function.：
The Applymatrix (matrix) function updates all vertex coordinates and the normal vectors of the surface in geometry, in effect using matrix matrix to transform the Geometry form. Normalmatrix is the inversion matrix of the 3x3 matrix in the upper-left corner of the parametric matrix, which is used to rotate the vector (normal, not vertex coordinates).
Copy Code code as follows:
Applymatrix:function (Matrix) {
var Normalmatrix = new THREE. Matrix3 ();
Normalmatrix.getinverse (Matrix). Transpose ();
for (var i = 0, il = this.vertices.length i < il; i + +) {
var vertex = this.vertices[I];
Matrix.multiplyvector3 (vertex);
}
for (var i = 0, il = this.faces.length i < il; i + +) {
var face = this.faces[I];
Normalmatrix.multiplyvector3 (Face.normal). normalize ();
for (var j = 0, JL = face.vertexNormals.length J < JL; J + +) {
Normalmatrix.multiplyvector3 (face.vertexnormals[j]). Normalize ();
}
Matrix.multiplyvector3 (face.centroid);
}
},
function Computecentroid () calculates the center of gravity of each surface in a geometric form (not the center of gravity of the geometry). This function seems to be better placed on the prototype of the face class, however, because the inside of the face class cannot get the coordinates of the points (unless you then pass the reference of the point coordinate array as a parameter to the constructor, the price is large) and only the index value, you have to define it on the prototype of the Geometry class. The following functions are similar (in fact, there are few member functions in the Face Class).
The function computefacenormals () and computevertexnormals (areaweight) compute the normal vector, which affects the normal property of each element in the face array, with a face only 1 The Vertexnormal property of each element in the face array, one Face3 object has 3, one Face4 object has 4, but it should be noted that the vertices shared by multiple surfaces have only one normal vector and are affected by multiple surfaces. For example, the center at the origin, three groups of surface are perpendicular to the axis of the cube, the first quadrant of the vertex, normal vector is (1,1,1) normalized. Although it may seem inconceivable that the normals of the vertices of the plane are not perpendicular to the plane, this method of specifying the normals has a good effect when using the plane to simulate surfaces.
Function Createmorphnormal creates normals for each morph. Morph should be used to display the deformation effect of a fixed continuous animation.
The function mergevertics the same point as the coordinate value and updates the point index value in the Face object.
Core::quaternian
The four-dimensional rotation class expresses a rotational transformation in another way, which avoids the problem of universal joint deadlock compared with rotation.
Copy Code code as follows:
THREE. quaternion = function (x, Y, Z, W) {
this.x = x | | 0;
This.y = y | | 0;
This.z = Z | | 0;
THIS.W = (w!== undefined)? W:1;
};
If you don't talk about functions, Quaternian is a simple Vector4 type object.
The function Setfromeuler (v,order) sets the four-dimensional number rotation through a Euler rotation.
The function Setfromaxis (axis,angle) sets the four-dimensional rotation by rotating around any axis.
The function Setfromrotationmatrix (matrix) sets the four-dimensional number rotation through the rotation matrix.
There are some functions that are the same as the Vector4 class, which is not listed here.
