Three.js 3D model geometry rotation, scaling and Translation

To create a 3D model in the scene, you often need to set the display size, position and angle JS provides a series of geometric transformation methods of mesh model objects. From the perspective of WebGL, rotation, scaling and translation correspond to the model transformation matrix. For the content of matrix transformation, you can watch the native WebGL Course published by my blog.

For the rotation, scaling, translation and other methods or properties of mesh model objects, you can find three Object3D object of JS document, which is the base class of grid model object, point model object and line model object.

zoom

The cube mesh model is magnified twice in the x-axis direction. If the statement is executed twice in a row, it is equivalent to 4 times more than the original method

mesh.scale.x = 2.0;//2X magnification in x-axis direction

The cube mesh model is reduced by 0.5 times as a whole, which is equivalent to 0.5 times in xyz three directions respectively

mesh.scale.set(0.5,0.5,0.5);//Reduced to 0.5 times the original

The return value of Mesh attribute scale is a Vector3 object. Check three JS official document, you can know that the Vector3 object has attributes x, y and z. for the above code, xyz represents the coordinate value, the xyz data type is float, and the Vector3 object also has a method set(), which has three parameters representing xyz coordinates.

translation

The cube mesh model translates 100 along the positive direction of the x-axis. This statement can be executed multiple times, and each execution is a translation transformation relative to the last position

mesh.translateX(100);//Translate the distance 100 in the positive direction of the x axis

The mesh model translates 100 along the direction represented by the vector (0,1,0)

var axis = new THREE.Vector3(0,1,0);//Vector axis
mesh.translateOnAxis(axis,100);//Translate 100 in the direction indicated by the axis axis
translateOnAxis(axis, distance)Method comparison.translateX,.translateY,.translateZ More general, the rotation and translation of the cube in any direction can be realized, and the parameters axis Represents the translation direction, using the object Vector3 express

rotate

The cube mesh model rotates π / 4 around the x-axis of the cube. This statement can be executed multiple times, and each execution is a rotation change relative to the last angle

mesh.rotateX(Math.PI/4);//Rotate π / 4 around the x-axis

The mesh model rotates π / 8 around the axis represented by the (0,1,0) vector

var axis = new THREE.Vector3(0,1,0);//Vector axis
mesh.rotateOnAxis(axis,Math.PI/8);//Rotate π / 8 about Axis axis
rotateOnAxis(axis, angle)Method comparison.rotateX,.rotateY,.rotateZ More general, the cube can rotate around any axis, and the parameters axis Represents the axis of rotation, using objects Vector3 express

Position attribute position

Cube grid model position coordinates (80,2,10)

mesh.position.y = 80;//Set the y coordinate of the geometric center of the mesh model

The coordinate value of y axis of geometric center of cube mesh model is 80

mesh.position.set(80,2,10);//Set the 3D coordinates of the geometric center of the mesh model
position Attributes and translation methods translateX()The same way is to set the distance translateX()When the method is executed twice, the distance will be superimposed, position The distance set by the attribute is relative to the origin position of the coordinate system, which is executed twice position The attribute cube will only be updated and relocated, and the distance parameter twice is not the superposition relationship, but the replacement relationship.

Angle attribute rotation

Cube grid model position coordinates (80,2,10)

mesh.position.y = 80;//Set the y coordinate of the geometric center of the mesh model

The coordinate value of y axis of geometric center of cube mesh model is 80

mesh.position.set(80,2,10);//Set the 3D coordinates of the geometric center of the mesh model

The difference between the rotation attribute and the rotation method rotateX() is similar to the difference between the position attribute and the translation method translateX(). One is to set the angle and position relative to the coordinate system, and the other is to set the angle and position parameters relative to the current state of the 3D model. Rotation and translation refer to the coordinate system, but the reference coordinate system is slightly different. Translation refers to the world coordinate system or the coordinate system of the 3D Scene object Scene. Like the camera object, the position in the whole 3D Scene, and the rotation of the 3D model refers to the model coordinate system, that is, the coordinate system established for the 3D model itself.

