[SOLVED] How to make the camera to point to the mouse?

Help & Support
1

Can someone explain how I would do camera movement like in this project. I already know how to do the movement.
https://playcanvas.com/project/405842/overview/tutorial-fps-movement
I’ve looked at a lot of posts, but the problem is I dont understand how it works so I don’t know how to use it. so if someone could explain it, that would be nice.

2

The code that implements the camera look direction is here:

https://playcanvas.com/editor/code/405842?tabs=4468263

ChatGPT does a lovely job of explaining it for you:

The camera view direction in the FirstPersonMovement script is primarily controlled by mouse movements, which manipulate the camera’s orientation based on user input. Here’s a breakdown of how this functionality is achieved:

Mouse Movement Handling

The script listens for mouse movement events using:

app.mouse.on("mousemove", this._onMouseMove, this);

This sets up an event listener that triggers the _onMouseMove function every time the mouse moves.

Updating Camera Angles

Inside the _onMouseMove method, the script updates the camera’s Euler angles, which represent its rotation around the Y-axis (vertical) and X-axis (horizontal). This is done by adjusting these angles based on the mouse’s movement distances along the X (e.dx) and Y (e.dy) axes:

this.eulers.x -= this.lookSpeed * e.dx;
this.eulers.y -= this.lookSpeed * e.dy;
  • this.eulers.x and this.eulers.y store the current rotation angles of the camera.
  • this.lookSpeed is a script attribute that controls the sensitivity of the camera’s movement. Multiplying this speed by the mouse movement distances (e.dx and e.dy) determines how much the camera should rotate.
  • The rotation around the X-axis (this.eulers.x) affects the up and down movement (pitch), while rotation around the Y-axis (this.eulers.y) affects the left and right movement (yaw).

Locking Pointer and Camera Updates

The script enables pointer lock when the mouse is clicked, which confines the cursor to the canvas and hides it, providing a seamless first-person camera experience:

app.mouse.on("mousedown", function () {
    app.mouse.enablePointerLock();
}, this);

While the pointer is locked or the left mouse button is pressed, the camera angles are updated:

if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
    // Update eulers based on mouse movement
}

Applying the Camera Rotation

The updated Euler angles are then applied to the camera entity to adjust its orientation in the game world:

this.camera.setLocalEulerAngles(this.eulers.y, this.eulers.x, 0);

This line sets the local Euler angles of the camera entity, where this.eulers.y is used for the yaw (turning left or right), this.eulers.x is used for the pitch (looking up or down), and the roll is set to 0 since it’s typically not needed in a first-person perspective.

Summary

The camera view direction is controlled by capturing and translating mouse movements into changes in the camera’s Euler angles. These angles dictate the orientation of the camera within the game world, enabling the player to look around by moving the mouse. This setup is typical for first-person movement controls, providing an intuitive and responsive method for player interaction in 3D environments.

1 Like
3

Thank you so much.

4

Thank you! This could as well go to the tutorial section of the FPS project!