Three.js Study Notes (1)--coordinate system and rotation

Preface

JavaScript 3D Library

The aim of the project is to create a easy-to-use, lightweight, 3D library. The library provides <canvas>, <svg>, Css3d and WebGL renderers. ( the goal of the project is to create an easy-to-use, lightweight 3D library.) The library provides the <canvas>,<svg>,css3d and WebGL renderers. )

Example  -  Document  -  Wiki  -  Migration  -  Help

Official website: https://threejs.org

Github:https://github.com/mrdoob/three.js

Learn Three.js, you can start with the Three.js Development Guide, there is a PDF of Chinese electronic documents. Electronic Document code: HTTPS://GITHUB.COM/JOSDIRKSEN/LEARNING-THREEJS.

1, 3D Space coordinate system

In Threejs, the coordinates of the XYZ axis, the x-axis is red, the y-axis is green, and the z-axis is blue.

Http://www.cnblogs.com/silent-stranger/p/6307372.html

1 coordinate system (camera Space)

One particular object coordinate system is the camera coordinate system, which is the coordinate system used by our viewpoints to render the scene we see. In the camera coordinate system, the camera is always at the origin of the camera's coordinate system, the direction of the +x is to the right, the direction of the +z is forward (toward the screen, because the left-hand coordinate system is used), and the direction of the +y is upward. The image here is not the top of the world's coordinates, but the upper direction of the camera. Take a look at the picture of this camera coordinate system.

Here are some details, the camera coordinates are three-dimensional space, and what we see on the screen is two-dimensional.
Because we do a mapping, the three-dimensional space of things mapped to a two-dimensional plane, this map is known as "projection".

2, two-dimensional plane rotation formula

1 x1=math.cos (angle) *x-math.sin (angle) *y; 2 y1=math.cos (angle) *y+math.sin (angle) *x; 3 // where x, y represents the coordinates of the object in relation to the angle of rotation of the angle rotation point, 4 //   X1,y1 Indicates the coordinates of the object relative to the rotation point after the rotation of the angle

Mathematically, this formula can be used to calculate the coordinates at which a point rotates at a certain angle around another point,

For example, if a (x, y) rotates the β degree around B (A, a) to C (C,d), the x,y,a,b,β,c,d has the following relationship:

1. Set a point before the angle of the rotation is δ, then the rotation (counterclockwise) to the C point after the angle of δ+β

2. Distance of two points for A, B: dist1=| Ab|=y/sin (δ) =x/cos (δ)

3. Distance to c,b two points: dist2=| Cb|=d/sin (δ+β) =c/cos (δ+β)

4. Apparently Dist1=dist2, set dist1=r so:

R=x/cos (δ) =y/sin (δ) =d/sin (δ+β) =c/cos (δ+β)

5. Known by trigonometric and differential equations:

Sin (δ+β) =sin (δ) cos (β) +cos (δ) sin (beta)

cos (δ+β) =cos (δ) cos (β)-sin (δ) sin (beta)

So the result is:

C=r*cos (δ+β) =r*cos (δ) cos (β)-r*sin (δ) sin (Beta) =x*cos (Beta)-y*sin (Beta)

D=r*sin (δ+β) =r*sin (δ) cos (β) +r*cos (δ) sin (Beta) =y*cos (Beta) +x*sin (Beta)

That is, the coordinate c,d after rotation is only related to the coordinates x, y and rotation angle β before rotation.

It is easy to understand that the C point after point A is always moving around the circumference with a radius of | Ab|, this allows the object to move around the circumference, that is, to rotate the object.

3, three-dimensional space rotation formula

"Turn" https://www.cnblogs.com/silent-stranger/p/6027266.html

In three-dimensional space, there are two kinds of geometric transformations, one is the position transformation, the other is the same as the two-dimensional space. Suppose a point P (X1,Y1,Z1) moves to Q (X2,Y2,Z2) as long as the coordinate value of P point is simply added to the offset value. But the rotation transformation of three-dimensional space can not simply use the transformation of two-dimensional space. Here is a detailed description of the rotation of three-dimensional space.

The rotation of a two-dimensional space can be seen as a rotation around a point, with only one degree of freedom. And the rotation of the three-dimensional space revolves around a line. When the axis of rotation is the z-axis, the rotation can be thought of as the rotation of the XY plane in the two-dimensional plane, and the center point of rotation is P (x=0,y=0). According to the law of the right hand, the thumb points to the positive direction of the z axis and the four fingers to the positive direction of rotation. The rotation of the y-axis and the x-axis is similar. It can be combined according to the rotation of different axes. For example, the z-axis is rotated 45 degrees and then rotated 45 degrees by the y-axis. But each direction can be seen as an object that rotates at an angle around an axis at its original position.

　　　　　　　　　　　　　　　　　

There are several ways to rotate three-dimensional space, such as the rotation matrix, Euler angle, four-dollar number:

1. Euler's angle (Euler Angle)

Euler's angle is the most intuitive way to rotate, as it is represented by the rotation of the object in the coordinate system of three axes X (1,0,0), Y (0,1,0), Z (0,0,1). Here the first two concepts, 1 Reference system: Similar to the physical reference system, is stationary, such as the North Star, no matter where it is north. 2 coordinate system: Coordinate system is fixed to the object, with the rotation of the object changes, the simplest example is left and right, the left side of the person is always based on the direction of the people to decide. The medium blue is the three axes of the reference system, and the red is the three axes of the object's coordinate system. Although the rotation represented by Euler's angle is composed of several rotations along the axis. But the order of rotation is different, so the order of rotation in Euler's angle should be noted. The three corners here are the Euler angles of the zxz. The object rotates the α° around the z-axis, then the position of the x-axis of the object's coordinate system changes to the position of N in the graph, then rotates the β° around the N-axis (x-axis), and then rotates γ° along the z-axis.

