1.问题描述:three.js中第一人称操作器,在一些的电脑上面运行,可以单独响应键盘事件和鼠标事件,但是在响应键盘事件后,需要等待三十秒左右才能响应鼠标事件;如果在响应鼠标事件的情况下,可以响应键盘事件。
2.代码:
FirstPerson.prototype.bindEventListern = function(){
this.domElement.addEventListener('mousedown', this._mousedown, false);
this.domElement.addEventListener('mousemove', this._mousemove, false);
this.domElement.addEventListener('mouseup', this._mouseup, false);
window.addEventListener('keydown',this._keydown, false);
window.addEventListener('keyup', this._keyup , false);
};
FirstPerson.prototype.onMouseDown = function(event){
event.preventDefault();
event.stopPropagation();
this.isMoved = false;
if(event.button === 0) {
this.mouseX = event.pageX;
this.mouseY = event.pageY;
this.isRotateState = true;
}
};
FirstPerson.prototype.onMouseMove = function(event){
event.preventDefault();
event.stopPropagation();
if(event.movementX !== 0 || event.movementY !== 0) {
this.isMoved = true;
}else{
this.yawAngle = 0;
this.pitchAngle = 0;
}
if(this.isRotateState === true){
document.body.style.cursor = 'move';
this.yawAngle = event.pageX - this.mouseX;
this.pitchAngle = event.pageY - this.mouseY;
this.mouseX = event.pageX;
this.mouseY = event.pageY;
}
};
FirstPerson.prototype.onMouseUp = function(event){
event.preventDefault();
event.stopPropagation();
if(event.button === 0) {
this.isRotateState = false;
}
document.body.style.cursor = 'default';
};
FirstPerson.prototype.onKeyDown = function(event){
switch ( event.keyCode ) {
case 38: /*up*/
case 87: /*W*/
this.moveForward = true;
break;
case 37: /*left*/
case 65: /*A*/
this.moveLeft = true;
break;
case 40: /*down*/
case 83: /*S*/
this.moveBackward = true;
break;
case 39: /*right*/
case 68: /*D*/
this.moveRight = true;
break;
}
};
FirstPerson.prototype.onKeyUp = function(event){
switch ( event.keyCode ) {
case 38: /*up*/
case 87: /*W*/
this.moveForward = false;
break;
case 37: /*left*/
case 65: /*A*/
this.moveLeft = false;
break;
case 40: /*down*/
case 83: /*S*/
this.moveBackward = false;
break;
case 39: /*right*/
case 68: /*D*/
this.moveRight = false;
break;
}
};
3.已尝试将事件放到同一个标签下,问题仍然存在,