这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

在上一篇笔记介绍了Three.js究竟是个什么，以及它与OpenGL、WebGL的关系，今天就来再深入了解一点Three.js。

在Three.js中有三个最基本的要素，分别是摄像机（camera）、场景（scene）和渲染器（renderer），只有这三个基本要素结合起来才能够渲染出可见的内容。

一、摄像机：

摄像机实际上就像我们的人眼一样，我们通过摄像机来观察场景中的内容。
1. 位置：
位置指的是摄像机放在场景的哪一个位置。
2. 视线方向：
视线方向指的是摄像机在固定的位置上，朝向的哪一个方向。以上两点都可以想象成人站在哪个位置朝哪一边看。
3. 投影方式：
投影方式分为正交投影相机（OrthographicCamera）和透视投影相机（PerspectiveCamera）两种，这也是图形学里面的概念。

①正交投影：

正交投影相机是一个矩形的区域，在这个区域里面物体才可见。无论摄像机近还是远，或者是物体近还是远，物体被渲染的大小都相同。常见的一个案例就是微信的跳一跳，相似的2.5d游戏比较适合使用正交投影，在这里游戏中不需要过多的空间感或距离感；其他的比如购物查看模型、预览模型之类的功能也适用。

②透视投影：

透视投影就比较符合人眼的视角，在透视投影中距离近的物体会被渲染大，远的物体会被渲染小，比较适用于空间距离感强的应用场景，比如模拟驾驶、枪战游戏等。

二、场景：

const scene = new THREE.Scene();

场景相当于一个世界，所有要素都在其中，其采用的是右手坐标系。

三、渲染器：

renderer.render(scene, camera);
如果只是执行了上面两步，设置了摄像机与场景，但是不进行渲染的话不会产生任何效果。换而言之渲染器的作用就是将场景按照摄像机的位置、方向与方式渲染出来呈现一个合理的样式。

今天就先做笔记到这里，以后继续深入接触实例模型。