原生WebGL场景中绘制多个圆锥圆柱

前几天解决了原生WebGL开发中的一个问题，就是在一个场景中绘制多个几何网格特征不同的模型，比如本文所做的绘制多个圆锥和圆柱在同一个场景中，今天抽空把解决的办法记录下来，同时也附上代码。首先声明，圆柱和圆锥的网格生成是我自己写的polyhedron.js模块，如果要加载其他模型，只需要把geometry换成其他几何体的网格即可，本文的重点不在于使用什么几何模型，而在于如何将各种不同的模型绘制到同一个场景中去。

第一件事，我们还是先把依赖的模型生成的js文件贴出来，以便参考者能够将代码组装起来。首先看工程目录结构，如下图

该工程实际用到的文件就是这4个红框框出的文件，其中除了jquery-2.1.4.min.js以外（请于cdn或百度或51cto站点自行下载），剩下的minMatrix.js，polyhedron.js，testCoordinates.html本作都将贴出完整的源码，以便参考者本地调试。

首先贴出minMatrix.js源码，minMatrix.js负责向量矩阵的运算，由于不是本文的中心论点，故不做赘述，如下所示

// ------------------------------------------------------------------------------------------------
// minMatrix.js
// version 0.0.1
// Copyright (c) doxas
// ------------------------------------------------------------------------------------------------

