初识 Three.js
上一篇我们通过 three.js 框架渲染了我们的第一个 3D 图形
但是目前的 3D 物体是不能动的
接下来，我们就往里面添加控制器，让这个 3D 图形可以移动
控制器
首先我们要了解什么是控制器，在 three 里面，控制器分非常多的种类
我们现在先来学习一下轨道控制器
轨道控制器（OrbitControls）
Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在HTML中包含这个文件。
换成人话来说就是，通过转动你所创建的相机，可以 360° 的观察你所创建的物体
就相当于人眼睛的移动来观察物体
物理意义上，我们通过不同的参照物，可以近似的理解成，我们在操纵着物体旋转
不过我并不推荐这样子来理解，还是建议理解成一个相机在不停的旋转更方便来理解代码
在上一篇我们渲染好了，这里就不在进行重复的代码展示了
我们如果要创建一个轨道控制器，我们需要从 three.js 框架中引入
import {
OrbitControls } from "three/examples/jsm/controls/OrbitControls";
有人问为什么是要在 example 文件夹里面引入
别问，问就是 three 自己放在那个地方的
我们上面的引用里面也有说明
我们引用好了之后，通过 new 来构造一个新的控制器
// 控制器需要一个相机，还有指定渲染的元素，否则谁知道你是哪个相机，监听哪个页面的元素呢，对吧
const controls = new OrbitControls(camera, renderer.domElement);
上文说的，理解成一个相机在 360° 的旋转方便理解代码，指的就是理解这里的代码
好，按道理来说，现在我们控制器也创建好了
渲染也渲染好了，那么接下来应该可以控制了对吧
我们去页面上试一下
按住鼠标左键并拖动鼠标，发现，它一动不动
这是为什么呢，我们不是已经创建了控制器了吗，为啥他一动不动呢
其实到目前为止，里面的元素已经是有变化了的
只不过是因为，我们没有再次渲染，导致了场景中的物体还是我们最开始的那个状态
所以在最后，我们需要添加一个函数，让他在浏览器每一帧刷新的时候自动刷新
这里解释一下，因为我们的显示器是有刷新帧率的，浏览器也是同样的的道理，因为我们人眼可见的最小连续帧率是 24 帧/s 所以我们感觉起来浏览器的那些东西就是连续的
我们把最后的 three 进行渲染的函数，在进行一个封装
function render() {
renderer.render(scene, camera);
// 浏览器自带方法，在刷新的时候自动执行某个函数↓，此处我们是在浏览器进行刷新的时候重新渲染一次
requestAnimationFrame(render);
}
// 最后，我们在调用一下这个渲染的方法就可以开始了
render();
按住鼠标左键拖动，这时候我们就发现这个 3D 的效果就出来了，可以被 360° 观察了
坐标轴辅助器
这时候，比如说我希望能够有一个坐标轴或者其他的网格线可以进行显示
这样子的话就更方便开发了嘛
那么，有没有呢
答案肯定是
有的
在 three.js 中，有一个坐标轴辅助器
像类似的辅助器啥的，都是以 helper 单词进行结尾的
比如我们现在要学习的坐标轴辅助器 AxesHelper
AxesHelper
用于简单模拟3个坐标轴的对象.红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
我们需要在构造的时候输入一个数值，让他能够显示对应的坐标轴的长度
之后在场景里面进行添加这个辅助器就可以成功显示了
// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
物体的移动
有了坐标轴还不够，我还想要物体可以移动，那该怎么办呢
物体的移动很简单，我们只要在前面缩写的刷新帧率的方法里面设置物体的位置就行了
这样每一帧物体的位置都在改变，就形成了物体的移动
PS：电影也是这个原理
那么如何来设置这个物体的位置呢
有两个方法可以实现
// 三维物体的位置需要三个值来定位，x轴，y轴，z轴
// 以下是 Object3D 的公用方法，是构造出来的原型链上面的方法
cube.position.set(3,0,0)
// 或者可以通过对应的属性，来改变对应的值
cube.position.x = 3
物体的移动就是在刷新的时候我们给他的位置进行一点点的改变就可以了，即
function render() {
renderer.render(scene, camera);
cube.position.x += 0.01
if(cube.position.x > 5){
// 我们刚刚设置的坐标轴是5，那么这里设置当他大于5的时候，给他的坐标轴重置
cube.position.x = 0
}
// 浏览器自带方法，在刷新的时候自动执行某个函数↓
requestAnimationFrame(render);
}
缩放
物体的缩放与位置同理，字段为 scale
旋转
旋转与移动和缩放类似，但是需要注意的是旋转里面的参数为弧度
后面有个属性来判定先渲染哪一个数据
官网的解释是这样的
物体的局部旋转，以弧度来表示。（请参阅Euler angles-欧拉角）
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ');
如果需要持续旋转的话，类似物体的移动，在之前的渲染方法里面添加以下代码就可以了~
cube.rotation.x += 0.01;
希望对你们有所帮助，如果可以的话希望顺路来看看我的博客哦
新的博客
以前的博客
那么我们下集再见啦~