前端图形学(三十一)—快上车！我带你去看threejs基础类的源码(向量頂點源碼)
admin
一、Geometry
Geometry和BufferGeometry都是普通的几何图形，那么它们有什么区别呢？
通过前面的学习，我们知道了，BufferGeometry是通过我们传入顶点数据然后渲染的，那么Geometry这个类还可以是通过传入三角面来渲染图形的，我们接下往下看~
先来看用Geometry实现的自定义几何图形:
和前面的效果没什么区别，源码：
核心代码解析：
1、实例化一个空的几何体对象（不需要任何参数）
var box = new THREE.Geometry();
2、给box对象添加4个顶点，这里我们使用一个三维向量表示一个顶点，创建4个顶点
box.vertices.push(new THREE.Vector3( 0,0,0),new THREE.Vector3( 2,0,0),new THREE.Vector3( 0,2,0),new THREE.Vector3( 0,0,2 ));
3、我们通过索引去选取3个顶点作为了一三角面然后渲染。在box对象下，有一个faces属性，它是用来收集三角面的数组。
文档上也有说
box.faces.push( new THREE.Face3( 0, 1, 2) );box.faces.push( new THREE.Face3( 0, 1, 3) );
这里面的(0,12)和(0,1,3)表示的是box.vertices中的索引。
源码分析:
Vector3三维向量
构造函数
它可以描述出在三维空间中的任意一个点坐标。继续看它有哪些方法成员。
set方法：传入x,y,z后可以去更改这个向量本身，
setScalar：它可以将当前的向量设置成xyz都一样的向量
当然我们也可以通过索引的方法去修改和获取向量对应的值。
setComponent和getComponent
这个类本身的提供的方法比较基础，那么我们接下来去看下face3这个类
face3 三角面
我们在上面的示例中在实例化它的时候，除了传入三个顶点的索引之外，我们还传入了第三个参数，是一个vector3的对象，我们来看来源码
之所以传了第四个参数，是因为我阅读了源码才知道的，那么第四个参数它是什么意思呢？
normal这个单词前面我们已经讲过，它表示的是平面的法向量，下面还有一个属性是vertexNormals表示的是顶点的法向量。
通过源代码知道，两个属性都是由第四个参数normal的类型来决定的。
vector3类型表示的是平面的法向量
数组类型则表示的是各个顶点的法向量。
示例中，我定义的第一个平面的法向量为（0,0,1）怎么来的呢？很简单，第一个平面渲染出来的结果是平行于我们的屏幕，那么他的法向量就是垂直于屏幕，即(0,0,1),也可能是(0,0,-1)，两个方向刚好相反。
另外一个平面同理。
那么我们通过前面的章节的学习知道，法向量最终是要和我们的光照进行合成计算的，法向量方向直接影响着光照的结果。
继续看源码，我们可以再传入第五个参数，看起来是颜色数据，但是我还未具体去尝试，这里就不多说了。
总结本示例中，我们同样绘制了两个三角形，但是细心的童鞋可能发现了，一般来说，绘制两个三角形至少需要6个顶点，但是我们上面的代码中只运用到了4个点~
其实这个不难发现，两个三角形中，有两个顶点是重复的，我们通过索引的方式去选取的顶点，利用的就是顶点的复用
顶点的复用的作用也很明显，节约了数组空间，那么复杂的三维图形中，可能会有成千上万个顶点，如果不复用顶点，那么顶点数据将非常庞大，对资源消耗非常之大。
以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。
这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。
未完待续。。。