function matIV(){
    this.create = function(){
        return new Float32Array(16);
    };
    this.identity = function(dest){
        dest[0]  = 1; dest[1]  = 0; dest[2]  = 0; dest[3]  = 0;
        dest[4]  = 0; dest[5]  = 1; dest[6]  = 0; dest[7]  = 0;
        dest[8]  = 0; dest[9]  = 0; dest[10] = 1; dest[11] = 0;
        dest[12] = 0; dest[13] = 0; dest[14] = 0; dest[15] = 1;
        return dest;
    };
    this.multiply = function(mat1, mat2, dest){
        var a = mat1[0],  b = mat1[1],  c = mat1[2],  d = mat1[3],
            e = mat1[4],  f = mat1[5],  g = mat1[6],  h = mat1[7],
            i = mat1[8],  j = mat1[9],  k = mat1[10], l = mat1[11],
            m = mat1[12], n = mat1[13], o = mat1[14], p = mat1[15],
            A = mat2[0],  B = mat2[1],  C = mat2[2],  D = mat2[3],
            E = mat2[4],  F = mat2[5],  G = mat2[6],  H = mat2[7],
            I = mat2[8],  J = mat2[9],  K = mat2[10], L = mat2[11],
            M = mat2[12], N = mat2[13], O = mat2[14], P = mat2[15];
        dest[0] = A * a + B * e + C * i + D * m;
        dest[1] = A * b + B * f + C * j + D * n;
        dest[2] = A * c + B * g + C * k + D * o;
        dest[3] = A * d + B * h + C * l + D * p;
        dest[4] = E * a + F * e + G * i + H * m;
        dest[5] = E * b + F * f + G * j + H * n;
        dest[6] = E * c + F * g + G * k + H * o;
        dest[7] = E * d + F * h + G * l + H * p;
        dest[8] = I * a + J * e + K * i + L * m;
        dest[9] = I * b + J * f + K * j + L * n;
        dest[10] = I * c + J * g + K * k + L * o;
        dest[11] = I * d + J * h + K * l + L * p;
        dest[12] = M * a + N * e + O * i + P * m;
        dest[13] = M * b + N * f + O * j + P * n;
        dest[14] = M * c + N * g + O * k + P * o;
        dest[15] = M * d + N * h + O * l + P * p;
        return dest;
    };
    this.scale = function(mat, vec, dest){
        dest[0]  = mat[0]  * vec[0];
        dest[1]  = mat[1]  * vec[0];
        dest[2]  = mat[2]  * vec[0];
        dest[3]  = mat[3]  * vec[0];
        dest[4]  = mat[4]  * vec[1];
        dest[5]  = mat[5]  * vec[1];
        dest[6]  = mat[6]  * vec[1];
        dest[7]  = mat[7]  * vec[1];
        dest[8]  = mat[8]  * vec[2];
        dest[9]  = mat[9]  * vec[2];
        dest[10] = mat[10] * vec[2];
        dest[11] = mat[11] * vec[2];
        dest[12] = mat[12];
        dest[13] = mat[13];
        dest[14] = mat[14];
        dest[15] = mat[15];
        return dest;
    };
    this.translate = function(mat, vec, dest){
        dest[0] = mat[0]; dest[1] = mat[1]; dest[2]  = mat[2];  dest[3]  = mat[3];
        dest[4] = mat[4]; dest[5] = mat[5]; dest[6]  = mat[6];  dest[7]  = mat[7];
        dest[8] = mat[8]; dest[9] = mat[9]; dest[10] = mat[10]; dest[11] = mat[11];
        dest[12] = mat[0] * vec[0] + mat[4] * vec[1] + mat[8]  * vec[2] + mat[12];
        dest[13] = mat[1] * vec[0] + mat[5] * vec[1] + mat[9]  * vec[2] + mat[13];
        dest[14] = mat[2] * vec[0] + mat[6] * vec[1] + mat[10] * vec[2] + mat[14];
        dest[15] = mat[3] * vec[0] + mat[7] * vec[1] + mat[11] * vec[2] + mat[15];
        return dest;
    };
    this.rotate = function(mat, angle, axis, dest){
        var sq = Math.sqrt(axis[0] * axis[0] + axis[1] * axis[1] + axis[2] * axis[2]);
        if(!sq){return null;}
        var a = axis[0], b = axis[1], c = axis[2];
        if(sq != 1){sq = 1 / sq; a *= sq; b *= sq; c *= sq;}
        var d = Math.sin(angle), e = Math.cos(angle), f = 1 - e,
            g = mat[0],  h = mat[1], i = mat[2],  j = mat[3],
            k = mat[4],  l = mat[5], m = mat[6],  n = mat[7],
            o = mat[8],  p = mat[9], q = mat[10], r = mat[11],
            s = a * a * f + e,
            t = b * a * f + c * d,
            u = c * a * f - b * d,
            v = a * b * f - c * d,
            w = b * b * f + e,
            x = c * b * f + a * d,
            y = a * c * f + b * d,
            z = b * c * f - a * d,
            A = c * c * f + e;
        if(angle){
            if(mat != dest){
                dest[12] = mat[12]; dest[13] = mat[13];
                dest[14] = mat[14]; dest[15] = mat[15];
            }
        } else {
            dest = mat;
        }
        dest[0] = g * s + k * t + o * u;
        dest[1] = h * s + l * t + p * u;
        dest[2] = i * s + m * t + q * u;
        dest[3] = j * s + n * t + r * u;
        dest[4] = g * v + k * w + o * x;
        dest[5] = h * v + l * w + p * x;
        dest[6] = i * v + m * w + q * x;
        dest[7] = j * v + n * w + r * x;
        dest[8] = g * y + k * z + o * A;
        dest[9] = h * y + l * z + p * A;
        dest[10] = i * y + m * z + q * A;
        dest[11] = j * y + n * z + r * A;
        return dest;
    };

    this.lookAt = function(eye, center, up, dest){
        var eyeX    = eye[0],    eyeY    = eye[1],    eyeZ    = eye[2];
        var    centerX = center[0], centerY = center[1], centerZ = center[2];
        var    upX     = up[0],     upY     = up[1],     upZ     = up[2];

        if(eyeX == centerX && eyeY == centerY && eyeZ == centerZ){
            return this.identity(dest);
        }

        var x0, x1, x2, y0, y1, y2, z0, z1, z2, l;

        z0 = eyeX - centerX; z1 = eyeY - centerY; z2 = eyeZ - centerZ;
        l = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
        z0 *= l; z1 *= l; z2 *= l;

        x0 = upY * z2 - upZ * z1; x1 = upZ * z0 - upX * z2; x2 = upX * z1 - upY * z0;
        l = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
        if(!l){
            x0 = 0; x1 = 0; x2 = 0;
        } else {
            l = 1 / l;
            x0 *= l; x1 *= l; x2 *= l;
        }

        y0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0;
        l = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
        if(!l){
            y0 = 0; y1 = 0; y2 = 0;
        } else {
            l = 1 / l;
            y0 *= l; y1 *= l; y2 *= l;
        }

        dest[0] = x0; dest[1] = y0; dest[2]  = z0; dest[3]  = 0;
        dest[4] = x1; dest[5] = y1; dest[6]  = z1; dest[7]  = 0;
        dest[8] = x2; dest[9] = y2; dest[10] = z2; dest[11] = 0;
        dest[12] = -(x0 * eyeX + x1 * eyeY + x2 * eyeZ);
        dest[13] = -(y0 * eyeX + y1 * eyeY + y2 * eyeZ);
        dest[14] = -(z0 * eyeX + z1 * eyeY + z2 * eyeZ);
        dest[15] = 1;
        return dest;
    };

    this.view = function(eye, at, up, dest){

        var forward = [];
        forward[0] = at[0] - eye[0];
        forward[1] = at[1] - eye[1];
        forward[2] = at[2] - eye[2];
        var l = Math.sqrt(forward[0]*forward[0] + forward[1]*forward[1] + forward[2]*forward[2]);
        forward[0] = forward[0]/l; forward[1] = forward[1]/l; forward[2] = forward[2]/l;

        var side = [];
        side[0] = forward[2]*up[1] - up[2]*forward[1];
        side[1] = forward[0]*up[2] - up[0]*forward[2];
        side[2] = forward[1]*up[0] - up[1]*forward[0];
        l = Math.sqrt(side[0]*side[0] + side[1]*side[1] + side[2]*side[2]);
        side[0] = side[0]/l; side[1] = side[1]/l; side[2] = side[2]/l;

        up[0] = side[2]*forward[1] - forward[2]*side[1];
        up[1] = side[0]*forward[2] - forward[0]*side[2];
        up[2] = side[1]*forward[0] - forward[1]*side[0];

        var dest = [];
        dest[0] = side[0]; dest[1] = up[0]; dest[2] = -forward[0]; dest[3] = 0;
        dest[4] = side[1]; dest[5] = up[1]; dest[6] = -forward[1]; dest[7] = 0;
        dest[8] = side[2]; dest[9] = up[2]; dest[10]= -forward[2]; dest[11]= 0;
        dest[12]= 0;       dest[13]= 0;        dest[14]= 0;           dest[15]= 1;

        dest[0] = dest[0]; dest[1] = dest[1]; dest[2]  = dest[2];  dest[3]  = dest[3];
        dest[4] = dest[4]; dest[5] = dest[5]; dest[6]  = dest[6];  dest[7]  = dest[7];
        dest[8] = dest[8]; dest[9] = dest[9]; dest[10] = dest[10]; dest[11] = dest[11];
        dest[12] = dest[0] * (-eye[0]) + dest[4] * (-eye[1]) + dest[8]  * (-eye[2]) + dest[12];
        dest[13] = dest[1] * (-eye[0]) + dest[5] * (-eye[1]) + dest[9]  * (-eye[2]) + dest[13];
        dest[14] = dest[2] * (-eye[0]) + dest[6] * (-eye[1]) + dest[10] * (-eye[2]) + dest[14];
        dest[15] = dest[3] * (-eye[0]) + dest[7] * (-eye[1]) + dest[11] * (-eye[2]) + dest[15];

        return dest;
    }

    /**
     * 正交投影
     */
    this.ortho = function(left, right, bottom, top, near, far, dest){

        var a = 2/(right-left);
        var b = -(right+left)/(right-left);
        var c = 2/(top-bottom);
        var d = -(top+bottom)/(top-bottom);
        var e = 2/(far-near);
        var f = -(far+near)/(far-near);

        dest[0] = a; dest[1] = 0; dest[2] = 0; dest[3] = b;
        dest[4] = 0; dest[5] = c; dest[6] = 0; dest[7] = d;
        dest[8] = 0; dest[9] = 0; dest[10]= e; dest[11]= f;
        dest[12]= 0; dest[13]= 0; dest[14]= 0; dest[15]= 1;

        return dest;
    }

    /**
     * 透视投影
     */
    this.perspective = function(fovy, aspect, near, far, dest){
        var t = near * Math.tan(fovy * Math.PI / 360);
        var r = t * aspect;
        var a = r * 2, b = t * 2, c = far - near;
        dest[0] = near * 2 / a;
        dest[1] = 0;
        dest[2] = 0;
        dest[3] = 0;
        dest[4] = 0;
        dest[5] = near * 2 / b;
        dest[6] = 0;
        dest[7] = 0;
        dest[8] = 0;
        dest[9] = 0;
        dest[10] = -(far + near) / c;
        dest[11] = -1;
        dest[12] = 0;
        dest[13] = 0;
        dest[14] = -(far * near * 2) / c;
        dest[15] = 0;
        return dest;
    };
    this.transpose = function(mat, dest){
        dest[0]  = mat[0];  dest[1]  = mat[4];
        dest[2]  = mat[8];  dest[3]  = mat[12];
        dest[4]  = mat[1];  dest[5]  = mat[5];
        dest[6]  = mat[9];  dest[7]  = mat[13];
        dest[8]  = mat[2];  dest[9]  = mat[6];
        dest[10] = mat[10]; dest[11] = mat[14];
        dest[12] = mat[3];  dest[13] = mat[7];
        dest[14] = mat[11]; dest[15] = mat[15];
        return dest;
    };
    this.inverse = function(mat, dest){
        var a = mat[0],  b = mat[1],  c = mat[2],  d = mat[3],
            e = mat[4],  f = mat[5],  g = mat[6],  h = mat[7],
            i = mat[8],  j = mat[9],  k = mat[10], l = mat[11],
            m = mat[12], n = mat[13], o = mat[14], p = mat[15],
            q = a * f - b * e, r = a * g - c * e,
            s = a * h - d * e, t = b * g - c * f,
            u = b * h - d * f, v = c * h - d * g,
            w = i * n - j * m, x = i * o - k * m,
            y = i * p - l * m, z = j * o - k * n,
            A = j * p - l * n, B = k * p - l * o,
            ivd = 1 / (q * B - r * A + s * z + t * y - u * x + v * w);
        dest[0]  = ( f * B - g * A + h * z) * ivd;
        dest[1]  = (-b * B + c * A - d * z) * ivd;
        dest[2]  = ( n * v - o * u + p * t) * ivd;
        dest[3]  = (-j * v + k * u - l * t) * ivd;
        dest[4]  = (-e * B + g * y - h * x) * ivd;
        dest[5]  = ( a * B - c * y + d * x) * ivd;
        dest[6]  = (-m * v + o * s - p * r) * ivd;
        dest[7]  = ( i * v - k * s + l * r) * ivd;
        dest[8]  = ( e * A - f * y + h * w) * ivd;
        dest[9]  = (-a * A + b * y - d * w) * ivd;
        dest[10] = ( m * u - n * s + p * q) * ivd;
        dest[11] = (-i * u + j * s - l * q) * ivd;
        dest[12] = (-e * z + f * x - g * w) * ivd;
        dest[13] = ( a * z - b * x + c * w) * ivd;
        dest[14] = (-m * t + n * r - o * q) * ivd;
        dest[15] = ( i * t - j * r + k * q) * ivd;
        return dest;
    };
    this.rotateByAnyAxis = function(RawMat, axis, rad, destMat){

    };
}

