我试图在我的项目中使用THREE.PointerLockControls,因为它已在此examplecode 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不起作用。

谢谢!

最佳答案

我认为问题在于将clock.getDelta()传递给controls.update()。前者返回以秒为单位的值,而后者则期望以毫秒为单位的值。差异螺钉具有THREE.PointerLockControls的内部功能。

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

关于javascript - PointerLockControls不会减速(threejs),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20389806/

10-12 12:28