PhiloGL学习（3）——程序员的法宝—键盘、鼠标

魏守峰

发布于 2018-04-28 16:06:24

6170

发布于 2018-04-28 16:06:24

文章被收录于专栏：点滴积累点滴积累

前言

上一篇文章中介绍了如何让对象动起来，本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动等。

一、原理分析

有了上一篇文章的基础，我们已经知道了如何让场景和对象动起来。本文我们通过键盘和鼠标来控制对象的动作，这就有点Game的意思了。对程序员来说，这其实是个很easy的事情，无非就是响应各种事件。下面就让我们来看一下PhiloGL如何完成此响应。

二、事件响应

在PhiloGL类中添加events模块，用于监听各种事件。总体如下：

PhiloGL('test1', {
    program: {
        ...
    },
    events: {
        ...
    },
    onError: function (e) {
        ...
    },
    onLoad: function (app) {
        ...
    }
});

在events中完成对各事件的监听。

2.1 键盘事件

在events中添加onKeyDown事件，响应键盘完成上下左右监听。

onKeyDown: function (e) {
  switch (e.key){
      case 'right':
          yRotSpeed += 0.01;
          break;
      case 'left':
          yRotSpeed -= 0.01;
          break;
      case 'up':
          xRotSpeed += 0.01;
          break;
      case 'down':
          xRotSpeed -= 0.01;
          break;
      default:
          var camera = this.camera;
          if (e.code == 33) {
              camera.position.z -= 1;
          } else if (e.code == 34) {
              camera.position.z += 1;
          }
          camera.update();
  }
}

此段代码监听了上下左右和pgUp、PgDn6个按键，当然可以监听任意按键。

e.key表示按键，e.code表示按键码，两种均可识别按键。xRotSpeed与yRotSpeed初始值为0，监听到键盘后产生变化，其余的与上一篇文章中的一致。

2.2 鼠标事件

在events中添加onMouseWheel、onDragStart、onDragMove、onDragEnd事件分别监听鼠标的滚动、按键、拖动和结束。

onMouseWheel: function (e) {
    e.stop();
    var camera = this.camera;
    camera.position.z += e.wheel;
    camera.update();
},
onDragStart: function (e) {
    isDragging = true;
    pos = {
        x: e.x,
        y: e.y
    }
},
onDragMove: function (e) {
    var z = this.camera.position.z,
        sign = Math.abs(z) / z;

    xRotation += sign * (pos.y - e.y) / 100;
    yRotation += -(pos.x - e.x) / 100;
    square.rotation.set(xRotation, yRotation, 0);
    square.update();
    pos.x = e.x;
    pos.y = e.y;
},
onDragEnd: function () {
    isDragging = false;
}

在onMouseWheel事件中通过改变camera的z值来改变物体的可视大小。任何运动和大小都是相对的，不论改变摄像头还是改变物体的z都是改变二者的距离，但是如果只改变物体的z那么只能改变单一物体的大小，而改变camera的z则改变了整个场景的大小。

onDragStart记录鼠标按下时的位置；onDragMove则记录了鼠标位置的改变量，通过改变量计算物体的旋转量，此处需要注意this.camera.position.z的值，防止出现0的情况；onDragEnd记录鼠标事件结束。