Three.js使用OrbitControls（控制器）后修改相机旋转方向无效问题

1、问题

        当我们在项目使用 OrbitControls（控制器）来控制相机进行旋转的时候不可避免就会遇到一个问题，修改相机的 lookAt 和 rotation 无效～

    initCamera = () => {
        /**
   * @param {number} fov 从视图的底部到顶部，以角度表示 默认值是50
   * @param {number} aspect 摄像机视锥体的长宽比
   * @param {number} near 相机近端面。
   * @param {number} far 相机远端面。
   * @param {Vector3} position 相机的起始位置
   * @param {Vector3} lookAt 相机看向某个点 
   */
        this.camera.fov = 60 //
        this.camera.aspect = window.innerWidth / window.innerHeight //
        this.camera.near = 1 //
        this.camera.far = 20000 //
        this.camera.updateProjectionMaÏtrix() //更新相机投影矩阵
        this.camera.rotation.set(-0.156486664,1.53344866,-0.23345885) //修改相机旋转方向
        this.camera.lookAt(0, 150, 350) //旋转对象以面对世界空间中的一个点。
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight
            this.camera.updateProjectionMatrix()
        })
    }

通过 lookAt、和rotation对相机的旋转进行操作后发现相机的位置和角度并没有发生变化，原因是当前相机已经被 OrbitControls 控制器托管了。

---

2、OrbitControls 介绍

轨道控制允许摄像机围绕一个目标轨道运行

• 轨道控制器默认指向  THREE.Vector3(0，0，0) ，也就是世界坐标系原点。
• 通过 OrbotControls 的实例对象来修改控制器的目标方向 controls.target = new THREE.Vector3(0, 350, -1800)。
• 设置控制器的 target 属性，会改变相机的 lookAt 视点，但是修改相机的 lookAt 属性是不会影响控制器的 target 的。

原因是 控制器 的默认目标并不是 相机的聚焦点，查看 OrbotControls 的源码可以得知 控制器的聚焦点是 this.target = new Vector3()

---

3、解决

如果场景中没有添加 OrbitControls 的话，设置 camera.lookAt 和 camera.rotation.set 是有效果的

        this.camera.rotation.x = -0.3
        this.camera.rotation.y = -0.3
        this.camera.rotation.z = -0.3

当添加了控制器 相机的 lookAt 和 rotation 都会失效（当使用了控制器的时候，一般不会考虑 rotation 的问题），所以想让相机的聚焦点改变的话，就需要改变 OrbitControls 的 target 属性

this.control.target = new THREE.Vector3(0, 350, -1800)

以上代码会使相机的聚焦上移350，后退1800距离（threejs是右手坐标系）