初探WebGL-基于Three.js绘制顶点不同颜色的旋转立方体

一、简介

WebGL是什么呢？
百度百科给出的解释：WebGL（Web Graphics Library）是一种3D绘图协议，是将JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等。
WebGL 运行在电脑的 GPU 中，因此需要使用能在 GPU 上运行的代码，这样的代码需要提供成对的方法，每对方法中的一个叫顶点着色器（计算顶点的位置，即提供顶点在裁剪空间中的坐标值。）而另外一个叫做片元着色器（计算图元的颜色值，我们可以将片元着色器大致理解成网页中的像素。），并且使用 GLSL 语言。将顶点着色器和片元着色器连接起来的方法叫做着色程序。
使用 WebGL 只需要给它提供这两个东西。 因此我们通过提供两个着色器来做这两件事，一个顶点着色器提供裁剪空间坐标值，一个片元着色器提供颜色值。
WebGL 只能够绘制点、线段、三角形这三种基本图元。立方体、球体、柱体等规则形体，本质上是由一个一个的点组成，GPU 将这些点用三角形图元绘制成一个个的微小平面，这些平面之间互相连接，从而组成各种各样的立体模型。

二、几种 WebGL 开发的框架

1. Three.js
Three.js 运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，是 WebGL 的综合库，应用范围较广泛，缺点是没有比较全面详细的官方文档，入门比较不易。
2. Cesium.js
Cesium.js 是专用于 3D 地图开发的 WebGL 库，其拥有较为全面的 3D 地图开发 API，对于需要开发 3D 地图的开发者而言是一个不错的选择，但针对其他场景的应用开发覆盖的就不是很全面了。
3. Babylon.js
Babylon.js 是一款国外应用较广泛的 WebGL 库。

Three.js 作为一种应用较为广泛的WebGL 开发框架，那必然作为webgl入门的首要选择了。这一次我们要完成的作业是实现一个顶点不同颜色的旋转立方体。

三、基于Three.js绘制顶点不同颜色的旋转立方体

首先需要了解Three.js的工作机制，如下图所示

将所有物体添加到场景scene中，然后将需要渲染的数据传递给渲染器（renderer），渲染器负责将场景在 画布上绘制出来。
可以看出来，Three.js编程需要具备三个要素：场景Scene、相机Camera、渲染器Renderer。将三者结合起来才可以渲染出可见的内容。

1. 场景Scene

场景Scene是所有物体的容器，也就是我们所看到的三维世界。Scene包括网络模型和光照。

// 1、创建一个场景
scene = new THREE.Scene();
// 在场景中添加雾的效果，Fog参数分别代表‘雾的颜色’、‘开始雾化的视线距离’、刚好雾化至看不见的视线距离’
scene.fog = new THREE.Fog(0x000000, 0, 10000);
scene.background = new THREE.Color(0xffeeff);

1）创建模型
我们需要创建一个顶点不同颜色的立方体，Three.js提供了BoxGeometry，很方便的创建了立方体，但是没有办法设置顶点颜色。很遗憾，需要换一种方式实现了。Three.js还提供了缓冲几何体对象BufferGeometry，采用绘制三角面元的思想，通过类型数组设置几何体顶点位置与颜色，从而得到想要的立方体模型。

// 2、创建模型
geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

//类型数组创建顶点位置position数据
vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  50, 50, 0, //顶点3坐标
  50, 50, 0, //顶点3坐标
  0, 50, 0, //顶点4坐标
  0, 0, 0, //顶点1坐标

  50, 0, 0, //顶点2坐标
  50, 50, 0, //顶点3坐标
  50, 50, 50, //顶点8坐标
  50, 50, 50, //顶点8坐标
  50, 0, 50, //顶点7坐标
  50, 0, 0, //顶点2坐标