I am attempting to achieve camera rotation around the central point (0, 0, 0) using mouse controls. However, when rotating 180deg to the right or left, and then attempting to rotate vertically, the vertical rotation does not occur at all.
My approach involves using latitude and longitude coordinates which are then converted to Cartesian coordinates like so:
this.camera.position.x = Math.sin(this.lat) * this.alt;
this.camera.position.z = Math.cos(this.lat) * Math.cos(this.lng) * this.alt;
this.camera.position.y = Math.cos(this.lat) * Math.sin(this.lng) * this.alt;
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
For a simple demonstration, please refer to the following link: https://jsfiddle.net/qsor9w27/2/