Update 05 Three.js基础之图元.md

puxiao · web-flow · commit 1944dddda747 · 2021-11-27T20:59:46.000+08:00
diff --git a/05 Three.js基础之图元.md b/05 Three.js基础之图元.md
@@ -209,6 +209,49 @@ Primitive 的复数即为 Primitives。
 
 
 
+<br>
+
+> 以下内容更新于 2021.11.27
+
+**特别补充说明：内置的图元实际上也是变化多端的！**
+
+为什么这么说呢？
+
+例如：圆柱(Cylinder)，字面上它是用于创建圆柱体的，但是实际上认真阅读官方文档你会发现是这样描述它的构造函数的
+
+> CylinderGeometry 官方文档：https://threejs.org/docs/index.html#api/zh/geometries/CylinderGeometry
+
+```
+CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
+radiusTop — 圆柱的顶部半径，默认值是1。
+radiusBottom — 圆柱的底部半径，默认值是1。
+height — 圆柱的高度，默认值是1。
+radialSegments — 圆柱侧面周围的分段数，默认为8。
+heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
+openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
+thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
+thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
+```
+
+请注意最后的 2 个参数：
+
+1. thetaStart(默认值为0) 
+2. thetaLength(默认值为2*Pi)
+
+也就是说，你不修改这 2 个默认值，**那么默认创建出的是一个完整的圆柱体**，但是假设你修改了这 2 个值，比如 将 thetaLength 修改成 0.3*Pi (54°)，那么最终将创建出一个 夹角为 54° 的**扇形**(体)。
+
+如果感兴趣，可以看一下我发布的这个项目，由数据生成3D饼图：https://github.com/puxiao/pie-3d
+
+> 提醒：最好你在看完本系列教程后(不仅是本小节)，再去看上面提到的 pie-3d 。
+
+通过上面对 CylinderGeometry 的描述，我们可以知道 Three.js 默认自带的图元实际上是可以产生很多变化的，得到的不一定仅仅是图元的 "字面" 物体。
+
+> 以上内容更新于 2021.11.27
+
+
+
+<br>
+
 ### BufferGeometry 与 Geometry 的区别
 
 从上面的图元表格中不难发现，除了 Edges、WireframeGeometry 以外，其他图元的构造函数都是成对出现的。
@@ -231,4 +274,88 @@ Primitive 的复数即为 Primitives。
 
 
 
