three.js学习笔记 day1-2

1.three.js是什么

开发Web 3D 应用的js封装类

2.three.js需要怎么上手

2.1引入

2.2三要数（场景，照相机，渲染器）

首先，场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有场景，Three.js 就无法渲染任何物体。其次，摄相机决定了能够在场景中看到什么，即屏幕上哪些东西需要渲染。最后，渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子，然后调用底层 API 执行真正的场景绘制工作。

1. 场景。在 Three.js 中，场景只有一种，就是用 THREE.Scene 来表示。它是所有不同对象的容器，可以用来保存所有图形场景的必要信息。也就是说， THREE.Scene 保存了所有对象、光源和渲染所需的其他对象。例如，你想要显示一个橙子，就需要将橙子这个对象加入到场景中。
2. 在 Three.js 中提供了两种主要的摄像机，分别是正交投影摄像机和透视投影摄像机 （目前还支持了 VR 摄像机）。首先，使用正交投影摄像机 (OrthographicCamera) ，你看到的物体所被渲染的尺寸都是一样的，因为对象相对于摄像机的距离对渲染的结果是没有影响的。这种摄像机通常被用在二维游戏中。接着，我们再来看看透视投影摄像机 (PerspectiveCamera) ，这也是我们实验中大部分使用的类型。因为这种摄像机的效果更贴近真实世界。
3. Three.js 除了提供基于 WebGL 的渲染器外，还有其他的渲染器，比如基于 HTML canvas 的渲染器、基于 CSS 的渲染器，基于 SVG 的渲染器。但是这些渲染器并不推荐使用，一方面它们十分消耗 CPU 资源，另一方面缺乏对一些功能（如：阴影、材质）的支持。在 Three.js 主要使用 WebGLRenderer() 渲染器，一般会经历如下三个过程：
   1. 创建渲染器；
   2. 开始渲染： render(scene, camera)；
   3. 添加到 canvas 对象中；

还有一些开发过程中会用到的概念如下：

网络模型

几何体、材质、贴图、颜色这些概念属于网络模型（ Mesh ）的范畴中。Three.js 中几何体基本上是三维空间中的点（顶点）集和将这些点连接起来的面。例如，一个立方体有 8 个角，每个角都可以用 x,y 和 z 坐标点来定义，所以每个立方体在三维空间中都有 8 个顶点。其次，一个立方体有 6 个面，每个角有一个顶点。在 Three.js 中，每个面都是包含 3 个顶点的三角形。所以，立方体的每个面都是由两个三角形面组成的。当你使用几何体时，不需要自己定义几何体的所有顶点和面。例如，定义立方体只需要定义长、宽、高。 Three.js 会基于这些信息在正确的位置创建一个拥有 8 个顶点和 12 个三角形面的立方体。材质 （ Material ）。材质就像物体的皮肤，决定了几何体的外表。例如，材质可以定义一个几何体看起来是否像金属，是否是透明的等等。在 Three.js 中，材质对象有一些共同的属性，例如：常用的基础属性（控制物体的透明度、可见性、引用），融合属性（决定物体如何与背景融合）以及高级属性（控制底层 WebGL 上下文对象渲染物体的方式）。

光源

Three.js 中的光源可以分为两种类型。

其中，基础光源是最常见的，所有这些光源都是基于 THREE.Light 对象扩展的。对于这些光源，我们需要知道的是：

• THREE.AmbientLight 光源的颜色可以附加到场景中的每一种颜色上，通常用来柔化生硬的颜色和阴影。
• THREE.PointLight 光源会朝所有方向发射光线，不能被用来阴影。
• THREE.SpotLight 光源类似手电筒，它有一个锥形的光束，可以配置它随着距离的增大而逐渐变弱，并且可以生成阴影。
• THREE.Directional 光源相当于远光的效果，比如太阳光。它的光线呈平行，其光强并不会随着与目标对象距离的增大而减弱。
• THREE.HemisphereLight 光源，该光源考虑了天空和地面的反射，可以具备更加自然的户外效果。
• THREE.AreaLight 不从单个点发射光线，而是从一个很大的区域发射光线。

day01代码

day02代码