绘制一个彩色的正三棱锥

绘制一个彩色的三棱锥，我们需要知道这个四面体的基本信息，即需要定义：三棱锥的总顶点数、所有顶点的位置和颜色信息，然后定义一个绘制彩色三棱锥的入口函数：colorTetrahedron()，在这个函数中定义了四个顶点和对应的顶点信息，然后调用 triangle() 函数四次来绘制四个三角形。triangle() 函数以三个顶点和一个颜色作为参数，将这些信息存储到数组points和colors中。

在定义三棱锥平移、旋转、缩放的操作前，需要定义旋转角度、平移距离、缩放比例，再构建旋转矩阵，在js中回去这些数据，添加三个按钮的点击事件，三个按钮的作用是，分别点击使三棱锥，沿Y轴平移、缩小和沿Z轴针顺时旋转。

1. 彩色的三棱锥

定义变换参数

var theta = [0, 0, 0];

var scale = 1.0;

var translation = vec3(0.0, 0.0, 0.0);

var thetaLoc;

var scaleLoc;

var translationLoc;

定义三棱锥的顶点位置和颜色

function colorTetrahedron() {

    var vertices = [

        vec3(0.0, 0.0, -1.0),

        vec3(0.0, 0.942809, 0.333333),

        vec3(-0.816497, -0.471405, 0.333333),

        vec3(0.816497, -0.471405, 0.333333)

    ];

    var vertexColors = [

        [1.0, 0.0, 0.0, 1.0],  // red

        [0.0, 1.0, 0.0, 1.0],  // green

        [0.0, 0.0, 1.0, 1.0],  // blue

        [1.0, 1.0, 0.0, 1.0]   // yellow

    ];

调用四次函数绘制四个三角形

    triangle(vertices[0], vertices[1], vertices[2], vertexColors[0]);

    triangle(vertices[0], vertices[2], vertices[3], vertexColors[1]);

    triangle(vertices[0], vertices[3], vertices[1], vertexColors[2]);

    triangle(vertices[1], vertices[2], vertices[3], vertexColors[3]);

}

绘制三角形以三个顶点和颜色为参数

function triangle(a, b, c, color) {

    var indices = [a, b, c];

将参数储存到数组中

    for (var i = 0; i < indices.length; ++i) {

        points.push(indices[i]);

        colors.push(color);

    }

}

渲染函数

function render() {

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

设置缩放比例、旋转角度、平移距离

    gl.uniform1f(scaleLoc, scale);

    gl.uniform3fv(thetaLoc, theta);

    gl.uniform3fv(translationLoc, translation);

调用函数绘制图形

    gl.drawArrays(gl.TRIANGLES, 0, NumVertices);

 requestAnimFrame(render);

}

将顶点位置传入着色器中，并获取uniform变量的位置

var vPosition = gl.getAttribLocation(program, "vPosition");

    gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(vPosition);

    thetaLoc = gl.getUniformLocation(program, "theta");

    scaleLoc = gl.getUniformLocation(program, "scale");

    translationLoc = gl.getUniformLocation(program, "translation");

平移的点击事件，每次将修改后的平移距离传入着色器程序中

    document.getElementById("moveButton").onclick = function () {

        translation[yAxis] += 0.05;

        gl.uniform3fv(translationLoc, translation);

    };

缩放和旋转的点击事件

    document.getElementById("scaleButton").onclick = function () {

        scale *= 0.9;

        gl.uniform1f(scaleLoc, scale);

    };

    

    document.getElementById("rotateButton").onclick = function () {

        theta[zAxis] += 10.0;

        gl.uniform3fv(thetaLoc, theta);

    };