requestbody前端怎么传_前端图形学(二十九)——「透过现象看本质」从源代码去看几何图形...

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上章节回顾

1. 渲染器是什么？内部做了什么？
2. threejs中几何体、材质、网格模型的简单分析

---

本章目标

1. 熟悉几何图形顶点的概念
2. 深挖几何图形的本质
3. 如何自定义几何图形

了解过threeJs的都知道，它给开发者提供了大量的几何图形供使用，比如前面我们讲到的立方体，球体，圆柱体，正多面体等等。

eg:

立方体顶点分析

那么大家有没有想过他们是怎么实现的呢？其实也不难，我之前在讲原生的原生webgl文章的时候有绘制过一个立方体。我是通过自定义16个顶点然后绘制两个面和四条直线相连而最终形成的一个立方体、也就是说，立方体我们是通过多个顶点然后绘制出来的。

带着这个疑问，以立方体为例，我们去找BoxGeometry源代码。

先来看我圈出来的部分，buildPlane方法，创建平面，调用了6次，刚好创建了一个立方体需要的6个表面，再来看下buildPlane方法具体做了什么！

还是看我圈出来的重点，第一个是一个英文注释，生成顶点，法向量和UV数据。要知道，我们在调用任何内置的几何图形的时候，是没有传入任何的顶点数据。我们传的是长宽高。也就是说，threejs内部要将我们传入的长宽高进行计算，生成一系列的顶点，然后放在vertices属性中去。

而看源代码我们知道 vertices 属性是其父类的一个属性，看下面。

小结：

1. Geometry作为几何图形的父类给我们提供了vertices属性，可用于我们自定义顶点数据去渲染出自定义的图形。除了顶点数据，我们还可以自定义法向量、顶点颜色、平面等数据。
2. threejs内置几何体的基本实现原理是通过我们传入的长宽高或者半径等数据去计算动态生成一系列的顶点数据，然后再去渲染。
3. 渲染的过程，我前面的webgl文章中有介绍到~

自定义几何图形

接下来我们来玩一玩这个自定义图形是怎么做的。先来上示例代码。

全部代码：

核心代码分析：

1. 创建一个空的缓冲几何图形BufferGeometry
2. 创建一个类型化的数组，分别定义6个顶点数据，其中数组中的每三项为一个顶点的xyz坐标。这个我们在原生webgl中有多次说到它。
3. 将顶点数据通过 BufferAttribute类的构造函数传入并赋值给空的几何图形的顶点位置属性。
4. 正常的渲染即可

var attribute = new THREE.BufferAttribute(vertices,3);//这里的第二个参数3表示的是类型化数组中，每3项为作为一个顶点的(x,y,z)坐标geometry.attributes.position = attribute;

我们来具体看来这两行代码。老规矩，去找BufferAttribute类的实现过程。

存储我们传进来的类型化数组和itemSize 多少项为了一个顶点。

这里需要注意的是，我们将一个类型化的数组的数据作为了几何图形的顶点数据，同理，我可以再定义一个类型化数组以同样的方法去定义几何图形有颜色。

geometry.attributes.color = attribute; 

还需要在材质中去修改顶点颜色的取值是我们定义的顶点颜色。

最终的效果是这样的。

我们定义了各顶点的颜色，最终光栅化后形成了一个渐变的颜色 ，这些内容我们在之前的原生的webgl中也有说到过。

---

总结：

通过对threejs源码的简单分析 ，我们学到了包括：

一、几何图形有基本渲染原理是通过我们传入的长宽高半径等参数去生成一系列的顶点数据。

二、自定义顶点数据和顶点颜色数据去渲染一个自定义的几何图形。

三、找到了之前我们学习原生的webgl的知识点，包括类型化数组，顶点，片元光栅化处理等。

四、如果不懂原生的webgl，那么想深入threejs难度较大，很多概念比较难理解。所以我最开始就说了，一切绕开原生webgl就上threejs就是在耍流氓~

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。