ThreeJS: Raycasts отключен на некоторых компьютерах

Question

Я занимаюсь проектом ThreeJS и использую raycasting для взаимодействия с объектами внутри холста. У меня есть 4 компьютера, чтобы проверить его, все обновлено с последним репо.

На одном из компьютеров raycasting выключен от того, где мышь ... и я понятия не имею, что заставляет его вести себя иначе, чем другие.

Любые идеи?

Код:

// Performs a Raycast for Ortho camera type 
PerformOrthographicRaycast: function (event, canvas, renderer, camera, objects) { 
    var vector = new THREE.Vector3(0, 0, 0); 
    var dir = new THREE.Vector3(0, 0, 0); 
    vector.x = ((event.clientX - canvas.getBoundingClientRect().left)/renderer.domElement.width) * 2 - 1; 
    vector.y = -((event.clientY - canvas.getBoundingClientRect().top)/renderer.domElement.height) * 2 + 1;; 
    vector.z = -1; // z = - 1 important! 

    vector.unproject(camera); 

    dir.set(0, 0, -1).transformDirection(camera.matrixWorld); 

    this._Raycaster.set(vector, dir); 
    var intersects = this._Raycaster.intersectObjects(objects, true); 

    if (intersects.length) { 
     return intersects; 
    } 
    else 
     return null; 
}, 

Answer 1

Я выяснил, что проблема заключалась в том, что пользователи Windows «увеличивают» или «масштаб» могут устанавливать в своих настройках темы.

В рендерере вы можете найти пиксель, который изменяется при изменении масштабирования. Для меня работает следующее решение:

vector.x = renderer.devicePixelRatio * ((event.clientX - canvas.getBoundingClientRect().left)/renderer.domElement.width) * 2 - 1; 
vector.y = renderer.devicePixelRatio * -((event.clientY - canvas.getBoundingClientRect().top)/renderer.domElement.height) * 2 + 1;; 

Answer 2

Смотрите эту example. Посмотрите сообщения в консоли.

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

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

EventsControls.mouseOver = function() { 
    this.container.style.cursor = 'pointer'; 

    this.mouseOvered.currentHex = this.mouseOvered.material.emissive.getHex(); 
    this.mouseOvered.material.emissive.setHex(0xff0000); 

    console.log('the key at number ' + this.mouseOveredItem + ' is select');       
} 

// 

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

EventsControls.attach(mesh); 

// 

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