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

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

Answer 2

我发现问题出在Windows“放大”或“缩放”用户可以在其主题设置中设置。

在渲染器中，您可以找到更改缩放时修改的pixel像素。以下解决方案适用于我：

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;;

ThreeJS：某些计算机上没有Raycasts

2 个答案: