I ran into the problem of mouse interaction / detection with objects in threej on monitors with high resolutions. I was able to follow the examples on the example site with three examples, and everything works well at most resolutions (1920x1080).
The code I use to detect 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 ) {
Except for using offsetX, offsetX instead of clientX, clientY . I believe this does not matter (only using Chrome).
When increasing the width of the canvas more than 4000px I get bad results.
My program should work with width = 4952px , and with this resolution, when I try to select an object inside the scene, it no longer detects an intersection. Although choosing a position to the left of the object will lead to an intersection. This displacement increases significantly if the object is further to the right of the canvas - less so to the left - this is not a constant displacement.
I quickly ridiculed a simple example of my code with a canvas width set to 500px . You will notice that when you select a cube, the intersection increases. Detection is very accurate and works well.
If you increase the width of the canvas in my example to 4952px (and stretch the screen or remove overflow: hidden - cube further to the right), you will notice that the number of hits does not increase. Try to select the area to the left of the cube and you will finally get the intersection.
You begin to observe some of these problems in the three.js examples, as well as when resizing the window to higher resolutions.
Any thoughts? - I am going to convert my code into several canvases, but I am afraid that a performance loss will come.
Any thoughts really appreciated?