在之前的学习中已经将三维物体添加到了场景中，但是并没有在场景中使用光，照可以使模型更具有立体感，本文主要介绍 webgl 中的光照理论和计算方式，并展示如何在三维场景中添加光照。

webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。

webgl在渲染三维场景时，按照Z坐标的值决定前后关系，但是在默认状态下它并未开启深度检测，而是将后绘制的物体放在前面；当两个物体Z坐标相差无几时，会产生深度冲突，两个物体颜色互相影响，使得表面看上去斑斑驳驳，需要开启多边形缓冲来避免此类问题。

在webgl中，三维空间中的所有物体不是会都被绘制出来，只有当它在可视范围内时，才会进行绘制。因为不在可视范围中的物体即使绘制也不会在屏幕上显示。除了水平和垂直范围内的限制，WebGL还限制观察者的可视深度，即"能够看多远"。水平视角、垂直视角、可视深度，三者定义了可视空间。由正射投影（orthographic projection）产生的长方体状可视空间由透视投影（perspective pro

在webgl中将图形进行平移、旋转、缩放等操作时可以在着色器中使用数学表达式来操作，但是这样并不是最好的方式，当进行的变换比较复杂，如“旋转后平移再缩放”这样的场景，每次都要先重新计算表达式，然后在着色器中去更改它，这样很不方便，因此，出现了另一种数学手段——变换矩阵，变换矩阵非常适合处理计算机图形。本文对变换矩阵的理论进行讲解。矩阵运算、矩阵变换的一般规则变换矩阵进行图形变换实例。

在webgl中，所有的图形都是由大量点组成的，为了绘制点，每次都需要调用gl.drawArrays()方法，当需要绘制大量三角形、多边形或者几何体时，轮番绘制各个点是非常麻烦的。为此，webgl提供了缓冲区对象功能，它通过在webgl中开辟一块独立的内存区，将需要绘制的顶点数据全部填充至缓冲区内，供顶点着色器使用。可以在一个缓冲区中传递多组信息，实现效率的优化。

gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。

threejs基于react-hooks创建的三维地图，实现了基本的交互展示，可根据个人喜好增加各种交互和展示效果。

微信后台配置扫码、扫描二维码、分享链接、下载二维码。

Promise是一种用于处理异步操作的容器对象，相比回调函数具有显著优势：可读性强（避免回调地狱）、错误处理统一（catch捕获）、流程控制灵活（all/race等方法）以及明确的状态管理（pending/fulfilled/rejected）。Promise状态不可逆，通过then处理成功状态，catch捕获异常，支持链式调用。链式调用中then的返回值决定下一个Promise的状态，推荐使用c