2013-12-05 3 views
2

Я пытаюсь использовать THREE.PointerLockControls в моем проекте, как это было реализовано в этом example (code here). Я перевел код, казалось бы, точно так же, как он используется в примере, за исключением того, что по какой-то причине я не могу заставить мой контроллер замедляться, как только он начал двигаться. Кроме того, мой контроллер ускоряется намного медленнее, чем в примере. Ниже приведен фрагмент кода, который содержит логику моего контроллера. Я немного смахнул его с моего actual code.PointerLockControls не замедляется (threejs)

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 не работает.

Спасибо!

ответ

0

Я думаю, что проблема заключается в прохождении clock.getDelta() до controls.update(). Первое возвращает значение в секундах, в то время как последнее ожидает значение в миллисекундах. Разностные винты с внутренней работой THREE.PointerLockControls.

Попробуйте controls.update(clock.getDelta()*1000); и проверьте, не устраняет проблему.

Смежные вопросы