欢迎关注微信公号【三维网格3D】，第一时间获取最新文章
OrbitControls是THREEJS中最常用的一个控制器，可以帮助我们实现以目标为焦点的旋转缩放，同时平移相机观察场景的操作，看上去是物体在进行变换，实际上所有的变化都是相机的相对位置在发生改变。今天就给大家讲解该空间实现的核心源码以及实现原理。
ps：以下代码非完整代码段，仅为关键实现代码
如何设置焦点
以焦点作为中心旋转
// 获取相机位置varposition=scope.object.position;// 用当前相机位置减去焦点位置，获得向量offset.copy(position).sub(scope.target);// 通过获得的向量建立球坐标系spherical.setFromVector3(offset);// 对球坐标系做旋转,可以理解相机位置所对应的球上的点在运动spherical.theta+=sphericalDelta.theta;spherical.phi+=sphericalDelta.phi;// 控制球坐标系极坐标上下限，避免变换到phi的极点spherical.makeSafe();// 再将球坐标转换为向量offset.setFromSpherical(spherical);// 相机的位置也就是焦点位置加上球坐标的偏移量position.copy(scope.target).add(offset);// 保证焦点始终不变scope.object.lookAt(scope.target);
这里先把旋转思路整理一下
相机围绕目标y轴以及x轴旋转，其运动轨迹所构成的其实就是一个球，而目标点则是其球心，焦点到相机自身的距离则为球的半径。
所以我们可以以 target （焦点）作为球心， offset 作为半径，通过 setFromVector3() 构建一个球坐标系，构成球坐标时的 theta 和 phi 也就是相机在球上的位置。
接下来所有的变换只需要在球坐标上完成，再通过 setFromSpherical() 转换为世界坐标，如此反复，就实现了以焦点为中心的旋转。
而旋转的操作自然是通过鼠标在屏幕上的移动距离来改变球坐标中的 theta 和 phi 。
大家在阅读源码的时候会发现，在构建球坐标系时还有这么几句代码
这是因为在 threejs中，相机默认的 up 轴是 y 轴，所以其实去掉该代码也不影响实际的使用，但是当你改变相机的 up 轴时，就需要获取他们之间的变换量。setFromUnitVectors() 方法能够获取两个向量之间的四元数变换，也即是无论相机 up 轴是否为 y 轴，该方法都能获取它们之间的变换并应用，以达到同步世界坐标 y 轴的目的。
缩放功能
大家都知道，PerspectiveCamera 和 OrthographicCamera 具有不同的投影属性，所以在进行缩放的时候，PerspectiveCamera 通过控制相机的距离的远近是更好的做法，当然 OrthographicCamera 相机就没有这个顾虑，可以直接使用 zoom ，通过控制 zoom 的大小来控制相机缩放。
整个代码都是很简单的缩放论滚，同步相机 zoom 或者距离，其中值得注意的点是update函数中更新的两句代码
spherical.radius *= scale;
scale = 1;
刚才我们说了构建球坐标系，改变半径就是控制相机的远近，自然可以理解，但是将缩放系数变为1，会不会使得缩放滚轮时控制失效呢，答案是肯定不会啦，我们在每次缩放滚轮时进行的变换，都是根据当前的状态来进行，而不是以一开始的状态来进行，也就是说无论什么时候，滚轮缩放了多少次，当前的状态永远可以看作单位一来进行计算。
移动操作
移动操作中偏移量的计算方法和旋转操作上的计算方法整体上来说是一致的，这里就不再赘述。
