Question

我遇到了与大型分辨率监视器上的三个对象进行鼠标交互/检测的问题。我能够在threejs示例网站上关注示例，并且在大多数分辨率（1920x1080）上一切正常。

我用来检测某个部分的代码：

mouse.x = ( ( event.offsetX ) / CANVAS_WIDTH ) * 2 - 1;
mouse.y = - ( ( event.offsetY) / CANVAS_HEIGHT ) * 2 + 1;

var vector = new THREE.Vector3( mouse.x, mouse.y, 1);
projector.unprojectVector( vector, camera );

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

intersects = raycaster.intersectObjects( objects );

if ( intersects.length > 0 ) {

    //Do something cool

}

除了使用 offsetX，offsetX 而不是 clientX，clientY 。我认为这不重要（仅使用Chrome）。

当画布的宽度增加到 4000px 时，我开始收到不好的结果。

我的程序需要以 width = 4952px 运行，并且在尝试选择场景中的对象时，在该分辨率下它不再检测到交叉点。虽然，选择对象左侧的位置会导致交叉。如果对象在画布上的右侧更远，则此偏移量会显着增加 - 左侧更少 - 它不是常量偏移。

我很快嘲笑了simple example我的代码，画布的宽度设置为 500px 。当您选择立方体时，您会注意到交叉点增加。检测非常准确，效果很好。

虽然当我将example中的画布宽度增加到 4952px 时（并拉伸屏幕或移除溢出：隐藏） - 立方体会更进一步在右边），你会注意到命中数不会增加。尝试选择立方体左侧的区域，最后会收到一个交叉点。

在将窗口大小调整为大分辨率时，您开始在three.js示例中看到其中一些问题。

有什么想法？ - 我正在考虑将我的代码转换为多个画布，但我担心这会带来性能损失。

任何想法都非常感激？

Threejs - 鼠标与大分辨率的交互

0 个答案: