在html5中输出三角形,9.3 在3D空间内旋转三角形平面 - HTML5 Canvas 实战

现在，我们可以在3D空间中绘制2D三角形了，让我们使用WebGL包装器对象的动画方法，试着让它绕y轴旋转起来。

图9-2 旋转三角形平面

操作步骤

按照以下步骤使用WebGL让三角形绕y轴旋转：

链接到glMatrix库和WebGL包装器：

2. 定义initBuffers()函数，该函数初始化三角形的位置缓冲区：

function initBuffers(gl){

var triangleBuffers  =  {};

triangleBuffers.positionBuffer  = gl.createArrayBuffer([

0,  1,  0,

-1, -1,  0,

1, -1,  0

]);

return triangleBuffers;

}

3. 定义stage()函数，该函数设置透视矩阵，把模型-视图矩阵设置到单位矩阵，平移三角形，绕y轴旋转三角形，把位置缓冲区发送到显卡，然后调用drawArrays()方法绘制该三角形:

function stage(gl, triangleBuffers, angle){

// 把视野设置为45°，把可见范围设置为0.1 到100.0单位

gl.perspective(45,  0.1,  100.0);

gl.identity();

//平移模型-视图矩阵

gl.translate(0,  0,  -5);

//绕y轴旋转模型-视图矩阵

gl.rotate(angle,  0,  1,  0);

gl.pushPositionBuffer(triangleBuffers);

gl.drawArrays(triangleBuffers);

}

4. 页面加载完成后，初始化WebGL包装器对象，设置着色器程序，初始化缓冲区，为动画设置stage函数，然后启动动画：

window.onload  = function(){

var gl  = new WebGL("myCanvas", "experimental-webgl");

gl.setShaderProgram("BLUE_COLOR");

var triangleBuffers  = initBuffers(gl);

var angle  =  0;

gl.setStage(function(){

// 更新角度

var angularVelocity  = Math.PI  /  2;  // radians  / second

var angleEachFrame  = angularVelocity  * gl.getTimeInterval()  /  1000;

angle  += angleEachFrame;

this.clear();

stage(gl, triangleBuffers, angle);

});

gl.start();

};

5. 在HTML文档的body部分嵌入canvas标签：

工作原理

要绕y轴旋转我们的三角形，我们首先需要设置WebGL包装器对象的stage()函数，来创建一个动画舞台(跟第5章使用Animation对象的做法类似)，再调用start()方法启动动画。对每个动画帧，我们可以通过调用rotate()方法来旋转模型-视图矩阵，来增加三角形相对y轴的夹角。

相关参考

第5章 创建动画类