HTML5 Canvas实战
9.3 在3D空间内旋转三角形平面
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建图表

通过游戏开发来拯救世界

WebGL简介

创建一个WebGL包装器来简化WebGLAPI

创建三角形平面

在3D空间内旋转三角形平面

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

旋转三角形平面
图9-2 旋转三角形平面

操作步骤

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

  1. 链接到glMatrix库和WebGL包装器:
<script type="text/javascript" src="glMatrix-1.0.1.min.js"> </script>
<script type="text/javascript" src="WebGL.js"> </script>

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标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

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

相关参考

第5章 创建动画类

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验