Update camera position based on rotation three.js

I am trying to build a quick demo for something, and I need to move the camera in my scene in the direction that it is looking. It is similar to pointer lock controls, however I need the camera to be able to move up and down, as well as forward/backward/left/right. Currently I am just taking the rotation of the camera and adding it to the position, however this doesn’t move the camera forward (respective to the camera), it seems to move in a weird direction relative to you, and that direction changes depending on where you looking. Here is my current code:

const rotation = this.internalCamera.rotation.toVector3();
const speed = 1;
this.internalCamera.position.add(
    new Vector3(
        rotation.x * speed,
        rotation.y * speed,
        rotation.z * speed
    )
);

I have a feeling this has to do with the spatial system in three, but I’m not sure. What did I mess up?

Answer

Your vector ‘rotation’ represents angles rather than coordinate measurements. You need to make your moving vector, then multiply it with a rotation matrix of your camera direction.

//x <- left/right  y <- up/down  z <- forward backward
const vector = new Vector(x, y, z);

//make matrices
const rotx = (new THREE.Matrix4).makeRotationX(camera.rotation.x);
const roty = (new THREE.Matrix4).makeRotationY(camera.rotation.y);
const rotz = (new THREE.Matrix4).makeRotationZ(camera.rotation.z);

//multiply all matrices together
const rotmat = rotx.multiply(roty).multiply(rotx).multiply(rotz);

//multiply vector by matrix
vector.applyMatrix4(rotmat);

//finally add the vector to position
camera.position.add(vector);

This should work, also I hope you don’t mind i shortened some variables to make it easier to write and read so you have to tweak it to the correct variables.