如何在three.js中自定义指针锁定控件？

【问题标题】：How to customize pointer lock controls in three.js?如何在three.js中自定义指针锁定控件？
【发布时间】：2013-11-17 02:06:00
【问题描述】：

基于指针锁定控件的例子
http://pages.cs.wisc.edu/~lizy/mrdoob-three.js-ef5f05d/examples/misc_controls_pointerlock.html

如何修改此示例，以便我们可以使用键上下移动并使用鼠标滚轮或键进行放大和缩小？

也欢迎任何其他关于自定义指针锁定控件的提示。

【问题讨论】：

标签： three.js

【解决方案1】：

使用开关来识别正在按下的键。添加对应的事件监听器。

按键

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

        ...
    }
};

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

按键

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

        ...
    }
};

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

鼠标滚轮

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

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

【讨论】：