Threejs - Mouse interaction with large resolutions

问题

I am running into an issue with mouse interaction/detection with objects in threejs on large resolutions monitors. I was able to follow the examples on threejs example site and everything works well on most resolutions (1920x1080).

The code I am using to detect an interesection:

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

}

With exception to using offsetX,offsetX instead of clientX,clientY. Which I believe should not matter (using Chrome only).

When increasing the width of the canvas greater then 4000px, I start receiving poor results.

My program needs to run with width = 4952px and at that resolution when attempting to select an object within the scene it no longer detects an intersection. Although, selecting a position to the left of the object will cause an intersection. This offset is increased significantly if the object is further to the right on the canvas - less so to the left - its not a constant offset.

I quickly mocked up a simple example of my code with the width of the canvas set at 500px. You will notice as you select the cube the intersection increases. The detection is very accurate and works well.

Although when you increase the width of the canvas in my example to 4952px (and stretch your screen or remove overflow:hidden - the cube is further to the right), you will notice the hit count doesn't increase. Try selecting an area to the left of the cube and you will finally receive an intersection.

You start to witness some of these issues on three.js examples as well when resizing the window to large resolutions.

Any thoughts? - I'm thinking of converting my code to multiple canvases but I am fearful that will come with a performance hit.

Any thoughts greatly appreciated?

来源：https://stackoverflow.com/questions/21919580/threejs-mouse-interaction-with-large-resolutions