标签：string mouse 鼠标事件 onkeydown 通过 drag 上下 UI key
想让一个物体动起来与现实情况一致，要么是调整自身姿态要么是调整自身位置。调整姿态是为旋转，调整位置是为移动，在PhiloGL中即为调整对象的position或者rotation。当然还有一种情况是你绕着一个物体转或者你冲着物体移动，这就牵涉到相对运动了，任何东西你只要深入思考一下就能上升到哲学问题。
在PhiloGL类中添加events模块，用于监听各种事件。总体如下：
PhiloGL(‘test1‘, {
program: {
...
},
events: {
...
},
onError: function (e) {
...
},
onLoad: function (app) {
...
}
});在events中完成对各事件的监听。
在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，监听到键盘后产生变化，其余的与上一篇文章中的一致。
在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记录鼠标事件结束。
标签：string mouse 鼠标事件 onkeydown 通过 drag 上下 UI key
原文地址：http://www.cnblogs.com/software12/p/7746409.html
