After struggling to find updated help on first player rotation in three.js, I am facing a challenge where most of the solutions provided are using functions that no longer exist in the current library version.
I am attempting to implement a feature where the camera rotates around its own axis based on the position of the mouse cursor on the screen.
The existing rotation code is as follows:
var scale = 10;
function viewKeys(){
document.addEventListener("mousemove", MouseMove, true);
function MouseMove(event) {
mouseX = event.clientX - divOffsetWidth;
mouseY = event.clientY - divOffsetHeight;
}
}
The divOffset variables are used to calculate the relative mouse positions to the center of the HTML div.
function viewAnimate(){
camera.rotation.x = -((3/2)*(Math.PI*mouseY)) / (scale);
camera.rotation.y = -(2*(Math.PI*mouseX)) / (scale);
}
The viewKeys() function is invoked within the init() function and the viewAnimate() function is called from the animate() function.
Currently, the rotation behaves correctly when the camera is at position (0,0,0), but when positioned elsewhere it appears to rotate relative to the environment's axis rather than its own. While I know there are pre-built control libraries available for three.js, I prefer to understand how to achieve self-axis rotation manually.
Can you provide any suggestions on how I could modify the rotation logic to achieve the desired outcome?