How to customize pointer controls in three.js?

Question

Based on a pointer lock control
http://pages.cs.wisc.edu/~lizy/mrdoob-three.js-ef5f05d/examples/misc_controls_pointerlock.html

How can this example be changed so that we can go up and down using the keys, and also zoom in and out using the wheel or the mouse keys?

Any other tips on customizing pointer controls are welcome.

Answer 1

Use the switches to determine which key is pressed. Add the appropriate eventListeners.

Keydown

var onKeyDown = function ( event ) {
    switch ( event.keyCode ) {
        case 38: // up
        case 87: // w
            moveForward = true;
            break;

        ...
    }
};

document.addEventListener( 'keydown', onKeyDown, false );

Keyup

var onKeyUp = function ( event ) {
    switch( event.keyCode ) {
        case 38: // up
        case 87: // w
            moveForward = false;
            break;

        ...
    }
};

document.addEventListener( 'keyup', onKeyUp, false );

Mousewheel

var onMouseWheel = function ( event ) {
    ...
};

this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox