Проблема выбора объекта Threejs

Question

Im в настоящее время работает над небольшим веб-приложением, которое использует три js. Я столкнулся с следующим вопросом:

Я создаю прототип, который содержит мой контент threejs, и здесь все хорошо работает (холст находится в прототипе window.innerWidth и window.innerHeight => имеет такой же размер, как и окно моего браузера Выбор работы хорошо, но я хочу использовать холст в своем приложении для веб-страниц, а также собирать 3d-поверхности. Нужно также работать с ним.

Я обнаружил, как только я изменяю границу или верхнюю часть с помощью CSS холста, Работает больше. Веб-приложение основано на странице прокрутки, а холст threejs находится внутри контейнера div, который можно увидеть только при прокрутке страницы.

Для выбора я использую следующая логика/код -> это один хорошо работает в «полноэкранном режиме прототипа», но не на странице веб-приложении

self.renderer.domElement.addEventListener('click', function(event){ 

    event.preventDefault(); 
    //CONVERT MOUSE POSITION TO CORRECT VECTOR 
    var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
    //TRANSLATES A 2D POINT FROM Normalized Device Coordinates TO RAYCASTER THAT CAN BE USED FOR PICKING 
    self.projector.unprojectVector(vector, self.camera); 
    //RAYCASTER IS NEEDED TO DETECT INTERACTION WITH CUBE SURFACE 
    var raycaster = new THREE.Raycaster(self.camera.position, vector.sub(self.camera.position).normalize()); 
    var intersects = raycaster.intersectObjects(self.scene.children); 
    //CHANGE COLOR BASED ON INTERSECTION WITH ELEMENT 
    if (intersects.length > 0) { 
     //SELECTED OBJECT 
    } 
}, false); 

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

Любая помощь будет оценена Спасибо лучшие reards

Answer 1

200% способ

var x = event.offsetX == undefined ? event.layerX : event.offsetX; 
var y = event.offsetY == undefined ? event.layerY : event.offsetY; 

var vector = new THREE.Vector3(); 
vector.set((x/renderer.domElement.width) * 2 - 1, - (y/renderer.domElement.height) * 2 + 1, 0.5); 

projector.unprojectVector(vector, camera); 

Или посмотреть example. Посмотрите сообщения в консоли.

<script src="js/controls/EventsControls.js"></script> 

EventsControls = new EventsControls(camera, renderer.domElement); 
EventsControls.draggable = false; 

EventsControls.onclick = function() { 

     console.log(this.focused.name); 

} 

var mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

EventsControls.attach(mesh); 

// 

function render() { 
     EventsControls.update(); 
     controls.update(); 
     renderer.render(scene, camera); 
} 

Answer 2

Если вы хотите использовать его в вашем веб-страницы, вы, вероятно, нужно вычислить вектор с шириной и высотой от вашего холста элемента вместо окна, который все ваше окно браузера.