Base class Object3D

The base classes of threejs model objects such as point model Points, Line model Line, Sprite model sprite and Group object Group are Object3D. You can view the threejs document base class Object3D for the angle, position, scaling attribute, rotation, translation and scaling method of these model objects

Geometry transformation

Geometry and mesh model mesh also have rotation, scaling and translation methods. The model can be transformed through mesh model or geometry, but the essence is different. Mesh model mesh performs rotation, translation and scaling changes, which will not change the vertex coordinates of its bound geometry, but will change the model matrix corresponding to the model, The rotation, scaling and translation transformation of geometry will change the vertex position, normal vector and other data contained in the geometry itself.

If you don't understand the above description, you'd better take a look at the introduction of geometry vertices in Chapter 2 of threejs Course published by my blog and the introduction of concepts such as model matrix in threejs advanced course.

The following program creates multiple mesh models through one geometry. The mesh model can share both geometry objects and material objects. The geometry object is essentially a set of vertex related data. Each creation of a mesh model is equivalent to rendering multiple three-dimensional models using the same set of fixed-point related data in the video memory for many times, Although the geometry vertices are the same set of data, they can be matrix transformed in the GPU shader to show different effects.

/**
 * Create grid model 1 and grid model 2
 */
var box=new THREE.BoxGeometry(50,50,50);//Create a cube geometry object
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//Material object
var mesh1=new THREE.Mesh(box,material);//Mesh model object 1
var mesh2=new THREE.Mesh(box,material);//Mesh model object 2
mesh1.translateX(-50);//Translate the distance 50 in the negative direction of the x-axis
mesh2.translateX(50);//Translate a distance of 50 in the positive direction of the x-axis
scene.add(mesh1);//Add mesh model 1 to the scene
scene.add(mesh2);//Add mesh model 2 to the scene
 Grid model in code mesh1,Grid model mesh2 All through the same geometry object Geometry Create. By default, the vertex position of the geometry object determines the display position of the mesh model in the scene. The two mesh models execute the same method translateX()Perform translation transformation and stagger the display. Translation transformation method of mesh model translateX()Will pass three.js Engine conversion to WebGL in CPU Matrix transformation program of vertex shader.

Change the above program, insert the following code, and zoom in on one of the grid models. You can see that the display size of the other grid model is not affected.

mesh2.scale.y = 2.0;//Double magnification in y-axis direction

The mesh model object can be transformed by scaling, translation and rotation, and the geometric object also has relevant geometric transformation methods and attributes. The geometric transformation of the geometry essentially changes the vertex related data in the display memory. The geometric transformation of the mesh model will not change the vertex data in the display memory, The transformation of vertex data is to perform matrix multiplication by vertex with the help of program in the vertex shader processing unit of GPU rendering pipeline.

The geometry object executes the method scale(), and the size is reduced to 0.5 times of the original. Refresh the browser and you will see that the cubes represented by the two mesh models are reduced. Compared with the above program, you can see that changing the parameters of the geometry will change the relevant mesh models. It is well understood that the geometric transformation of the mesh model changes the model matrix to be multiplied with the vertex data, and the transformation of the geometric object is more tired. What is refreshed is the vertex related data on the video memory. Each time a mesh model is rendered, the vertex data will be obtained from the vertex object specified by the mesh model construction function.

var box=new THREE.BoxGeometry(50,50,50);//Create a cube geometry object
box.scale(0.5,0.5,0.5);//The geometry is reduced by 0.5 times

Geometric objects can be scaled and transformed in the above program. Naturally, there are relevant methods of translation and scaling transformation. For specific methods, please refer to three The Geometry object of JS document and the result returned by the constructor of cube, sphere and other Geometry are Geometry objects. The objects returned by these constructors will inherit the properties and methods of Geometry objects.