编程技术 2023-03-08 05:40:47 评论:0    浏览:37    

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

上一章节回顾上一章节我们深入了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个点~

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

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

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

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

未完待续。。。

以上内容为【前端图形学(三十一)—快上车!我带你去看threejs基础类的源码(threejs 里的几何图形代码)】的相关内容。

 
免责声明:

本文内容来自用户上传并发布或网络新闻客户端自媒体,本站点仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系删除。

 
0相关评论
打赏