Although the rotation of Euler's angle is the most intuitive, there is a very deadly problem-universal joint lock, roughly refers to. A rotation of 90° will cause the other two axes to overlap, thus losing one degree of freedom. Unable to track the object very well. Specifically, you can look at this video universal joint lock. It is very clear that we will not repeat it here.

Euler angle rotation is used in many first-person 3D games, although the gimbal lock is unavoidable, but the probability of triggering can be minimized. A universal joint lock is triggered only when the person's gaze is completely up or down.

2. Rotation matrix (Rotation matrices)

the rotation of the three-dimensional space is easier represented by the rotation matrix, and the rotation matrix is a 3x3 matrix. Can be thought of as an object that rotates the θ° along one of the axes (x, Y, z) in space. The three-dimensional rotation matrix can be expressed as:

of which: C=cos (θ), s=sin (θ), t=1-cos (θ)

Assuming that the rotation matrix of an object at its initial position is a, the rotation matrix after rotation is a ', then the relationship between A,a ' and R can be expressed as a ' = AR.

3. Four USD (Quaternion )

The four-dollar number is a high-order complex number, and a four-tuple Q represents:Q=(X,Y,Z,W)=xi+y j +z k+w   A four-tuple can be written as a combination of a vector and a real number. q = ( v  ?     +w) = ( (x,y  z ) ,w)    A four-tuple can also be represented by a matrix.

This matrix and the rotation matrix can be proved to be a matrix.

In mathematics, the rotation of the four-dollar number is better, but in the program design, the rotation matrix is more convenient. The use of a four-dollar number in Three.js also replaces the four-dollar number with the rotation matrix.

4, Three.js in the rotation of the implementation

Three.js supports the above mentioned three ways of rotation.

1. Euler angle

The objects in the scene in Three.js belong to the Object3d class. There is a property in this class that represents the object's orientation –rotation, which is a Euler-type value, with three axes rotated at an angle, in π, and in a rotating order. To make the object rotate, you can change the value of this rotation. For example, the object is rotated in the positive direction of the Y axis 45 ° can be written as Object3d.rotation.y+=0.25*math.pi. The rotation sequence here uses the ' XYZ ' ORDER by default. In addition Object3d provides several methods for rotating, rotatex (angle), Rotatey (angle), Rotatez (angle), respectively, in accordance with the x, Y, Z axis of the positive and negative rotation of an angle. But the specific use of the time and object3d.rotation.y+=0.25*math.pi this way there are some differences. Another way is that Rotateonaxis (axis,angle) can specify the axis of rotation, where axis is a Vector3-type value.

2. Matrix

The matrix in Three.js is not quite the same as it was previously introduced, because the matrix in Three.js is a 4x4 composite matrix (Transform matrix) that places the position information in the last line of the matrix. It is easy to decompose the rotation matrix (Rotation matrix) from this matrix, and the position matrix (translation matrix). The main methods of MATRIX4 are:

Mutiply (): Multiplication of matrices.
Transpose (): Matrix transpose.
Getinverse (m): Inverse matrix.
Makerotationfromeuler (Euler): Sets the value of a matrix by a value of a Euler type.
Makerotationfromquaternion (q): Sets the Matrix by a value of four-tuple type.
Makerotationonaxis (Axis,theta): Rotates θ° by one axis, then sets the value of the matrix.
The source code for Makerotationonaxis (Axis,theta) is:

1Makerotationaxis:function(axis, angle) {2     varc =Math.Cos (angle);3      vars =Math.sin (angle);4     vart = 1-C;5     varx = axis.x, y = axis.y, z =axis.z;6     vartx = T * x, Ty = t *y;7      This. Set (8TX * x + C, TX * Y-s * z, TX * z + S * y, 0,9TX * y + S * z, ty * y + c, ty * z-s * x, 0,TenTX * Z-s * y, Ty * z + S * x, T * z * z + C, 0, One0, 0, 0, 1 A     ); -      return  This; -}

Through the source code, it can be seen that call this method can get a rotation matrix. Then, the matrix of the object's rotation can be obtained by multiplying the matrix by the rotation matrix.

Here is a section of the code that I use to rotate the object using a rotation matrix.

function Rotatearoundworldaxis (object, axis, radians) {    new  three. Matrix4 ();    Rotworldmatrix.makerotationaxis (Axis.normalize (), radians);    Rotworldmatrix.multiply (Object.matrix);                 // pre-multiply    Object.matrix = Rotworldmatrix;    Object.rotation.setFromRotationMatrix (Object.matrix);}

In this way, the object can be rotated along a certain axis in the reference system.

3. Four USD

No use of four yuan, so no research, set rotation in Object3d can be through the matrix, but also through the quaternion, but Setfromrotationquaternion's interior is also used in the matrix.

Coordinate system: http://www.cnblogs.com/silent-stranger/p/6307372.html

Three-dimensional space rotation: https://www.cnblogs.com/silent-stranger/p/6027266.html

Three-dimensional rotation matrix:https://wenku.baidu.com/view/6dac0c22915f804d2b16c17c.html

Resources

https://www.fastgraph.com/makegames/3drotation/

Http://www.essentialmath.com/GDC2012/GDC2012_JMV_Rotations.pdf

http://www.gamedev.net/page/resources/_/technical/math-and-physics/do-we-really-need-quaternions-r1199

https://threejs.org/docs/

Three.js Study Notes (1)--coordinate system and rotation