three.js raycaster с динамическим положением холста

Question

В настоящее время у меня есть сценарий three.js в среде бутстрапа twitter, поэтому элемент renderer.domelement может изменять размер и изменять его положение в зависимости от разрешения экрана, размера окна браузера и т. Д.

Теперь у меня есть проблемы с использованием tria.js raycaster для пересечения объектов в этой сцене. Когда страница загружается, и сцена показана на экране, raycaster отлично работает, но когда я просматриваю окно браузера и/или изменяю его размер так, чтобы сцена находилась в другом месте в окне браузера, пересечение объектов не работать больше.

Я понятия не имею, как исправить эту проблему ... есть ли у кого-то идея, как я могу это исправить?

Это как мой Raycaser aktually выглядит следующим образом:

var container = document.getElementById('view'); 

///Raycaster/// 

    var projector = new THREE.Projector(); 

    function onDocumentMouseDown(event) { 

     var mouseX = ((event.clientX - container.offsetLeft)/container.clientWidth) * 2 - 1; 
     var mouseY = - ((event.clientY - container.offsetTop)/container.clientHeight) * 2 + 1; 

     var vector = new THREE.Vector3(mouseX, mouseY, 0.5); 
     projector.unprojectVector(vector, camera); 

     var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

     var intersects = raycaster.intersectObjects(objects); 

     if (intersects.length > 0) { 

      // do something 

      var origin = raycaster.ray.origin.clone(); 
      console.log(origin); 

      } 
     } 

} 

Answer 1

Наиболее распространенным решением для решения проблем с повторной калибровки в окне браузера добавляет onWindowResize обработчик.

Так, например:

/** 
* Resize event handler adjust renderer size and resetting camera's aspect 
*/ 
function onWindowResize() 
{ 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

И добавить слушатель так:

window.addEventListener('resize', onWindowResize, false);