WebGL自学教程——WebGL示例：5. 用键盘控制三角形的旋转

 

5. 用键盘控制三角形的旋转

　

    本章学习一个简单交互：用键盘的左右键控制三角形向左或向右旋转。

    WebGL本身并没有输入相关的API，我们需要借助于浏览器的力量。

    我使用HTML文档对象的onkeydown和onkeyup事件。在事件处理函数中，我首先判断被按下或弹起的键是否是左或右，如果是，就设置相应键的状态为按下或弹起。我把左或右这两个按键的状态分开保存，而不是用一个统一的标记值标记它们。这允许我们处理左右键被同时按下的情况（虽然目前看起来有点没有必要，但以后会用得到）。

    注意，我使用的事件处理函数用document.onkeydown = function(e)这种格式定义。如果你用的不是FF浏览器，该函数可能不会正确执行，请自行修改。

    在某个按键被按下的情况下，三角形就不停地向左或向右旋转，直到该按键被松开。

    我仍然用一个js变量来记录当前三角形要旋转的角度；左转角度加10，右转角度减10。

    整合的源码如下：