Issue selecting mesh (by raytrace) seems to give offset

Questions
1

Dear team,
Currently, experience an issue due to implementing the selection via raytracing of objects (gltf mesh geometry). With some examples online I managed to get a simplified version working:

image
image770Ă—499 125 KB

  1. the toggle turns of orbit motion when mouse pressed for making selections,
  2. the functions assign different color properties
  3. the selection ribbon is visible (mouse drag when clicked)

source file: https://github.com/dinovandeijzen/working_selection_example

this is exactly what is needed. However implementing this on the gltf mesh objects I get one issue.
There is an offset whem i click the mouse in respect where the actual objects are. i cant get the selection ribbon visible as well. I keep the Frustrum visible and seems ok. Only some offset with scale or location of depth is different.

I would be really helped with some pinpointers or ideas what might cause this issue , and what i should explore to resolve.

image
image860Ă—324 50.3 KB

source file: https://github.com/dinovandeijzen/select_meshobject_issue

some explanation on the code:

*) i store the relevant geometry objects in “d_Objects”
*) raytrace part is in the slect.js file as usual.
*) Main.js is the file that sets up Frustrum part.
*) the selection ribbon is created with “ocamera” (turned off currently in animation frame, but that doesn’t resolve the issue when enabled to make ribbon visible)

2

Such interaction offsets are mostly produced by wrong mouse coordinate computations. Do you mind give this code a try:

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect. right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

The idea is to incorporate getBoundingClientRect() into the computation.

2 Likes
3

Thank you Mugen for sharing thoughts on this issue, The suggestion does not work yet but will try some options based on your good suggestion, it gives a direction where to resolve it.