I have a three JS scene where the user can add cuboid by selecting a spot on the scene and then clicking the button. I also have OrbitControls so that the user can rotate and navigate on the scene.

The code to make the cuboid follow the mouse is the following:

let mouse_vector = new THREE.Vector3(this.mouse.x, this.mouse.y, 0.5  ); mouse_vector.unproject( this.camera ); 
mouse_vector.sub(this.camera.position).normalize(); 
let distance = - this.camera.position.z / mouse_vector.z 
let cube_position = new THREE.Vector3(); cube_position.copy(this.camera.position).add(mouse_vector.multiplyScalar(distance))
this.place_holder_cuboid.position.copy(cube_position)

Here: place_holder_cuboid is the cuboid mesh that I wanto to draw.

This works nicely when the camera is aligned with the Z axis. However if I rotate mi camera so it gets aligned with the X axis for example. The distance of the cuboid placement starts to mess up.

I think the problem is that I'm not taking into account the other axises when calculating the distance, since the camera can be rotated or panned (thanks to the orbit controls)

However I'm not sure hot to figure out the calculations for this distance. Can anyone help me out with this?