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记录鼠标事件结束。
三、 总结
本文简单介绍了如何监听鼠标、键盘事件。下一篇文章介绍如何创建三维对象及贴图。
PhiloGL学习(3)——程序员的法宝—键盘、鼠标的更多相关文章
- AJPFX:学习JAVA程序员两个必会的冒泡和选择排序
* 数组排序(冒泡排序)* * 冒泡排序: 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处* * 选择排序 : 从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现 ...
- 如何提高程序员的键盘使用效率?——ASE第一次作业
引言 对于程序员来说,键盘输入是我们工作的基本方式,当你的手指在键盘上飞起来的时候,不但能够提高工作效率,还常常引来旁人羡慕的目光.下面将从不同方面介绍一些提高键盘使用效率的方法. 程序员最主要的文字 ...
- 程序员谈学习:我为什么要学习Linux?
http://kb.cnblogs.com/page/196876/ 好长时间没好好写点东西了,前段时间由于项目的需要出差了一个多月,期间各种加班,每天晚上加班到十点,回到宾馆实现是没什么精力再写博客 ...
- 史上最全的web前端开发程序员学习清单!
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- DOS程序员手册(四)
5.4打印机功能 打印机是能够直接控制的输出设备之外的唯一的重要输出设备.它们的功能比屏幕 107页 功能要简单得多,因为它们只涉及字符输出,并最小程度地与打印机的输入有关. 输出给打印机的最简单的方 ...
- 程序员玩转A股
最近买了点股票....赔了25%......劝各位程序员还是买键盘,买电脑吧.不用理财.... 基本情况 毕业一年多点,手里有点闲钱,闲得慌,10月底开了账户买股票.两只半仓股,赔了15%+,全仓一支 ...
- 新时代的coder如何成为专业程序员
在移动互联网"泛滥"的今天,越来越多非专业(这里的非专业指的是非计算机专业毕业的程序员)程序员加入到了IT行业中来了,可能是因为移动互联网的火爆导致程序员容易就业而且工资很高,可能 ...
- [译]好程序员的五声“呐喊”
通常编程情况下,会导致软件项目变坏的一些列反应 原文:The five shouts of good programmers 在任何一天,在这个世界上都有软件项目正在失败,这很常见.常见到当软件产品按 ...
随机推荐
- PowerBI开发 第四篇:DAX表达式
DAX 表达式主要用于创建度量列(Measure),度量值是根据用户选择的Filter和公式,计算聚合值,DAX表达式基本上都是引用对应的函数,函数的执行有表级(Table-Level)上下文和行级( ...
- java System.currentTimeMillis()毫秒值和具体日期值互相转换
System.currentTimeMillis()与日期 间是可以相互转换的,通过 SimpleDateFormat dateformat = new SimpleDateFormat(" ...
- Android 跳转系统选择本地视频的功能
今天在项目开发的过程中产品要求添加选择本地视频的功能,于是就翻阅和查找各种资料,进行功能的开发,但是在开发过程中发现,各种不同的品牌的手机跳转至系统选择本地视频的功能结果不太一样,所以我就对一些主流的 ...
- python日记_01 python实现6个人围成一圈,扔到第三个人出局,循环扔的问题。
#!/usr/bin/python shoplist=['mango','apple','carrot','banana','oracle','python'] length = len(shopli ...
- shell脚本之算术运算和逻辑运算
目录 算术运算 赋值运算 逻辑运算 短路运算和异或 条件测试 数值测试 字符串测试 文件及其属性测试 存在性测试 存在性及类别测试 文件权限测试 文件特殊权限测试 文件大小测试 文件是否打开 双目测试 ...
- Servlet第二篇【Servlet调用图、Servlet细节、ServletConfig、ServletContext】
Servlet的调用图 前面我们已经学过了Servlet的生命周期了,我们根据Servlet的生命周期画出Servlet的调用图加深理解 Servlet的细节 一个已经注册的Servlet可以被多次映 ...
- Linux下识别分区文件系统类型
Linux下挂载文件系统有时候需要填写文件系统.但有的设备拿到手还不知道文件系统,这种情况,可以用 parted命令 # parted /dev/vda GNU Parted 3.2 Using /d ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- Corn Fields poj3254(状态压缩DP)
Corn Fields Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6081 Accepted: 3226 Descr ...
- 支持向量机(Support Vector Machine)-----SVM之SMO算法(转)
此文转自两篇博文 有修改 序列最小优化算法(英语:Sequential minimal optimization, SMO)是一种用于解决支持向量机训练过程中所产生优化问题的算法.SMO由微软研究院的 ...