Threejs

本节学习了如何让模型更加真实的渲染。通过添加环境贴图、renderer 拟真优化等方式完成。通过outputEncoding, toneMapping 等能力让渲染更加真实

学习Three.js也非常有必要了解一下3D建模软件。有很多 3D 建模的软件，比如 Cinema 4D、Maya、3DS Max、Blender、ZBrush 等。本节课我们将学习 Blender

Three.js 提供了很多原始模型，但如果我们需要更复杂的模型，最好使用 3D 软件建模，然后导入到场景中。本节我们就来学学如何导入一个做好的 3D 模型。

physics 物理引擎 在 WebGL 里使用物理引擎是非常棒的一种体验，人们会非常享受与这些物体产生物理效果，例如重力、弹性、加速度、摩擦力、碰撞等。有很多方式实现物理效果，并且取决于项目中想怎么

Scroll based animation 基于页面滚动的动画 本节我们将学习基于页面滚动的动画。很好的将之前所学的内容做一个复习和运用。 我们会把 WebGL 部分固定到页面中，随着页面的滚动

光线投射 Raycaster 光线投射可以发射一个特定方向的射线，来检测是否有物体与这个射线相交。有以下的使用场景： 检测玩家前方是否有墙 检测射击游戏是否击中了什么物体 检测是否有什么物体在鼠标下，

接下来，我们学习一下如何使用粒子，本节将开发一个银河生成器，使用粒子效果生成各种各样的银河效果。 创建粒子 根据上一节创建一个粒子立方体，并加入 debug UI，设置尺寸和数量 形状 半径 增加半径

粒子特效 听到粒子特效，是不是无比期待？可以用它实现非常多的效果如星空、烟雾、雨、灰尘、火等。 粒子特效的优势是即使使用了成百上千的例子，也能保证比较高的帧率。缺点是每个粒子都由一个始终面向相机的平面

本节将使用我们之前学习的内容来创建一个鬼屋。我们会创建一个房子，有门、屋顶、和一些灌木，我们也会创建一些墓碑，还有幽灵的光飘过并产生投影。

Shadows 影 我们已经学习了光，现在想要增加一些影。几何体的背光面确实是暗的，这被称为 core shadow，我们缺失的是 drop shadow (投影)，物体投射到其他物体上的影子。 投影

lights 光 我们之前学习了简单的添加光源到场景中。接下来就详细讲讲各种各样的光源、参数以及如何使用。

本节将学习 3D Text，并做一个炫酷的 3D Text 展示页面。我们将使用 TextGeometry 文本缓冲几何体来实现。

Materials 材质，是用来给几何体的每个可见像素进行上色。其中的算法程序成为 shaders。我们暂时不学习如何写 shaders，我们先使用内置的 materials

什么是 Textures(纹理) 纹理是覆盖在几何体表面的图片，当把纹理按照特定的方式映射到物体表面上的时候能使物体看上去更加真实。 可以前往 https://3dtextures.me/ 寻找合适的

本节将学习 debug UI。用于实时方便调整动画或物体的各种参数。我们可以自己开发，也可以使用一个三方库，这里我们选择使用现成的库。常见的库有 dat.GUI control-panel Contr

先前我们一直使用立方体，本节我们将学习一下其他几何体。 Threejs 中几何体的基类是 BufferGeometry，而 BufferGeometry 是面片、线或点几何体的有效表述。包括顶点位置，

画布充满窗口 让画布充满窗口需要设置尺寸，可以使用 window.innerWidth 属性，同时移除 canvas 标签上设置的宽高 html 代码如下 js 代码如下 使用 innerWidth,

Camera 相机 查看 Three.js 的文档，可以看到 Camera 是一个抽象类，一般不直接使用，其他类型的 Camera 实现了这个抽象类。

animation 动画 Three.js 中的动画与其他 Canvas 动画类似，都是使用了 requestAnimationFrame api，时间间隔动画、内置的时钟、以及第三方动画库