接下来就要贴出几何体生成工具 polyhedron.js，我们用到的几何体是其中的圆锥 coneGeo和圆柱 cylinderGeo，这两个类都是PolyhedronGeometry的子类，几何体都包含顶点成员this.vertices，法向成员this.normals，索引成员this.faces。具体构造详见代码如下

/**
 * Created by ccentry on 2018/10/15.
 */

/**
 * 圆锥
 * radius:底面半径
 * height:圆锥高度
 * meshDensity:网格密度
 * */
var coneGeo = function(radius, height, segment){
    //锥顶
    var top = [0, height, 0];
    //锥底，锥底半径radius
    //根据segment来切割锥底圆
    var sliceNum = segment || 3;
    var rad = Math.PI*2/sliceNum;
    var bottom = [];
    for(var i=0; i<sliceNum; i++){
        bottom[i*3] = radius*Math.cos(rad*i);
        bottom[i*3 + 1] = 0;
        bottom[i*3 + 2] = radius*Math.sin(rad*i);
    }
    //圆锥的顶点
    this.vertices = [];
    //顶点法向
    this.normals = [];
    //锥顶
    for(var i=0; i<sliceNum; i++){
        this.vertices[i*3] = top[0];
        this.vertices[i*3+1] = top[1];
        this.vertices[i*3+2] = top[2];
    }
    //锥面圆环
    for(var i=0; i<bottom.length; i++){
        this.vertices[3*sliceNum+i] = bottom[i];
    }
    //锥底圆环
    for(var i=0; i<bottom.length; i++){
        this.vertices[2*3*sliceNum+i] = bottom[i];
    }
    //锥底圆心
    this.vertices.push(0, 0, 0);
    //圆锥面索引
    this.faces = [];
    for(var i=sliceNum; i<2*sliceNum-1; i++){
        //圆锥侧面
        this.faces.push(i, i-sliceNum, i+1);
        //圆锥底面
        this.faces.push(3*sliceNum, sliceNum+i, sliceNum+i+1);
    }
    //补侧面
    this.faces.push(2*sliceNum-1, sliceNum-1, sliceNum);
    //补底面
    this.faces.push(3*sliceNum, 3*sliceNum-1, 2*sliceNum);
    //计算所有顶点法向
    this.computeNormal4EachVertex();
};

/**
 * 圆柱
 * radius:底面半径
 * height:圆柱高度
 * meshDensity:网格密度
 * */
