I am new to three.js , Now I have defined a PerspectiveCamera , and I want the camera to move when pressing the up key, the down key, the left key or the right key, But I don’t know how to achieve it.
3 thoughts on “How to control camera movement with up,down,left,right keys on the keyboard”
Comments are closed.
I have added keydown event listener function, But the camera is not moving when press left,right,up,down arrow.I don’t konw why. This is my relevant code :
document.addEventListener(‘keydown’,onDocumentKeyDown,false);
function onDocumentKeyDown(event){
var delta = 200;
event = event || window.event;
var keycode = event.keyCode;
switch(keycode){
case 37 : //left arrow 向左箭头
camera.position.x = camera.position.x – delta;
break;
case 38 : // up arrow 向上箭头
camera.position.z = camera.position.z – delta;
break;
case 39 : // right arrow 向右箭头
camera.position.x = camera.position.x + delta;
break;
case 40 : //down arrow向下箭头
camera.position.z = camera.position.z + delta;
break;
}
document.addEventListener(‘keyup’,onDocumentKeyUp,false);
}
function onDocumentKeyUp(event){
document.removeEventListener(‘keydown’,onDocumentKeyDown,false);
}
I have changed switch statement,But it doesn’t work. the changed switch statement is like this :
switch(keycode){
case 37 : //left arrow 向左箭头
camera.position.x = camera.position.x – delta;
camera.updateProjectionMatrix();
break;
case 38 : // up arrow 向上箭头
camera.position.z = camera.position.z – delta;
camera.updateProjectionMatrix();
break;
case 39 : // right arrow 向右箭头
camera.position.x = camera.position.x + delta;
camera.updateProjectionMatrix();
break;
case 40 : //down arrow向下箭头
camera.position.z = camera.position.z + delta;
camera.updateProjectionMatrix();
break;
}
Check out the examples that starts with “misc_camera_” for different type of keyboard/mouse-based camera controls.