用webgl绘制一个彩色旋转立方体

#用webgl绘制一个旋转立方体

**

学习交流欢迎加群：789723098，博主会将一些demo整理共享

**

今天给大家分享一个用webgl写的简单的三维场景：转动的交互式彩色立方体，其六个面的颜色都不一样。
上次绘制二维彩色矩形时讲到，二维是三维场景的特殊情况，所以由二维向三维拓展也并不难，webgl里面提供了画三角形的方法，立方体有6个面，一个面由两个三角形组成，共计需要12个三角形，每个三角形又有3个顶点，故绘制立方体需要36个点，而实际上立方体只有8个顶点，这8个顶点有序组合成6个矩形面，如下图所示：

在程序里面有一个quad(a,b,c,d),表示一个矩形面，例如quad(v0,v1,v2,v3),表示第一个矩形面，其实为两个三角形构成，分别为(v1,v0,v3), (v1, v3,v2),按照这样的顶点索引顺序来画三角形，并最终构成整个立方体。
最终程序运行如下图：在最底下的三个按钮是用于控制立方体绕坐标轴旋转的交互式按钮。

下面是本例的代码：（如果大家需本例完整文件，可联系我，完全开源，用于交流学习）
cube.js：

/**
 * Created by wjh on 2017/6/27.
 */
"use strict";
var canvas;
var gl;
var points = [];//顶点容器
var colors = [];//颜色容器
var control;
var u_control=[0,0,0];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = 0;
umVertices = 36;//立方体需要12个三角形，共36个顶点

function init(){
    canvas = document.getElementById("cube");
    gl=WebGLUtils.setupWebGL(canvas);
    if(!gl){alert("您的浏览器不支持WebGL!");}

   gl.viewport(0,0,canvas.width,canvas.height);//设置视口大小
    gl.clearColor(0.0,0.