ThreeJS : Raycasts가 일부 컴퓨터에서 꺼져 있습니다.

Question

저는 ThreeJS 프로젝트를하고 있었고 레이캐스팅을 사용하여 캔버스에있는 오브젝트와 상호 작용했습니다. 테스트 할 컴퓨터가 4 대 있으며 모두 최신 버전으로 업데이트되었습니다.

컴퓨터 중 하나에서 레이캐스팅은 마우스가있는 위치에서 벗어났습니다. 그리고 무엇이 다른 것과 다른 방식으로 동작하는지 알 수 없습니다.

아이디어가 있으십니까?

코드 :

// 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); 
}