Three.js: How to control camera movement with up,down,left,right keys on the keyboard

[webgldawn]

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.

[webgldawn]

I think FirstPersonControls.js maybe helpful , But I don't kown how to achieve it specifically.

[double051]

http://stackoverflow.com/questions/5597060/detecting-arrow-keys-in-javascript

Register for arrow key events as described in the Stack Overflow thread and move the camera's position accordingly.

[webgldawn]

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);
}

[double051]

Whenever you change the properties of a camera, be sure to call camera.updateProjectionMatrix();, otherwise the camera doesn't really change.

[webgldawn]

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;
}

[webgldawn]

My issue has resolved, I set the position property of camera in render() function, And my code runs well. Thank you so much for your patient help！

[motin]

Check out the examples that starts with "misc_camera_" for different type of keyboard/mouse-based camera controls.