Three.Js

Three.js

Three.js 是一个基于 WebGL 用于在网页绘制三维效果的库。它封装了常用的场景、灯光、阴影、材质、贴图、空间运算、相机、渲染器等一系列功能。

官网：https://threejs.org

教程：https://threejs.org/manual/#zh/fundamentals

---

---

基本概念

几何体 Geometry

材质 Material

场景 Scene

相机 Camera

灯光 Light

渲染器 Renderer

画布 canvas

网格 Mesh：3D 图形学概念，指由点（顶点）和三角形组成的网状结构（点线面）。3D 模型实际上就是由一张细网格拼接而成，每个面都是多个三角形（如 1 个平面几何体由 2 个网格 6 个顶点组成）。几何体的本质就是顶点与三角形。

视锥体

我们看到的 3d 世界即是视锥体的 near 和 far 之间的部分，视锥体范围外的物体会被裁截不渲染，最终组成可视角度。

fov

摄像机视锥体垂直视野角度，从视图底部到顶部的角度，默认 50。

影响视野范围，同时影响物体远近，当想要物体近一些时，除了 postion，还可以调小摄像机 fov。

透视投影不是按直觉距离来的，而是 3d 空间压缩到 2d 平面的过程，投影越窄，物体在屏幕的投影尺寸也就变大（比例）。

near

从视锥体出发的，camera 的最近可视面，默认 0.1。

near 如果设置较大，会导致近处物体不可见。比如下雪的时候，离摄像机特别近的雪花会很大，这时候我们不希望看到特别大的雪花，就把近裁截面距离设置的大一点，把特别近的一些物体裁截掉。

far

从视锥体出发的，camera 的最远可视面，默认 2000。

同理，far 设置比较小，则远处物体不可见。

我们常常通过更改 far 范围，让它包含所有物体。

aspect

视锥体比例长宽比，默认使用画布宽高（网页宽高比），默认 1（正方形）。

---

🏗 施工中 🏗

---