three.js 几何体-组合网格_前端图形学(二十八)——从源码下手分析渲染器和网格模型...

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

上章节回顾

1. 结合源代码分析了场景类(Scene)和相机类(PerspectiveCamera)其父类最终都是Object3D，很多基础的属性和方法都是基于Object3D,比如：position、rotation这些。
2. Object3D类中的add方法的分析。

---

本章目标

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

示例代码：

渲染器(WebGLRenderer)

废话少说，先来找源码撸一遍再说

可以看出来，渲染器并没有继承Object3D，因此我们不能通过scene.add()去将渲染器添加到场景中，这样会报错。

那么渲染器做了什么事呢？请接着往下看

从我圈出来的可以看出来，它只是动态创建了Canvas标签，我们也可以在实例化渲染器的时候指定我们创建好的Canvas对象也可以。

var renderer = new THREE.WebGLRenderer({ canvas:document.querySelector('canvas')});

类似于这样，动态创建的时候，将最终的canvas对象挂载到了this.domElement上了，所以我们可以调用代码：

document.body.appendChild(renderer.domElement);

将生成的Canvas标签追加到body中去。

接着往下：

渲染器的方法：

1、this.setSize(width,height);我们找下他的源码：

其内部其实是给画布设置宽高。值得注意的是在设置的时候，我们将宽高*_pixelRatio 变量，

我们再来看下_pixelRatio 变量是什么？我找啊找，找到了在360行。

设置_pixelRatio变量的方法。

在实际开发过程中我们会这样设置一下：

renderer.setPixelRatio(window.devicePixelRatio);

那么window.devicePixelRatio这个东东相信做过移动端开发的都不陌生。W3C给的解释是：

该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。

这个属性在PC和移动端的值可能不一样。我们需要动态设置一下。

……

继续往下，渲染器的核心方法,this.render();

它的作用就是将我们的场景和相机绘制到我们的Canvas中去。需要的参数就是场景和相机对象。

几何体(BoxGeometry)

老规矩，找源码去。

特殊的几何体继承自Geometry类，我们再继续看下Geometry类。

再无父类，不是继承自Object3D类，所以我们不能给它添加position和rotation等属性，它携带的是几何体本身的一些数据，比如我圈出来的，顶点数据，顶点颜色数据和三角面数据等。

材质(MeshLambertMaterial)

这里我们用到的材质是MeshLambertMaterial(兰伯特网孔材料)，它的特性是需要和光照进行反应才能被显示出来，属性漫反射材质…

所以我们的示例中，添加这种材质后需要再添加一种光源，所构造出来的几何体才能被显示出来。

撸源码：

它继承自Material类。其携带的属性有：

深度测试，这个名词在前面原生的webgl的渲染的时候有提到过，就是为了防止颜色在一个平面的上进行叠加~

MeshLambertMaterial类本身的构造方法参数如下：

其构造方法的参数有这么多我们来说这个map，为材质贴图，就是我们可以用一张图片去做为材质贴到几何图形上。

网格(Mesh)

找源码：

很明显，这个它依然是继承了Object3D,所以我们在循环函数中可以对它的rotation不断的更新，形成动画效果。

这里需要注意的是：我们不能给几何体本身设置rotation它没有这个属性。需要设置的应该是最终的网格模型Mesh对象。

它的构造方法：几何图形和材质。

---

总结：

1、凡是继承Object3D类的对象才拥有rotation和position属性，就如我们讲到的：scene,camera,mesh等。

2、渲染器的作用是创建我们的Canvas标签以及对其相关属性的设置和负责整个动画的渲染更新

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

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

未完待续。。。