9.3 在3D空间内旋转三角形平面
优质
小牛编辑
130浏览
2023-12-01
现在,我们可以在3D空间中绘制2D三角形了,让我们使用WebGL包装器对象的动画方法,试着让它绕y轴旋转起来。
操作步骤
按照以下步骤使用WebGL让三角形绕y轴旋转:
- 链接到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章 创建动画类