I've been immersed in developing a 3D game for a while now, and I've hit a roadblock when it comes to the controls. I've implemented custom pointerlock controls, but I'm struggling to get the rotation to mimic the behavior of three.js TrackballControls.
This is the snippet of my code:
function animate() {
requestAnimationFrame(animate);
camera.position.x = (Math.sin(euler.y) - Math.sin(euler.x)) * zoomValue + lastPlayerX;
camera.position.z = (Math.cos(euler.y) - Math.sin(euler.x)) * zoomValue + lastPlayerZ;
camera.position.y = -Math.sin(euler.x) * zoomValue + lastPlayerY;
composer.render();
}
animate();
lastPlayerX, lastPlayerY, and lastPlayerZ represent the player's position axes (around which the camera should "orbit"), euler is a THREE.Euler object representing the camera's rotation, and zoomValue determines how far the camera should zoom out.
The crux of the issue lies in the calculation method. How can I adjust the code to make the camera orbit around the player, specifically around the X and Y axes?