threejs添加立方体_前端图形学(三十)——从源码去看threejs中的光照模型

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

上章节回顾

1. 熟悉了threejs中内置的几何图形的渲染原理就是通过顶点渲染
2. 传入自定义顶点渲染自定义的几何图形

本章目标

1. 光照的基本原理
2. 顶点法向量的概念和应用

上一小节我们实现了一个自定义的两个三角面，如下图。

但是，大家很容易看出来，两个三角面之间相邻的地方没有棱角的感觉，所有的都是一个颜色。如果没有辅助线，仿佛看不出来是一个3d图形。

这是什么原因呢？可能有人会说，因为我没有添加点光源，额，说对了一半。如果我们单纯的在场景中添加一个点光源，也是没有效果的。因为还缺少一个 ... 平面法向量

什么鬼....

法向量

什么是法向量？拿立方体来举例。我们知道，它有六个平面。绘制需要12个三角形，36个顶点(这时不谈顶点的复用)。

这里插一句，webgl中绘制平面的最小单位是三角形(三角面)，那为什么不是矩形面呢？原因是在三维空间中，只有三个不同位置的点，才能确定一个唯一的平面。所以在原生的webgl中，gl.drawArrays(gl.Lines)来是线条绘制，gl.TRIANGLE_FAN模式来绘制填充的平面。

回到正题，立