THREEJS OrbitControls核心功能解读

OrbitControls是THREEJS中最常用的一个控制器，可以帮助我们实现以目标为焦点的旋转缩放，同时平移相机观察场景的操作，看上去是物体在进行变换，实际上所有的变化都是相机的相对位置在发生改变。今天就给大家讲解该空间实现的核心源码以及实现原理。
ps：以下代码非完整代码段，仅为关键实现代码

如何设置焦点

  // 我们在创建控制器时，会将相机以及dom传入该控件，而相机的lookAt也正是控件的target

  // 在创建实例时会被重新定义为坐标轴原点（0，0，0），同时相机的lookAt也会被覆盖。

  this.object = object;

  this.target = new Vector3();

以焦点作为中心旋转

    // 获取相机位置
    var position = 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(