Jump to content

Manipulating the free camera


Recommended Posts

I am trying the add first person controls to my world and want to basically have the WASD keys act like the Arrow keys, but also would like to have the camera's rotation lock onto the mouse so that when the mouse moves upward the camera looks up, etc. I researched and found this post

But unfortunately nothing was resolved.


What property of the camera controls its movement relative to its current position? What I mean is  if I want to move the camera forward relative to where it is currently pointing, and regardless of the global axis, which property do I need to change?

I am tried to change camera.rotation.x but nothing is happening to rotate it, I am doing something wrong?

Here is my playground. The relevant stuff happens within the move/rotate player functions




Link to comment
Share on other sites


I did not managed to get your playground working, but here are my ideas :

  • If you want to move the camera relative to pointer location, you can use engine.isPointerLock = true. This will lock the pointer and every mouse move will act on the camera. In my opinion this method is better than applying rotation with A and D keys.


  • If you want to move forward after rotating the camera with the mouse, you have to compute how much you will move along X and Z axis. Here is how I do :
// Conversion ratio from degrees to radians
var deg2rad = Math.PI / 180;

// Add offset if you need
// For example if your camera don't start at rotation 0 but 90 degrees, offset will be -90*deg2rad (do not forget to convert to radians with deg2rad)
var OFFSET = 0;

// Direction according to the key you pressed
// Move forward : direction = 0
// Move left : direction = 90
// Move backwards : direction = 180
// Move right : direction = 270

// Modify direction according to camera angle
var newDir = direction * deg2rad + camera.alpha + OFFSET;

// Compute movement along x and z axis
var dx = -Math.sin(newDir) * speed; // In your case speed can be your this.directionImpulse
var dz = Math.cos(newDir) * speed;

// Set nex position to camera
camera.position.x += dx;
camera.position.z += dz;

WARNING : This example use an ArcRotateCamera in order to get the alpha value of the camera (rotation around Y axis)

This is just an example of how you can move with these controls.

If you got any problem you can ask me about that, I already implemented it in a FPS-like project :) 

Link to comment
Share on other sites

Hello, I tried setting engine.isPointerLock =true but it doesn't seem to affect anything. I think that the ArcRotateCamera + calculation would probably do it, but I feel like there might be an easier way to do this. I have checked the source code for the FreeCameraInputs and the magic seems to be happening with the camera.cameraDirection.addInPlace() but it seems to manipulate private variables before that, so I am not sure if there is a single clean way just to move the camera. I'll experiment around a bit more and see what happens. Thanks

Link to comment
Share on other sites

Yes, if you want to check source code, you have to look to ArrowKeys inputs and "copy" it to your WASD

isPointerLock = true should work. You can also switch to fullscreen mode and lock pointer in the same way : engine.switchFullscreen(true);

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...