var cylinderGeo = function(radius, height, segment){
    radius = radius || 1;
    height = height || 1;
    //根据网格密度来切割圆柱体底圆
    var sliceNum = segment || 3;
    //底面圆弧度
    var rad = Math.PI*2/sliceNum;
    //底面圆环顶点
    var bottomVertices = [];
    //顶面顶点
    var topVertices = [];
    //切割底面圆和底面圆
    for(var i=0; i<sliceNum; i++){
        bottomVertices[3*i] = radius * Math.cos(rad * i);
        bottomVertices[3*i+1] = 0;
        bottomVertices[3*i+2] = radius * Math.sin(rad * i);

        topVertices[3*i] = radius * Math.cos(rad * i);
        topVertices[3*i+1] = height;
        topVertices[3*i+2] = radius * Math.sin(rad * i);
    }
    //圆柱的顶点
    this.vertices = [];
    for(var i=0; i<bottomVertices.length; i++){
        //底面圆
        this.vertices[i] = bottomVertices[i];
        //顶面圆
        this.vertices[bottomVertices.length + i] = topVertices[i];
        //柱底圈
        this.vertices[2*bottomVertices.length + i] = bottomVertices[i];
        //柱顶圈
        this.vertices[3*bottomVertices.length + i] = topVertices[i];
    }
    //底面圆心;
    this.vertices.push(0, 0, 0);
    //顶面圆心
    this.vertices.push(0, height, 0);
    //圆柱的面
    this.faces = [];
    for(var i=0; i<sliceNum-1; i++){
        //底面圆
        this.faces.push(4*sliceNum, i, i+1);
        //顶面圆
        this.faces.push(4*sliceNum+1, sliceNum+i+1, sliceNum+i);
        //柱身
        this.faces.push(2*sliceNum+i, 3*sliceNum+i, 2*sliceNum+i+1);
        this.faces.push(3*sliceNum+i, 3*sliceNum+i+1, 2*sliceNum+i+1);
    }
    //补底面圆
    this.faces.push(4*sliceNum, sliceNum-1, 0);
    //补顶面圆
    this.faces.push(4*sliceNum+1, sliceNum, 2*sliceNum-1);
    //补柱身
    this.faces.push(3*sliceNum-1, 4*sliceNum-1, 2*sliceNum);
    this.faces.push(4*sliceNum-1, 3*sliceNum, 2*sliceNum);
    //顶点法向
    this.normals = [];
    //计算所有顶点法向
    this.computeNormal4EachVertex();
};

/**
 * 球体
 * radius:球体半径
 * meshDensity:网格密度
 * */
