使用鼠标围绕中心旋转Three.js相机

Question

I'm trying to rotate the camera around the center point (0, 0, 0) using the mouse but if I rotate to the right or left 180deg, then the try to rotate up or down, it doesn't rotate vertically at all.

I'm trying to use latitude/longitude coordinates then convert it to cartesian like:

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));

A minimal example is here: https://jsfiddle.net/qsor9w27/2/

Answer 1

I think the simplest would be using OrbitControls or TrackballControls

See this example which is using OrbitControls.