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

上一章节回顾上一章节我们深入了threejs的源码引出了法向量的概念和作用在threejs光源和法向量如何生成光照模型通过利用BufferGeometry类自定义一顶点和法向量数据渲染自定义的几何图形本章目标Geometry类的基本使用vector3类的源码分析face3类的源码分析

一、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个点~

其实这个不难发现，两个三角形中，有两个顶点是重复的，我们通过索引的方式去选取的顶点，利用的就是顶点的复用

顶点的复用的作用也很明显，节约了数组空间，那么复杂的三维图形中，可能会有成千上万个顶点，如果不复用顶点，那么顶点数据将非常庞大，对资源消耗非常之大。

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

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

未完待续。。。