var sphereGeo = function(radius, widthSegments, heightSegments){
    var phiStart = 0;
    var phiLength = Math.PI * 2;
    var thetaStart = 0;
    var thetaLength = Math.PI;
    var thetaEnd = thetaStart + thetaLength;
    var ix, iy;
    var index = 0;
    var grid = [];
    var vertex = {};
    var normal = {};
    //存储
    var indices = [];
    var vertices = [];
    var normals = [];
    var uvs = [];
    //生成顶点，法向，uv
    for ( iy = 0; iy <= heightSegments; iy ++ ) {
        var verticesRow = [];
        var v = iy / heightSegments;
        for ( ix = 0; ix <= widthSegments; ix ++ ) {
            var u = ix / widthSegments;
            //顶点
            vertex.x = - radius * Math.cos( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
            vertex.y = radius * Math.cos( thetaStart + v * thetaLength );
            vertex.z = radius * Math.sin( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
            vertices.push( vertex.x, vertex.y, vertex.z );
            //法向
            normal.x = vertex.x; normal.y = vertex.y; normal.z = vertex.z;
            //单位化
            this.normalize([normal.x, normal.y, normal.z]);
            normals.push( normal.x, normal.y, normal.z );
            //uv
            uvs.push( u, 1 - v );
            verticesRow.push( index ++ );
        }
        grid.push( verticesRow );
    }
    //索引数组
    for ( iy = 0; iy < heightSegments; iy ++ ) {
        for ( ix = 0; ix < widthSegments; ix ++ ) {
            var a = grid[ iy ][ ix + 1 ];
            var b = grid[ iy ][ ix ];
            var c = grid[ iy + 1 ][ ix ];
            var d = grid[ iy + 1 ][ ix + 1 ];
            if ( iy !== 0 || thetaStart > 0 ) indices.push( a, b, d );
            if ( iy !== heightSegments - 1 || thetaEnd < Math.PI ) indices.push( b, c, d );
        }
    }
    //构造geometry
    this.faces =  indices;
    this.vertices = vertices;
    this.normals = normals;
    //this.uv = uvs;
};

var cubeGeo = function(width, height, depth){
    this.vertices = [];
    this.faces = [];
    var bottom = [];
    bottom[0] = [width/2, 0, depth/2];
    bottom[1] = [-width/2, 0, depth/2];
    bottom[2] = [-width/2, 0, -depth/2];
    bottom[3] = [width/2, 0, -depth/2];
    var top = [];
    top[0] = [width/2, height, depth/2];
    top[1] = [-width/2, height, depth/2];
    top[2] = [-width/2, height, -depth/2];
    top[3] = [width/2, height, -depth/2];
    for(var i=0; i<4; i++){
        for(var j=0; j<3; j++){
            this.vertices.push(bottom[i][j]);
        }
    }
    for(var i=0; i<4; i++){
        for(var j=0; j<3; j++){
            this.vertices.push(top[i][j]);
        }
    }
    for(var i=0; i<3; i++){
        this.faces.push(i, i+4, i+1);
        this.faces.push(i+4, i+5, i+1);
    }
    //补面
    this.faces.push(3, 7, 0);
    this.faces.push(7, 4, 0);
    //补底面
    this.faces.push(0, 1, 2, 2, 3, 0);
    //补底面
    this.faces.push(4, 7, 6, 6, 5, 4);
};

var PolyhedronGeometry = function(){
    this.type = "PolyhedronGeometry";
};

PolyhedronGeometry.prototype = {
    //坐标单位话
    normalize : function(arr){
        if(arr instanceof Array){
            var sum = 0;
            for(var i=0; i<arr.length; i++){
                sum += arr[i]*arr[i];
            }
            for(var i=0; i<arr.length; i++){
                arr[i] = arr[i]/sum;
            }
        }
    },
    //计算顶点法向
    computeVertexNormal: function(face3){
        //顶点逆时针绕向
        //向量v1-v0
        var v1_0 = {};
        v1_0.x = face3[1][0] - face3[0][0];
        v1_0.y = face3[1][1] - face3[0][1];
        v1_0.z = face3[1][2] - face3[0][2];
        //向量v2-v1
        var v2_1 = {};
        v2_1.x = face3[2][0] - face3[1][0];
        v2_1.y = face3[2][1] - face3[1][1];
        v2_1.z = face3[2][2] - face3[1][2];
        //v1_0 叉乘 v2_1
        var normal = {};
        normal.x = v1_0.y * v2_1.z - v2_1.y * v1_0.z;
        normal.y = v1_0.z * v2_1.x - v2_1.z * v1_0.x;
        normal.z = v1_0.x * v2_1.y - v2_1.x * v1_0.y;
        var normalArray = [normal.x, normal.y, normal.z];
        this.normalize(normalArray);
        return normalArray;
    },
    computeNormal4EachVertex:function(){
        //遍历索引，通过hash插值构造normals数组
        var normalList = [];
        for(var i=0; i<this.faces.length; i=i+3){
            //顶点索引
            var vertex0 = this.faces[i];
            var vertex1 = this.faces[i+1];
            var vertex2 = this.faces[i+2];
            //顶点
            var v0 = [this.vertices[3*vertex0], this.vertices[3*vertex0+1], this.vertices[3*vertex0+2]];
            var v1 = [this.vertices[3*vertex1], this.vertices[3*vertex1+1], this.vertices[3*vertex1+2]];
            var v2 = [this.vertices[3*vertex2], this.vertices[3*vertex2+1], this.vertices[3*vertex2+2]];
            //取出索引指向的顶点坐标
            var face3 = [v0, v1, v2];
            var normalArray = this.computeVertexNormal(face3);
            var normal0 = {index:vertex0, normal:normalArray};
            var normal1 = {index:vertex1, normal:normalArray};
            var normal2 = {index:vertex2, normal:normalArray};
            normalList.push(normal0, normal1, normal2);
        }
        //根据index属性排序
        var sortedNormalList = [];
        var total = normalList.length;
        for(var i=0; i<total; i++){
            for(var j=0; j<normalList.length; j++){
                if(normalList[j].index === i){
                    sortedNormalList[i] = {index:normalList[j].index, normal:normalList[j].normal};
                    //删掉该normal节点
                    normalList.splice(j, 1);
                    break;
                }
            }
        }
        for(var i=0; i<sortedNormalList.length; i++){
            var normal = sortedNormalList[i].normal;
            this.normals.push(normal[0], normal[1], normal[2]);
        }
    }
};

coneGeo.prototype = new PolyhedronGeometry();
cylinderGeo.prototype = new PolyhedronGeometry();
sphereGeo.prototype = new PolyhedronGeometry();
cubeGeo.prototype = new PolyhedronGeometry();

以上就是几何体的构造函数，我们的圆锥和圆柱即将由此生成。接下来进入我们今天的重点，如何将多个圆锥圆柱绘制进一个场景中去，直接上html代码，场景代码如下

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <script type="text/JavaScript" src="minMatrix.js"></script>
    <script type="text/JavaScript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="polyhedron.js"></script>

    <script id="vs" type="x-shader/x-vertex">
        attribute vec3 position;
        attribute vec3 normal;
        attribute vec4 color;
        uniform   mat4 mvpMatrix;
        uniform   mat4 invMatrix;
        uniform   vec3 lightDirection;
        uniform   vec4 ambientColor;
        varying   vec4 vColor;
        uniform   float lightS;

        void main(void){
            vec3  invLight = normalize(invMatrix * vec4(lightDirection, 0)).xyz;
            float diffuse  = clamp(dot(normal, invLight), 0.0, 1.0) * lightS;
            vColor         = color * vec4(vec3(diffuse), 1.0) + ambientColor;
            gl_Position    = mvpMatrix * vec4(position, 1.0);
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 vColor;
        void main(void){
            gl_FragColor = vColor;
        }
    </script>

    <script>
        onload = function(){
            // canvas对象获取
            var c = document.getElementById('canvas');
            c.width = 1000;
            c.height = 800;

            // webgl的context获取
            var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
            //初始化gl
            initGL(gl);
            // 顶点着色器和片段着色器的生成
            var v_shader = create_shader('vs');
            var f_shader = create_shader('fs');
            // 程序对象的生成和连接
            var prg = create_program(v_shader, f_shader);

            // attributeLocation的获取
            var attLocation = new Array(2);
            attLocation[0] = gl.getAttribLocation(prg, 'position');
            attLocation[1] = gl.getAttribLocation(prg, 'normal');
            attLocation[2] = gl.getAttribLocation(prg, 'color');

            // 将元素数attribute保存到数组中
            var attStride = new Array(2);
            attStride[0] = 3;
            attStride[1] = 3;
            attStride[2] = 4;

            /**
             * 光
             * */
            // 环境光，漫反射光
            var ambientColor = [0.2, 0.2, 0.2, 1.0];
            // 光照强度
            var lightS = 1.6;
            // 平行光源的方向
            var lightDirection = [1, 1, 1];

            /**
             * 视图矩阵
             */
            // matIV对象生成
            var m = new matIV();
            // 画布的宽高比
            var aspect = c.width / c.height;
            var mMatrix = m.identity(m.create());
            var invMatrix = m.identity(m.create());
            var tmpMatrix = m.identity(m.create());
            var mvpMatrix = m.identity(m.create());
            // 将视图矩阵根据宽高比进行反比，避免X/Y平面内出现变形
            tmpMatrix[0] = 1/aspect;
            // 得到mvpMatrix定位坐标矩阵
            //m.multiply(tmpMatrix, mMatrix, mvpMatrix);
            // mMatrix的逆矩阵
            //m.inverse(mMatrix, invMatrix);

            /**
             * 绑定shader的uniform
             * */
            // 取得uniformLocation
            var uniLocation = new Array();
            uniLocation[0] = gl.getUniformLocation(prg, 'mvpMatrix');
            uniLocation[1] = gl.getUniformLocation(prg, 'invMatrix');
            uniLocation[2] = gl.getUniformLocation(prg, 'lightDirection');
            uniLocation[3] = gl.getUniformLocation(prg, 'ambientColor');
            uniLocation[4] = gl.getUniformLocation(prg, 'lightS');
            // 向uniformLocation中传入坐标变换矩阵
            gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
            gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
            gl.uniform3fv(uniLocation[2], lightDirection);
            gl.uniform4fv(uniLocation[3], ambientColor);
            gl.uniform1f(uniLocation[4], lightS);

            //绘制坐标系
            drawCoordinates(0, 1, 0, 0);

            // 清理gl
            gl.flush();

            /**
             * 交互
             * */

            //判断是否鼠标左键按下
            var mouseLeftKeyDown = false;
            //判断是否鼠标右键按下
            var mouseRightKeyDown = false;
            //标记鼠标x坐标
            var mouseX;
            //标记鼠标y坐标
            var mouseY;
            //标记鼠标z坐标
            var mouseZ;
            //旋转球的半径
            var R = 250;

            $('#canvas').mousedown(function(e){

                var inCircle = false;

                if(e.which == 1){
                    mouseLeftKeyDown = true;
                    mouseRightKeyDown = false;

                    mouseX = e.clientX - 0.5*c.width;
                    mouseY = -(e.clientY - 0.5*c.height);
                    if(R*R - mouseX*mouseX - mouseY*mouseY > 0){
                        mouseZ = Math.sqrt(R*R - mouseX*mouseX - mouseY*mouseY);
                    } else {
                        mouseLeftKeyDown = false;
                    }

                    //转动前向量坐标
                    $('#cordX').val(mouseX);
                    $('#cordY').val(mouseY);
                    $('#cordZ').val(mouseZ);

                } else if(e.which == 3){
                    mouseRightKeyDown = true;
                    mouseLeftKeyDown = false;
                }
            });

            $('#canvas').mouseup(function(e){
                if(e.which == 1){
                    mouseLeftKeyDown = false;
                } else if(e.which == 3){
                    mouseRightKeyDown = false;
                }
            });

            $('#canvas').mouseout(function(e){
                mouseLeftKeyDown = false;
                mouseRightKeyDown = false;
            });

            $('#canvas').mousemove(function(e){
                if(mouseLeftKeyDown){//鼠标左键按下

                    var X_1 = e.clientX - 0.5*c.width;
                    var Y_1 = -(e.clientY - 0.5*c.height);
                    if(R*R - X_1*X_1 - Y_1*Y_1 > 0){
                        var Z_1 = Math.sqrt(R*R - X_1*X_1 - Y_1*Y_1);
                    } else {
                        mouseLeftKeyDown = false;
                    }

                    //转动前向量坐标
                    $('#cordX').val(mouseX);
                    $('#cordY').val(mouseY);
                    $('#cordZ').val(mouseZ);

                    //转动后向量坐标
                    $('#cordX1').val(X_1);
                    $('#cordY1').val(Y_1);
                    $('#cordZ1').val(Z_1);

                    //先算出转动轴向量
                    var axisX = -(Z_1*mouseY-mouseZ*Y_1);
                    var axisY = -(X_1*mouseZ-mouseX*Z_1);
                    var axisZ = +(Y_1*mouseX-mouseY*X_1);
                    //轴向量单位化
                    var mod_axis = Math.sqrt(axisX*axisX + axisY*axisY + axisZ*axisZ);
                    axisX = axisX/mod_axis;
                    axisY = axisY/mod_axis;
                    axisZ = axisZ/mod_axis;

                    var a1 = mMatrix[0]*axisX + mMatrix[1]*axisY + mMatrix[2]*axisZ + mMatrix[3]*0;
                    var a2 = mMatrix[4]*axisX + mMatrix[5]*axisY + mMatrix[6]*axisZ + mMatrix[7]*0;
                    var a3 = mMatrix[8]*axisX + mMatrix[9]*axisY + mMatrix[10]*axisZ + mMatrix[11]*0;
                    var a4 = mMatrix[12]*axisX + mMatrix[13]*axisY + mMatrix[14]*axisZ + mMatrix[15]*0;

                    axisX = a1;
                    axisY = a2;
                    axisZ = a3;
                    //轴向量单位化
                    mod_axis = Math.sqrt(axisX*axisX + axisY*axisY + axisZ*axisZ);
                    axisX = axisX/mod_axis;
                    axisY = axisY/mod_axis;
                    axisZ = axisZ/mod_axis;

                    //法向坐标
                    $('#axisX').val(axisX);
                    $('#axisY').val(axisY);
                    $('#axisZ').val(axisZ);

                    //计算转轴向量和转前向量的点积
                    $('#00').val(axisX*mouseX + axisY*mouseY + axisZ*mouseZ);
                    //计算转轴向量和转后向量的点积
                    $('#01').val(axisX*X_1 + axisY*Y_1 + axisZ*Z_1);

                    //再计算转动角弧度
                    //a=(x1,y1,z1),b=(x2,y2,z2) a*b=x1x2+y1y2+z1z2 |a|=√(x1^2+y1^2+z1^2).|b|=√(x2^2+y2^2+z2^2)
                    //cosθ=a*b/(|a|*|b|) 角θ=arccosθ
                    //Math.acos(x) 反余弦函数
                    var ab = X_1*mouseX + Y_1*mouseY + Z_1*mouseZ;
                    var mod_a = Math.sqrt(X_1*X_1 + Y_1*Y_1 + Z_1*Z_1);
                    var mod_b = Math.sqrt(mouseX*mouseX + mouseY*mouseY + mouseZ*mouseZ);
                    var cosθ = ab/(mod_a*mod_b);
                    var rad = Math.acos(cosθ);

                    //转角弧度
                    $('#rad').val(rad);

                    rotateModel(axisX, axisY, axisZ, rad);

                    mouseX = X_1;
                    mouseY = Y_1;
                    mouseZ = Z_1;

                }
            });

            $('#rotate').click(function(){
                var axisX = $('.axisX').val();
                var axisY = $('.axisY').val();
                var axisZ = $('.axisZ').val();
                var rad = $('.rad').val();
                rad = rad * Math.PI / 180;

                var a1 = mMatrix[0]*axisX + mMatrix[1]*axisY + mMatrix[2]*axisZ + mMatrix[3]*0;
                var a2 = mMatrix[4]*axisX + mMatrix[5]*axisY + mMatrix[6]*axisZ + mMatrix[7]*0;
                var a3 = mMatrix[8]*axisX + mMatrix[9]*axisY + mMatrix[10]*axisZ + mMatrix[11]*0;
                var a4 = mMatrix[12]*axisX + mMatrix[13]*axisY + mMatrix[14]*axisZ + mMatrix[15]*0;

                axisX = a1;
                axisY = a2;
                axisZ = a3;
                //轴向量单位化
                mod_axis = Math.sqrt(axisX*axisX + axisY*axisY + axisZ*axisZ);
                axisX = axisX/mod_axis;
                axisY = axisY/mod_axis;
                axisZ = axisZ/mod_axis;

                rotateModel(axisX, axisY, axisZ, rad);
            });

            /**
             * 模型旋转函数
             * x:旋转轴向量的x轴分量
             * y:旋转轴向量的y轴分量
             * z:旋转轴向量的z轴分量
             * rad:绕旋转轴旋转的弧度
             */
            function rotateModel(x, y, z, rad){
                initGL(gl);

                // 模型旋转6度
                //var rad = 1 * Math.PI / 180;
                // 模型坐标变换矩阵的生成(沿着Y轴旋转)
                //m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                //m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                //m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                //gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                //gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                // 使用索引进行绘图，画三角面
                //gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);

                drawCoordinates(x, y, z, rad);

                // context刷新
                gl.flush();
            }

            /**
             * 生成着色器的函数
             */
            function create_shader(id){
                // 用来保存着色器的变量
                var shader;

                // 根据id从HTML中获取指定的script标签
                var scriptElement = document.getElementById(id);

                // 如果指定的script标签不存在，则返回
                if(!scriptElement){return;}

                // 判断script标签的type属性
                switch(scriptElement.type){

                    // 顶点着色器的时候
                    case 'x-shader/x-vertex':
                        shader = gl.createShader(gl.VERTEX_SHADER);
                        break;

                    // 片段着色器的时候
                    case 'x-shader/x-fragment':
                        shader = gl.createShader(gl.FRAGMENT_SHADER);
                        break;
                    default :
                        return;
                }

                // 将标签中的代码分配给生成的着色器
                gl.shaderSource(shader, scriptElement.text);

                // 编译着色器
                gl.compileShader(shader);

                // 判断一下着色器是否编译成功
                if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){

                    // 编译成功，则返回着色器
                    return shader;
                }else{

                    // 编译失败，弹出错误消息
                    alert(gl.getShaderInfoLog(shader));
                }
            }

            /**
             * 程序对象的生成和着色器连接的函数
             */
            function create_program(vs, fs){
                // 程序对象的生成
                var program = gl.createProgram();

                // 向程序对象里分配着色器
                gl.attachShader(program, vs);
                gl.attachShader(program, fs);

                // 将着色器连接
                gl.linkProgram(program);

                // 判断着色器的连接是否成功
                if(gl.getProgramParameter(program, gl.LINK_STATUS)){

                    // 成功的话，将程序对象设置为有效
                    gl.useProgram(program);

                    // 返回程序对象
                    return program;
                }else{

                    // 如果失败，弹出错误信息
                    alert(gl.getProgramInfoLog(program));
                }
            }

            /**
             * 生成VBO的函数
             */
            function create_vbo(data){
                // 生成缓存对象
                var vbo = gl.createBuffer();

                // 绑定缓存
                gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

                // 向缓存中写入数据
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

                // 将绑定的缓存设为无效
                gl.bindBuffer(gl.ARRAY_BUFFER, null);

                // 返回生成的VBO
                return vbo;
            }

            /**
             * 绑定VBO相关的函数
             */
            function set_attribute(vbo, attL, attS){
                // 处理从参数中得到的数组
                for(var i in vbo){
                    // 绑定缓存
                    gl.bindBuffer(gl.ARRAY_BUFFER, vbo[i]);

                    // 将attributeLocation设置为有效
                    gl.enableVertexAttribArray(attL[i]);

                    //通知并添加attributeLocation
                    gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0);
                }
            }

            /**
             * IBO的生成函数
             */
            function create_ibo(data){
                // 生成缓存对象
                var ibo = gl.createBuffer();

                // 绑定缓存
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);

                // 向缓存中写入数据
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);

                // 将缓存的绑定无效化
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

                // 返回生成的IBO
                return ibo;
            }

            /**
             * 初始化gl
             * */
            function initGL(gl){
                // 设定canvas初始化的颜色
                gl.clearColor(0.0, 0.0, 0.0, 1.0);
                // 设定canvas初始化时候的深度
                gl.clearDepth(1.0);
                // canvas的初始化
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                // 将深度测试设置为有效
                gl.enable(gl.DEPTH_TEST);
                // 指定一般深度测试的评价方法
                gl.depthFunc(gl.LEQUAL);
                // 将遮挡剔除设置为有效
                gl.enable(gl.CULL_FACE);
            }

            /**
             * bindBuffer
             * */
            function bindBuffer(vertexArray, normalArray, colorArray, indices){
                /**
                 * 三角面
                 */
                    // 生成VBO
                var position_vbo = create_vbo(vertexArray);
                var normal_vbo = create_vbo(normalArray);
                var color_vbo = create_vbo(colorArray);
                // 将VBO进行绑定并添加
                set_attribute([position_vbo, normal_vbo, color_vbo], attLocation, attStride);
                // 生成IBO
                var ibo = create_ibo(indices);
                // IBO进行绑定并添加
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
            }

            /**
             * 画坐标系
             **/
            function drawCoordinates(x, y, z, rad){
                /**
                 * y轴
                 * */
                //空间变换
                mMatrix = m.identity(m.create());
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆柱模型
                var cylinder = new cylinderGeo(0.03, 0.5, 15);
                var cylinderPositionY = cylinder.vertices;
                var cylinderNormalY = cylinder.normals;
                var cylinderColor = [];
                for(var i=0; i<cylinderPositionY.length/3; i++){
                    cylinderColor.push(0.6, 1.0, 0.0, 1.0);
                }
                var cylinderIndexY = cylinder.faces;
                //写缓存绑定vertex-shader
                bindBuffer(cylinderPositionY, cylinderNormalY, cylinderColor, cylinderIndexY);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, cylinderIndexY.length, gl.UNSIGNED_SHORT, 0);

                //空间变换
                mMatrix = m.identity(m.create());
                m.translate(mMatrix, [0, 0.5, 0], mMatrix);
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆锥模型
                var cone = new coneGeo(0.05, 0.25, 15);
                var conePositionY = cone.vertices;
                var coneNormalY = cone.normals;
                var coneColorY = [];
                for(var i=0; i<conePositionY.length/3; i++){
                    coneColorY.push(0.6, 1.0, 0.0, 1.0);
                }
                var coneIndexY = cone.faces;
                bindBuffer(conePositionY, coneNormalY, coneColorY, coneIndexY);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, coneIndexY.length, gl.UNSIGNED_SHORT, 0);

                /**
                 * x轴
                 * */
                //空间变换
                mMatrix = m.identity(m.create());
                m.rotate(mMatrix, -90*Math.PI/180, [0, 0, 1], mMatrix);
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆柱模型
                var cylinderPositionX = cylinder.vertices;
                var cylinderNormalX = cylinder.normals;
                var cylinderColorX = [];
                for(var i=0; i<cylinderPositionX.length/3; i++){
                    cylinderColorX.push(0.6, 0.1, 0.0, 1.0);
                }
                var cylinderIndexX = cylinder.faces;
                //写缓存绑定vertex-shader
                bindBuffer(cylinderPositionX, cylinderNormalX, cylinderColorX, cylinderIndexX);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, cylinderIndexX.length, gl.UNSIGNED_SHORT, 0);

                //空间变换
                mMatrix = m.identity(m.create());
                m.translate(mMatrix, [0.5, 0, 0], mMatrix);
                m.rotate(mMatrix, -90*Math.PI/180, [0, 0, 1], mMatrix);
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆锥模型
                var conePositionX = cone.vertices;
                var coneNormalX = cone.normals;
                var coneColorX = [];
                for(var i=0; i<conePositionX.length/3; i++){
                    coneColorX.push(0.6, 0.1, 0.0, 1.0);
                }
                var coneIndexX = cone.faces;
                bindBuffer(conePositionX, coneNormalX, coneColorX, coneIndexX);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, coneIndexX.length, gl.UNSIGNED_SHORT, 0);

                /**
                 * z轴
                 * */
                //空间变换
                mMatrix = m.identity(m.create());
                m.rotate(mMatrix, 90*Math.PI/180, [1, 0, 0], mMatrix);
                //圆锥姿态
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆柱模型
                var cylinderPositionZ = cylinder.vertices;
                var cylinderNormalZ = cylinder.normals;
                var cylinderColorZ = [];
                for(var i=0; i<cylinderPositionZ.length/3; i++){
                    cylinderColorZ.push(0.0, 0.1, 0.6, 1.0);
                }
                var cylinderIndexZ = cylinder.faces;
                //写缓存绑定vertex-shader
                bindBuffer(cylinderPositionZ, cylinderNormalZ, cylinderColorZ, cylinderIndexZ);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, cylinderIndexZ.length, gl.UNSIGNED_SHORT, 0);

                //空间变换
                mMatrix = m.identity(m.create());
                m.translate(mMatrix, [0, 0, 0.5], mMatrix);
                m.rotate(mMatrix, 90*Math.PI/180, [1, 0, 0], mMatrix);
                m.rotate(mMatrix, rad, [x, y, z], mMatrix);
                // 得到mvpMatrix定位坐标矩阵
                m.multiply(tmpMatrix, mMatrix, mvpMatrix);
                // mMatrix的逆矩阵
                m.inverse(mMatrix, invMatrix);
                // 向uniformLocation中传入坐标变换矩阵
                gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
                gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
                //圆锥模型
                var conePositionZ = cone.vertices;
                var coneNormalZ = cone.normals;
                var coneColorZ = [];
                for(var i=0; i<conePositionZ.length/3; i++){
                    coneColorZ.push(0.0, 0.1, 0.6, 1.0);
                }
                var coneIndexZ = cone.faces;
                bindBuffer(conePositionZ, coneNormalZ, coneColorZ, coneIndexZ);
                // 使用索引进行绘图，画三角面
                gl.drawElements(gl.TRIANGLES, coneIndexZ.length, gl.UNSIGNED_SHORT, 0);
            }
        };

    </script>
    <script src="polyhedron.js"></script>