+<br>
+
+> 以下内容更新于 2021.11.27
+
+**上面关于 BufferGeometry 和 Geometry 的区别这段话已经过时了**，因为在较新的 Three.js 版本中已经将 Geometry 从核心类中移除。
+
+目前你接触到的都应该只有 BufferGeometry。
+
+#### 一些心里话：
+
+首先非常抱歉得说一句：一年前在写本系列文章时，我是一个对图形学一无所知，对 Three.js 好奇但又非常小白的人，我是一边学习一边写下本系列文章的。
+
+**所以本系列教程绝对不是好的教程——假设 Three.js 是一座大山的话，而我是站在山脚下向你讲述上山道路的那个人，但我自己也未曾上过这座山。**
+
+随着我对图形学、webgl、Three.js、Canvas 的一些认知提升，我深深觉得想要写出好教程，一定要站在更高的维度，拥有更高的视野才可以更好向别人指明方向，写出好教程。
+
+但是本教程对于那些完全小白，完全对 Three.js 一无所知的人，多少还是有些帮助的(尽管我指明的道路并不是最佳道路)，**很感谢那些 Star 本教程的人**。
+
+即使看完全部的本教程，那么最多你也仅仅算是学会了个皮毛，简单入门而已，真正复杂难的是 图形学 中的一些知识点，例如 向量，矩阵，齐次坐标，点乘，叉乘，球极坐标，当然最复杂的莫过于 自定义渲染器(shader)。
+
+关于3D 技术栈，虽然不够严谨，但是大体上可以这样表述：**图形学(CG) > OpenGL > OpenGL ES 2.0 > WebGL > Three.js**
+
+所以 Three.js 仅仅是 web 3D 最基础，表层的知识技术栈，想要深入学习，你会发现这是一条几乎不到头的道路，学秃。
+
+> 图形学就是那种 从入门到放弃 的知识体系。
+>
+> 但是别灰心，我们实际上并不会真正需要那么深入高深的，学会 Three.js 可以做一些基础的 网页 3D 还是会比一般前端要显得厉害很多。
+
+<br>
+
+#### BufferGeometry的重要知识点：position、normal、uv
+
+> 先普及个基础知识：在 3D 中 Vector3 既可以表示一个 三维坐标，也可以表示一个三维方向。
+
+一个完整的 BufferGeometry 是由若干个 点(Vector3) 构成的：
+
+> 上面提到的 点 准确说应该是 3维 点坐标，对应的是 Vector3 ：https://threejs.org/docs/index.html#api/zh/math/Vector3
+
+下面的知识实际上是针对 图形学 和 OpenGL 的。
+
+1. position：坐标(每个坐标就是一个 vector3，由 3 个数字组成)，所有的坐标就是组成该 BufferGeometry 的所有 点 的信息(对于底层的 BufferGeometry 而言 3维点的 (x,y,z) 坐标是分开存储值的)。
+
+   > 这就是 Three.js 针对 webgl 进行的封装，实际上我们平时更多时候都使用的是 Vector3，而不是具体的 3 个值。
+
+2. normal：法线(每个法线就是一个 vector3，由 3 个数字组成)，用于存储每个 3D 坐标点的朝向，用于计算 反光。
+
+3. uv：纹理映射坐标(每个uv就是一个 vector2，由 2 个数字组成)，用于存储每个 3D 坐标点对应渲染纹理时对应的 位置点信息，用于计算 贴图。
+
+   > 对于纹理而言，它都是 二维的平面，因此 uv 的值对应的是 Vector2，由 x,y 2 个坐标值组成，且每个值的取值范围都是 0 - 1。
+   >
+   > 你可以简单把 0 - 1 理解成  0% - 100%，对应的是一个百分比的值。
+
+通过上面的讲述，我们大致可以作出以下结论，如果我们自定义一个 BufferGeometry，那么：
+
+> 对于初学者而言几乎不需要、也做不到 可以 自定义 BufferGeometry 这一步，我这里只是超前提一下。
+
+1. 假设这个 BufferGeometry 不需要考虑 反光 和 纹理贴图，那么它只需要拥有(设置) positon 就可以了。
+
+   > this.setAttribute('position', new BufferAttribute(this._vertices, 3))
+
+2. 假设这个 BufferGeometry 需要考虑反观，但不需要考虑纹理贴图，那么它需要设置 postion 和 normal。
+
+   > this.setAttribute('position', new BufferAttribute(this._vertices, 3))
+   >
+   > this.setAttribute('normal', new BufferAttribute(this._normals, 3))
+
+3. 假设这个 BufferGeometry 需要考虑反光和纹理贴图，那么它的 postion 、normal、uv 都需要设置。
+
+   > this.setAttribute('position', new BufferAttribute(this._vertices, 3))
+   >
+   > this.setAttribute('normal', new BufferAttribute(this._normals, 3))
+   >
+   > this.setAttribute('uv', new BufferAttribute(this._uvs, 2))
+
+4. **特别强调，上面提到的 position 是一个 BufferGeomerty 所有点信息的集合，它并不是 Mesh(网格，3D物体) 的 位置信息。**
+
+如果你理解不了我说的这段话，完全没有关系，忽略这段我补充的知识点，我也是学习  Three.js 快 1 年后才明白的。对于现在的你而言不理解是正常的。
+
+忽略我上面的这段话，继续本教程后面的学习吧。
+
+> 以上内容更新于 2021.11.27
+
+
+
 图元理论上的知识就先讲到这里，在下一节中，会编写一些图元示例。
