UE implements lens translation, rotation and zoom

0x00 lead

In the digital twin 3D scene, the movement and zooming of the camera are controlled by the keyboard and mouse. It is a very common and necessary behavior. It is through these operations that the user can view and control the entire 3D scene.

0x01 The keyboard controls the camera to move back and forth, left and right

Usually, we use several keyboards to control the movement of the camera, such as W forward, S backward, A left, D right.
If you are a reader who has developed threejs, you may be able to imagine the idea of listening to keyboard events. If it is the letter W, it will move the position and center of the camera forward, and other keys are similar.

However, UE encapsulates related and similar operations into new events. By configuring in the project, you can get the mapping of related events, as shown in the following figure, in the project configuration (Edit -> Project Settings -> Input):

As you can see in the image above, the W and up keys map forward MoveForward events, and the S and down keys map backward MoveForward events. Therefore, listening to the MoveForward event can realize the forward and backward movement of the camera. Similarly, listening to the MoveRight event can move to the right and left.

Add camera component

Then the previous article "UE implements the mouse click model", open the A_Pawn blueprint class, and add the camera component

After the addition is complete, it will look like this:

After the addition is complete, you can control the camera by controlling the Pawn. Because the camera is the child of changing Pawn, the change of Pawn will affect the change of the camera.

Added "floating pawn movement" component

The "floating pawn movement" component provides simple movement capabilities for the Pawn class. After specifying the "floating pawn movement" component, the Pawn class can be controlled to move.

Add the "floating pawn movement" component:

After adding, you can see:

Listen to the MoveForward event to move forward and backward

Add a MoveForward event to the blueprint:

Where Axis Value represents the zoom value of the event (1 for forward, -1 for backward). After monitoring the MoveForward, it is to control the forward and backward movement of the Pawn, and the movement of the Pawn can be controlled by "adding movement input":

The target is the Pawn class, and self can be used here (Pawn class itself, World Direction indicates the direction of movement, Scale Value indicates the scale value of the movement, generally 1 means forward, -1 backward, which is exactly the same as the previous Axis Value can correspond.

Get the rotation direction of the Pawn itself as the input of World Direction. Get the Pawn's forward vector by getting the control rotation, and then getting the forward vector by getting the control rotation. If you are familiar with webgl and threejs, this step is similar to this function:

 /**
 * 获取网元的正前方向量
 * @method frontDirection
 * @return {Vec3} 返回网元的正前方向量
 */
frontDirection : function() {
    var n = new $Vec3(0, 0, 1);
    n = n.applyMatrix4(new Mat4().extractRotation(this.matrixWorld));
    n.normalize();
    return n;
},

As shown below:

The final blueprint is as follows:

Listen to the MoveRight event to move left and right

This is similar to "Monitoring the MoveForward event to move forward and backward", which will not be described in detail here. The entire blueprint is as follows:

0x02 Mouse movement controls camera rotation

UE has two mouse events "mouse X" and "mouse Y", which indicate the movement of the mouse in the X direction and the Y direction, respectively.

Mouse X event to rotate the camera left and right

After listening to the mouse X event, you need to set the rotation of the lens. Through the blueprint node below, you can set the rotation of the Pawn.

The target is Pawn itself, and New Rotation represents the new rotation value to be set. It is a vector. This attribute can also be divided into three components, x, y, and z. The reason for splitting is because we rotate left and right, and only need to change the rotation in the direction of the Z axis.

The pins of the split structure involved later are similar to those here and may not be described separately.

First, you need to get the original rotation value, and then add a new increment based on the original rotation value. To get the rotation of the Pawn, you can get the current rotation value of the controller through "Get Control Rotation":

The target of the modified node is the controller, so you need to get the input of the controller as the target:

On the basis of the original Z-axis rotation, an increment is added. This increment is the Axis Value of the "mouse X" node, but generally speaking, the Axis Value will be relatively small, so it will be multiplied by a multiple first, and the Proportional results as increments. Add the incremental value of Z-axis rotation and assign it to the Z rotation value of the "Set Control Rotation" node.

The overall blueprint process is as follows:

Determine if the mouse is pressed

Generally speaking, we want to rotate the lens, we need to press the mouse, and then move to rotate. So we need to add a conditional judgment. First, through the following nodes, we can judge whether the mouse is pressed:

The target is the player controller, so you need to get the player controller and connect it

The key is set to the left mouse button, which means to judge the pressing condition of the left mouse button. The node can also judge other key presses.

Then add a conditional branch and use the result of the above node as the input condition of the conditional branch node:

The overall blueprint process is as follows:

The mouse Y event realizes the up and down rotation of the camera

The mouse Y event realizes the up and down rotation of the lens and the "Mouse X event realizes the left and right rotation of the lens", which will not be repeated here, the difference is that the rotation of the X axis is set.
The overall blueprint process is as follows.

0x03 Mouse wheel controls lens zoom

To achieve scroll wheel zoom, you need to use the spring arm assembly. First add a spring arm component to the blueprint, as shown below:

After adding, you need to add the spring arm as the father of the camera, so that the change of the spring arm will change the lens together:

The spring arm component has a length property, and by changing this length, the telescopic effect can be achieved.

First listen for mouse wheel events:

Then set the length of the spring arm, you can drag the spring arm component to the blueprint:

To set the length, first get the original length,

Finally, add a length to the original length, and the entire blueprint is as follows:

0x04

This article describes the translation, rotation and zooming of the lens through blueprints. It involves a lot of knowledge points and needs to be viewed carefully and patiently.

If you have a good experience, you are also welcome to communicate with me. Follow the official account "ITMan Biao Shu", you can add the author's WeChat to communicate, and receive more valuable articles in time.