three.js 轨道控制器（OrbitControls）相关原理及坐标转换

wenjing:)

已于 2023-09-20 14:49:24 修改

阅读量2k

点赞数 3

分类专栏： webGL 文章标签： webgl

于 2023-09-12 16:29:10 首次发布

本文链接：https://blog.csdn.net/weixin_43336525/article/details/132833550

版权

webGL 专栏收录该内容

2 篇文章

订阅专栏

最近接触了three.js的轨道控制器OrbitControls，利用轨道控制器可以实现相机围绕目标进行轨道运动（本质就是改变相机的位置），但其具体过程是什么样的呢？经过查阅资料，现总结如下：

首先，在three.js中我们可以通过 this.camera.position.set() 设置相机的位置；

如果我们想360°观察几何体，我们需要借助轨道控制器OrbitControls，在初始化轨道控制器时，我们可以通过this.controls.target()设置控制器的target(焦点)；

当点击鼠标左键，相机围绕目标y轴旋转，其运动轨迹所构成的其实就是一个球，而target（焦点）则是其球心，焦点到相机自身的距离则为球的半径，获取其相机到焦点的距离（半径）可以通过this.controls.getDistance()获取。

那如何通过鼠标左键拖动，获取相机旋转的角度呢？代码如下：

if (this.camera && this.controls) {
    // 鼠标左键拖动时，相机围绕目标点y轴旋转，相机旋转的角度就是该点在xoz平面上的投影点相较于原点旋转的角度
    const dirx = camera.position.x - controls.target.x
    const dirz = camera.position.z - controls.target.z
    // 弧度转角度
    // 原点到一个点的线段逆时针旋转的弧度值就是Math.atan2()的返回值
    const theta = Math.atan2(dirx, dirz) * 180 / Math.PI;
  }