我'm trying to make a camera rotation and zoom around a point. I don' t想要使用 THREE.TrackBallControls 因为我看到它只在缩放时修改fov，它不是我想要的 .

我正在使用这个简单的等式：http://en.wikipedia.org/wiki/Sphere#Equations_in . 要计算球体上的点，此点将是相机的位置 .

在three.js

var point = new THREE.Vector3(
    radius * Math.cos(theta) * Math.sin(phi),
    radius * Math.sin(theta) * Math.sin(phi),
    radius * Math.cos(phi)
);
point.add(center);

为了操纵它，我使用：

  • 鼠标左键，旋转：x coord === theta和y coord === phi

  • 鼠标中键，用于缩放：放大/缩小===半径

它不能很好地工作，特别是对于'phi'旋转，可能因为它定义在0和PI之间 .

也许使用 Quaternion.Slerp 有更好的解决方案？

编辑：

我的照相机 ：

aspectRatio = container.offsetWidth / container.offsetHeight;
camera = new THREE.OrthographicCamera( -aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, -10, 10 );
camera.position.x = 0.004;
camera.position.y = 0.004;
camera.position.z = 0.004;
camera.lookAt(new THREE.Vector3(0, 0, 0))
scene.add(camera);

我的OrbitControls：

controls = new THREE.OrbitControls ( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.keyPanSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;

使用鼠标左键（旋转）时camera.position更改 .

当使用鼠标中键（缩放）时，camera.position仍然是相同的 .

在渲染函数中进行检查：

function render() {
  // update camera controls
  controls.update();
  console.log(camera.position);
  // actually render the scene
  renderer.render( scene, camera );
}
camera rotation three.js quaternions