Three.js基础入门系列（六）

01
Three.js中的相机插件

OrbitControls.js

通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数，相机的位置角度不同，同一个场景的渲染效果是不一样，比如一个相机绕着一个场景旋转，就像场景旋转一样。

OrbitControls.js是对Three.js中正交投影相机和透视投影相机对象进行了封装。

简言之：在Three.js中能够使用OrbitControls.js进行自由视角观察。

OrbitControls.js链接：

https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

使用OrbitControls.js

1️⃣ 引入OrbitControls.js插件

2️⃣ 实例化相机插件对象

3️⃣ 在每一帧执行update（可以实时更新一下网格的位置，这样效果更好）

4️⃣ 案例截图：

5️⃣ 完整代码如下：

02THREE.Object3D

为了方便操作，Three.js将每个能够直接添加到场景内的对象都继承至一个基类-THREE.Object3D，以后我们将继承至这个基类的对象称为3d对象。

Object3D是Three.js中大部分物体的基类，它包含了物体的位移，旋转，缩放，以及各个物体父子关系的js实现。

判断一个对象是否是继承至THREE.Object3D，我们可以这么判断：

添加一个3d对象：

将一个网格添加到场景中进行使用

删除一个3d对象：

如果一个模型不再被使用到，需要彻底删除掉，我们可以使用remove方法进行删除：

03
Three.js内容补充

修改位置的3种方式

1️⃣ 单独设置

2️⃣ 使用set方法，一次性设置所有

3️⃣ 通过三维向量一次性设置

Three.js的模型的位置属性是一个THREE.Vector3（三维向量）的对象。

一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）， 可被用来表示很多事物，例如：

1>一个位于三维空间中的点。

2>一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的直线距离，方向也是从(0, 0, 0)到(x, y, z)的方向。

修改大小的3种方式

1️⃣ 单独设置

2️⃣ 使用set方法，一次性设置所有

3️⃣ 由于scale属性也是一个三维向量，通过三维向量一次性设置

修改模型转向（旋转）的3种方式

1️⃣ 单独设置每个轴的旋转：

2️⃣ 使用set方法，一次性设置所有

3️⃣ 通过重新赋值一个欧拉角对象来实现旋转调整

模型的rotation属性其实是一个欧拉角对象（THREE.Euler），欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。