初识 Three.js
昨天我们讲了 Three 里面的一些基本概念
今天我们来仔细的讲一下这些基本概念
场景
在 Three.js 当中，场景是这么解释的
场景（Scene）
场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。
顾名思义，就是一个场景，我们可以把它想象成一个空间或者一个容器
来存放我们的各种东西
例如：物体、相机之类的
在 Three.js 中，我们需要通过框架给的构造函数去 new 一个出来
const scene = new Scene()
以下是在场景里面添加东西的方法
scene.add(camera);
相机
在 Three.js 当中，相机的定义是这样的
摄像机（Camera）
摄像机的抽象基类。在构建新摄像机时，应始终继承此类。
想当于我们的眼睛来观察这个 3D 的物体
相机有两种模式
- 透视相机
- 正交相机，目前我还没研究到，暂且略过
透视相机
所谓的透视相机，就是相机会生成类似一个视锥的东西，向外面放射出去
因为视锥上下有个角度，所以在生成构造对象的时候需要一个垂直视野角度的参数
同理相机需要长宽比
因为电脑的性能是有极限的，所以我们在构造相机时需要给他添加一个近点和远点
所谓的近点和远点是摄像机视锥体近端面和远端面
就是在某个距离区间，我们可以通过相机看到该物体
因为我们相机是需要在场景中的，所以我们还需要给相机添加一个位置
所以透视相机的构造函数是
// 创建一个相机
const camera = new PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
这里插一嘴，就算相机里面看不到某物体，只要添加到了场景当中，那么该物体就仍然是在的，并不是不在了
所谓的视锥，以上是我粗浅画了个视锥的草图
绿色标出来的是视锥的角度，黄色的是场景中的物体，黑色的是场景，白色的是相机，红色的是视锥大概的样子，视锥的样子大概类似一个金字塔的形状
如果还是不太明白的可以参考一下网页资料
物体
很简单，就是我们可以看到的东西，就叫物体
就是场景里面的建模
物体有不同的形状和不同的材质，与相机相同，也需要被添加在场景中
详情请看以下代码
// 物体 -> 方形
const cubeGeometry = new BoxGeometry(1, 1, 1);
// 材质 -> vue 的主题色
const cubeMaterial = new MeshBasicMaterial({
color: 0x4fc08d });
// 生成物体
const cube = new Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube);
渲染器
我们需要通过渲染器，来进行页面的渲染
把我们刚刚添加的相机、场景、物体之类的东西添加到页面上，使其能够显示
代码也比较简单
例：
// 生成渲染器
const renderer = new WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器渲染的是画布 -> canvas
// 需要将渲染的 canvas 内容添加到 body 上
document.body.appendChild(renderer.domElement);
// 通过渲染器将场景和相机进行渲染
renderer.render(scene, camera);
以上是我对于昨天那篇文章的一些补充~
希望对你们有所帮助，如果可以的话希望顺路来看看我的博客哦
新的博客
以前的博客
我们下集再见~