</head>
<body>
<canvas id="canvas"></canvas>
<br/>
转动前X坐标：<input id="cordX">转动前Y坐标：<input id="cordY">转动前Z坐标：<input id="cordZ">和转轴的点积：<input id="00">
<br/>
转动后X坐标：<input id="cordX1">转动后Y坐标：<input id="cordY1">转动后Z坐标：<input id="cordZ1">和转轴的点积：<input id="01">
<br/>
旋转轴X坐标分量：<input id="axisX">旋转轴Y坐标分量：<input id="axisY">旋转轴Z坐标分量：<input id="axisZ">
<br/>
旋转角度：<input id="rad">
<br/>
===============================================旋转操作参数===============================================
<br/>
旋转轴X坐标分量：<input class='axisX'>旋转轴Y坐标分量：<input class="axisY">旋转轴Z坐标分量：<input class="axisZ">
旋转角度：<input class="rad">
<button id="rotate">旋转</button>
</body>
</html>

以上是渲染场景的html代码，我们先来看一下最终结果，如下图

如图可以看到，我们成功将3个圆柱，3个圆锥绘制到场景中去了，那么这个实现的核心部分在哪里呢，我们来分析一下，其中绘图是采用索引缓存的方式写入的，而和顶点着色器attribute类型的变量进行传值的数组每次绘制一个几何体对象都会被覆写，然后重新写入索引缓存，然后重新gl.drawElements绘制。这就是向一个场景中绘入多个模型的核心思想，每次要写入一个几何体，就重新向顶点着色器的attribute变量传值，重新写入索引缓存，重新绘图，而每次绘图都不会将之前绘制完成的几何体从场景中擦除（这就是增量渲染）。

通过记录这个工程案例，对gl的缓存机制又有新的认识。引用本文请注明出处https://www.cnblogs.com/ccentry/p/9864847.html