Question

我正在尝试在我的项目中使用THREE.PointerLockControls，因为它已在此example（code here）中实现。我已经将代码翻译成了与示例中使用的完全相同的代码，除了某些原因我一旦开始移动就无法使控制器减速。此外，我的控制器加速比示例慢得多。下面是代码片段，其中包含我的控制器的逻辑。我从我的actual code缩小了一点。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 35);
var controls = new THREE.PointerLockControls(camera);
scene.add( controls.getObject() );

var ray = new THREE.Raycaster();
var renderer = new THREE.WebGLRenderer();
var clock = new THREE.Clock();
var objects = [];
var block3Dsize = 5;

var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );

// http://www.html5rocks.com/en/tutorials/pointerlock/intro/

var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;

if ( havePointerLock ) {

    var element = document.body;

    var pointerlockchange = function ( event ) {

        if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
            controls.enabled = true;
            blocker.style.display = 'none';
        } else {
            controls.enabled = false;
            blocker.style.display = '-webkit-box';
            blocker.style.display = '-moz-box';
            blocker.style.display = 'box';
            instructions.style.display = '';
        }
    }

    var pointerlockerror = function ( event ) {

        instructions.style.display = '';
    }

    // Hook pointer lock state change events
    document.addEventListener( 'pointerlockchange', pointerlockchange, false );
    document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
    document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );

    document.addEventListener( 'pointerlockerror', pointerlockerror, false );
    document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
    document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );

    instructions.addEventListener( 'click', function ( event ) {

        instructions.style.display = 'none';

        // Ask the browser to lock the pointer
        element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;

        if ( /Firefox/i.test( navigator.userAgent ) ) {

            var fullscreenchange = function ( event ) {
                if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {

                    document.removeEventListener( 'fullscreenchange', fullscreenchange );
                    document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
                    element.requestPointerLock();
                }
            }

            document.addEventListener( 'fullscreenchange', fullscreenchange, false );
            document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );

            element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;

            element.requestFullscreen();

        } else {

            element.requestPointerLock();
        }

    }, false );

} else {

    instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
}

init();
animate();          

function init(){

    var hemisphereLight = new THREE.HemisphereLight(0xffffff);
    hemisphereLight.position.set(1, 1, 1).normalize();
    scene.add(hemisphereLight);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    ray.ray.direction.set( 0, -1, 0 );
}

function animate() {

    requestAnimationFrame( animate );

    controls.isOnObject( false );
    ray.ray.origin.copy( controls.getObject().position );
    ray.ray.origin.y -= 10;

    var intersections = ray.intersectObjects( objects );

    if ( intersections.length > 0 ) {

        var distance = intersections[ 0 ].distance;

        if ( distance > 0 && distance < 10 ) {

            controls.isOnObject( true );
        }
    }

    controls.update( clock.getDelta() );
    renderer.render( scene, camera );

}

另外，有没有办法设置控制器/摄像头组合的位置？使用controller.getObject().position.x = 10不起作用。

谢谢！

Answer 1

我认为问题在于将clock.getDelta()传递给controls.update()。前者以秒为单位返回值，而后者需要以毫秒为单位的值。差异螺钉与THREE.PointerLockControls的内部工作方式。

尝试controls.update( clock.getDelta()*1000 );，看看是否能解决问题。

PointerLockControls没有减速（threejs）

1 个答案: