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

前言

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

一、 原理分析

有了上一篇文章的基础,我们已经知道了如何让场景和对象动起来。本文我们通过键盘和鼠标来控制对象的动作,这就有点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记录鼠标事件结束。

三、 总结

本文简单介绍了如何监听鼠标、键盘事件。下一篇文章介绍如何创建三维对象及贴图。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

2207
来自专栏韩东吉的Unity杂货铺

零基础入门 35:自定义窗口

Hello,各位小伙伴,最近公司的事务繁多,所以稍微搁置了一下更新的速度,导致很多同学都以为我被恐怖分子绑架了

1372
来自专栏happyJared

IDEA快捷键拆解系列(四):View篇

  以下是关于View导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

981
来自专栏cnblogs

Vuex原来可以这样上手

     在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使...

2055
来自专栏进击的君君的前端之路

HTML知识点整理

1694
来自专栏Kevin-ZhangCG

Intellij Idea 2018常用快捷键总结

快捷键列表 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码

4823
来自专栏IMWeb前端团队

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数...

2357
来自专栏腾讯IVWEB团队的专栏

React + Redux 组件化方案

在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。理想中的组件化,第一步应该就是组件的标签化, 例如有一个 Header 组件,无需关注...

6610
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

792
来自专栏深度学习自然语言处理

爬虫基础入门

为什么要学习爬虫 其实我们身边到处都是爬虫的产物,比如我们经常用的Google,百度,bing等,这些搜索引擎就是根据你的需求在网上爬去相关的网页;比如...

3718

扫码关注云+社区