Three.js is a great WebGL open Source Library that simplifies 3D programming in browsers, making it much easier to use JavaScript to create complex scenes in browsers. GitHub on many WebGL demo makes me excited unceasingly, eager. Because the library is still in the development phase, so the information is very scarce, enthusiasts have to read the source of the library to learn most of the time, I am also ready to do so.
This is the first note, starting with the most basic core object.
Core::vector2
This constructor is used to create an object that represents a two-dimensional vector
Copy Code code as follows:
THREE. Vector2 = function (x, y) {
this.x = x | | 0;
This.y = y | | 0;
};
The functional functions of the Vector2 object are implemented using a prototype object that defines the constructor, in the form of:
Copy Code code as follows:
THREE. Vector2.prototype = {
Constructor:three. Vector2,
Set:function (x, y) {
this.x = x;
This.y = y;
return this;
},
Copy:function (v) {
This.x = v.x;
This.y = V.Y;
return this;
},
...//More Functions
};
The function set (X,y) is used to specify the value of a vector, and the x,y value of the caller itself is affected, and the method itself returns to the caller itself, which is common, as the following no longer explains. It is no longer possible to refer to the source code with functions that can be expressed clearly by text.
function Copy (v) is used to copy the vector v into the caller.
function Add (a,b) and function sub (A,B) represent the addition and subtraction of vector a,b respectively.
The function addself (v) and subself (v) respectively denote or subtract vector v from the caller itself.
The functions Multiplyscale (s) and Dividescale (s) respectively represent the caller itself multiplied or divided by S.
The function lerpself (v,alpha) Rotates the caller to the direction of V, and when alpha is 1 o'clock, the caller is ultimately equal to V, and when alpha=0, the caller is equal to the original.
Copy Code code as follows:
Lerpself:function (V, Alpha) {
This.x + + (v.x-this.x) * ALPHA;
This.y + + (V.Y-THIS.Y) * ALPHA;
return this;
},
function negate () against the caller.
function dot (v) returns the point multiplication of the caller and Vector V of the float type.
The function lengthsq () and function length () returns the square or length of the caller's length of the float type.
The function normalize () normalized the caller itself.
Functions distancetosquared (v) and Distanceto (v) return the distance between the caller and the vector v. The distance here is actually the distance between the ends of the two vectors at the origin, i.e. the length of the vector this-v.
The function setlength (s) scales the length of the vector to S, and the direction is unchanged.
The function equals (v) determines whether the caller is the same as the value of the vector v.
The function Iszero () determines whether the caller is a 0 vector.
The function clone () returns a new vector like the caller's value, which is equivalent to copying it out, noting the difference from copy (v).
Core::vector3
This constructor creates an object that represents a three-dimensional vector
Copy Code code as follows:
THREE. Vector3 = function (x, y, z) {
this.x = x | | 0;
This.y = y | | 0;
This.z = Z | | 0;
};
There are many similarities between three-dimensional vectors and two-dimensional vectors, such as Set,add,dot,length,clone, which are omitted here, and only some functions that are more than two dimensional vectors are recorded.
Functions Setx (x), Sety (y), and Setz (z) are used to set the value of a component individually.
The function Cross (a,b) and crossself (v) respectively make the caller into a a,b fork or a fork of the caller itself and V. A fork is a vector that is perpendicular to the two vectors that participate in the fork multiplication and assumes the right hand helix rule.
The function Getpositionfrommatrix (m), Getrotationfrommatrix (M), Getscalefrommatrix (m) extracts the position component, the rotational component and the scaling component from the 4x4 model matrix. The model matrix represents the superposition effect of a series of translation, rotation and scaling transformations. (The second function appears in the document and is replaced by two other functions in the source code, perhaps not yet updated).
function AngleTo (v) calculates the angle between the caller and the vector v.
Core::vector4
This constructor creates an object that represents a four-dimensional vector
Copy Code code as follows:
THREE. Vector4 = function (x, Y, Z, W) {
this.x = x | | 0;
This.y = y | | 0;
This.z = Z | | 0;
THIS.W = (w!== undefined)? W:1;
};
The four-dimensional vector is used to represent homogeneous coordinates, the function of which is coincident with the function in the Vector2,vector3, just one more component, which is no longer recorded here.
core::matrix3
The constructor creates an object that represents the 3x3 matrix
THREE. Matrix3 = function () {
this.elements = new Float32array (9);
};
The 3x3 matrix has 9 elements, stored in the property elements of the Matrix object, and elements is an array.
The function Getinverse (m) returns the inverse matrix of the matrix m while changing the caller itself.
function transpose () transpose the caller.
function Transposetoarray (r) transpose the caller into array r without altering itself. (This place seems to be the source code is wrong, var m=this.m should be Var m=this.elements.) ）
core::matrix4
The constructor creates an object that represents the 4x4 matrix, which is very important in three-dimensional graphics, and the model matrix, the view matrix, and the projection matrix are all such matrices.
Copy Code code as follows:
THREE. Matrix4 = function (N11, N12, N13, N14, N21, N22, n23, N24, N31, N32, N33, N34, N41, N42, N43, N44) {
this.elements = new Float32array (16);
This.set (
(N11!== undefined)? N11:1, N12 | | 0, N13 | | 0, N14 | | 0,
N21 | | 0, (n22!== undefined)? N22:1, n23 | | 0, N24 | | 0,
N31 | | 0, N32 | | 0, (n33!== undefined)? N33:1, N34 | | 0,
N41 | | 0, N42 | | 0, N43 | | 0, (n44!== undefined)? N44:1
);
};
Several functions that appear in the Matrix3 object have the same effect in Matrix4, and are omitted here.
The function identity () resets the object to the unit array.
The function LookAt (eye,center,up) sets the object as a view matrix, and the parameters are Vector3 objects that only use the relative position of eye and center. The view matrix indicates that the camera looks at the center position in the eye position, and the upward vector (which later explains) is the view matrix for up. The view matrix can also be viewed as the camera's model matrix, so the matrix produced by the function can also represent the following transformations: Moving the object from the origin to the position center-eye, and then rotating the vector up to the up. The up vector up is used to fix the camera, and it can be imagined that when the camera is fixed at a point, the lens is in a fixed direction, or it can be freely rotated in a dimension, the up vector fixed the dimension of the camera.
Copy Code code as follows:
Lookat:function (eye, Target, up) {
var te = this.elements;
var x = THREE. MATRIX4.__V1; Empty Vector3 Object, hereinafter
var y = THREE. MATRIX4.__V2;
var z = THREE. Matrix4.__v3;
Z.sub (eye, target). Normalize ();
if (z.length () = = 0) {
Z.Z = 1;
}
X.cross (up, z). Normalize ();
if (x.length () = = 0) {
z.x + 0.0001;
X.cross (up, z). Normalize ();
}
Y.cross (z, x);
Te[0] = x.x; TE[4] = y.x; TE[8] = z.x;
TE[1] = x.y; TE[5] = y.y; TE[9] = z.y;
TE[2] = x.z; TE[6] = y.z; TE[10] = z.z;
return this;
},
function Multiply (a,b), Multiplyself (v), and Multiplytoarray (a,b,r) multiply two matrices.
The function Multiplyscale (s) multiplies all 16 elements of an object by S.
Functions MultiplyVector3 (v) and MultiplyVector4 (v) Take the object matrix to the left by a four-dimensional line vector, returning the row vectors of the Vector3 and Vector4 types. If the object matrix is a model view matrix, the input vector is the point position information, then the output vector is after the model transformation and the camera transformation, the point relative to the camera position. When you enter a Vector3 type vector, it is automatically replenished to the homogeneous coordinates, and then the fourth component is cut off to normal coordinates when returned.
function RotateAxis (v) uses the 3x3 matrix in the upper-left corner of the object matrix to take the left multiplication vector v to get a new row vector and normalized it to return the new line vector. The function also updates the value of the vector v. The sub-matrix in the upper-left corner of the model view matrix contains the rotation information in the model matrix, and the new vector is actually obtained by rotating the original vector (the rotation effect comes from the model matrix). So the function is named RotateAxis.
Copy Code code as follows:
Rotateaxis:function (v) {
var te = this.elements;
var vx = v.x, VY = v.y, vz = v.z;
v.x = VX * Te[0] + vy * te[4] + vz * te[8];
V.Y = VX * te[1] + vy * te[5] + vz * te[9];
V.Z = VX * te[2] + vy * te[6] + vz * te[10];
V.normalize ();
return v;
},
function Crossvector (v) computes the Cross of a Matrix object (caller) and V, which is actually the object matrix left by the four-dimensional line vector V, which returns the vector. I haven't figured out what this is for.
Copy Code code as follows:
Crossvector:function (a) {
var te = this.elements;
var v = new THREE. Vector4 ();
v.x = te[0] * a.x + te[4] * a.y + te[8] * a.z + te[12] * A.W;
V.Y = te[1] * a.x + te[5] * a.y + te[9] * a.z + te[13] * A.W;
V.Z = te[2] * a.x + te[6] * a.y + te[10] * a.z + te[14] * A.W;
V.W = (A.W)? TE[3] * a.x + te[7] * a.y + te[11] * a.z + te[15] * A.W:1;
return v;
},
function determinant () computes the determinant value of the matrix.
function Flattentoarray (flat) and function flattentoarrayofset (flat,offset) dump matrices into one-dimensional arrays, the previous function is stored from flat[0 to flat[15], and the latter function allows you to specify where to start the store , stored from flat[offset] to flat[offset+15].
function getposition () and function setposition () are used to get or set the position component of a matrix object. Just as the rotational component is stored in the 3x3 matrix of the upper-left corner, the position component is stored in the first three components of line fourth, i.e. element[12], element[13], element[14].
function Getcolumex (), Getcolumey (), Getcolumez () Extract three columns of the 3x3 matrix in the upper left corner respectively.
The function compose (Translate,rotation,scale) sets the object matrix to the translation represented by the Vector3 type translate object, the rotation represented by the Matrix3 type rotation object, A transformation matrix that is grouped together by the scaling of the three transformations represented by the Vector3 type scale object. In fact, it is the corresponding subspace that fills directly into the model matrix.
function decompose (Translate,rotation,scale) disassembles a matrix object into three objects, just as opposed to the previous function.
Functions Extractposition (m) and Extractrotation (m) Extract the component of position or rotation in the matrix object m into the caller object, such as two objects passing through multiple transformations. Only one object's model view matrix extractrotation the Model view matrix of another object, and the caller retains the same rotational orientation as the other object.
function translate (v) is one of the most basic transformations of the Model matrix: the translation transformation, which converts the object of the model matrix to the vector v.
function Rotatex (angle), Rotatey (angle), Rotatez (angle) Rotate the object of the model matrix around the x,y,z axis, respectively angle.
The function rotatebyaxis (axis, angle) Rotates the object of the model matrix around an arbitrary axis axis rotation angle angle, which is a multiple overlay of the transformations involved in the top two (the superposition parameters are determined by the current position and axis parameters), and I am in the Model view matrices and projection matrices: WebGL Note (1) has discussed the issue of rotation around arbitrary axes.
Shouldn't there be a scale (s) function here? But I did not find in the source code.
function Maketranslate (x,y,z), Makerotationx (theta), Makerotationy (theta), Makerotationz (theta), Makerotationaxis (axis, Angle), the Makescale (s) function resets the object matrix directly to a matrix that the unit array passes once, or rotates around an axis, or simply scales one at a time. The function updates the value of the object itself, and the result of the update has nothing to do with the value before the object (which is also characteristic of the make prefix function).
function Makefrustum (...), makeperspective (...), makeorthographic (...) It is also used to initialize the new matrix, which is discussed in the camera class, and I think the functions of the camera class must be called.
The function clone () copies the matrix object and returns it.
Core::face3
This function creates a triangle plane object
Copy Code code as follows:
THREE. Face3 = function (A, B, C, normal, color, materialindex) {
THIS.A = A;
this.b = b;
THIS.C = C;
This.normal = Normal instanceof THREE. Vector3? Normal:new THREE. Vector3 ();
This.vertexnormals = Normal instanceof Array? Normal: [];
This.color = Color instanceof THREE. Color? Color:new THREE. Color ();
this.vertexcolors = Color instanceof Array? Color: [];
This.vertextangents = [];
This.materialindex = Materialindex;
this.centroid = new THREE. Vector3 ();
};
The A,b,c value of an object is an index of three vertices (it will be said that the mesh object stores all the points as an array), as the name suggests normal is normal; Materialindex is the vertex material index: These parameters can be passed in the Vector3 type and the array type can be passed in.
The Clone (x) method returns a new object that has the same value.
Core::face4
The function creates a four-vertex face, almost as FACE3, omitted.
Core::math
THREE. Math is a "static class" that does not have constructors and therefore does not need to be initialized with the new keyword. This class provides some of the necessary mathematical tools.
The function clamp (x,a,b) clips x in the interval [a,b]. Clampbottom (X,a) is similar in function, except that one side is clamped.
The function maplinear (X,A1,A2,B1,B2) calculates a value of Y, which causes the point (X,y) to fall on a straight line (A1,A2) and (B1,B2).
Copy Code code as follows:
Maplinear:function (x, a1, A2, B1, B2) {
Return B1 + (X-A1) * (B2-B1)/(A2-A1);
},
function Random16 (), Randint (Low,high), Randfloat (Low,high), Randfloatspread (range) generate 16-bit random floating-point numbers [0,1] interval, [low,high] interval random integers , [Low,high] interval random floating-point number, [-RANGE/2,RANGE/2] interval random floating-point number.
function sigh (x) returns +1 or-1 according to the symbol of X.
Core::clock
The constructor creates a clock (or, indeed, a stopwatch) object
Copy Code code as follows:
THREE. Clock = function (AutoStart) {
This.autostart = (autoStart!== undefined)? Autostart:true;
This.starttime = 0;
This.oldtime = 0;
This.elapsedtime = 0;
This.running = false;
};
The function start () and stop () are used to start the timer or stop the timer.
function Getdelta () returns the length of time at which the function was called when the function was invoked, and returns the length of time at which the distance begins when the function was first called. If the Autostart value is true, if the start () function has not been invoked or the stop () function has been invoked when the Getdelta () function is invoked, the timer automatically starts and returns 0. If the autostart () value is false, the call to Getdelta () returns 0 before start () is invoked or after stop ().
function GetElapsedTime () returns the time at which the function is invoked when the distance begins.
Core::color
This constructor constructs an object that represents a color
Copy Code code as follows:
THREE. Color = function (hex) {
if (hex!== undefined) this.sethex (hex);
return this;
};
function Sethex (hex) Sets the R,g,b property of an object in a hexadecimal sequence. In fact, in an object, the color is ultimately stored with these three properties.
Copy Code code as follows:
Sethex:function (hex) {
Hex = Math.floor (hex);
THIS.R = (hex >> & 255)/255;
THIS.G = (Hex >> 8 & 255)/255;
this.b = (Hex & 255)/255;
return this;
},
Functions Setrgb (R,G,B) and SETHSV (H,S,V) Set objects in RGB or HSV values.
function Gethex () returns a 16-color value.
function copygammatolinear (color), Copylineartogamma (color) The color of the RGB values squared or square, assigned to the caller object.
Functions Convertgammatolinear () and Convertlineartogamma () are squared or open to the caller's own RGB values.
