When two objects have a common border and, then one is selected, the wrong one is highlighted. I have to draw the quadrilaterals with line segments because diagonals are not allowed (curious can wireframe quads be drawn using triangles and not have the diagonal appear?). I notice the problem when I click on the interior of the objects and also on the common border.
The user can change their view of the scene and rotate it. I have provided an example. Please note that the red line drawn simply shows the ray that is cast. I appreciate any sagely advise provided.
I appreciate the response and I did a cursory review of the information that you provided. The thing is that my input contains a set of x,y, and z coordinates from which I have to generate a geometric shape. In some cases, the geometric shapes are adjacent to each other in some instances the geometric shapes overlap precisely at the edges as in the example that I provided.
One observation that I made is that when I click on the interior of the quadrilaterals, the ray that cast is always at one of the edges and not at the location that was clicked on. Why is this?
My central problem is that sometimes that quadrilateral chosen is not the one highlighted.
I tried upgrading to the latest version of threejs; however, that did not resolve the issue. I looked at the source code of your examples, but I didn’t see any difference in the usage of raycaster.
I thought that when the statement: “raycaster.setFromCamera( mouse, camera );” was executed that the camera and mouse position is used to determine the picking ray. When I look at the intersects array point array the coordinate position(s) don’t seem to match the mouse position (try clicking in the interior of one of the quadrilaterals in my example.)
See if the actual mouse location was being used then I could calculate the distance between the center of the overlapping objects and the mouse click to determine which object to highlight.
One thing I didn’t try is something that has a multi-material. I’m not entirely sure what that is. Are you talking about something being created like this?
// add a group to the geometry. this will ensure multi material support
scope.addGroup( groupStart, groupCount, materialIndex );
// calculate new start value for groups
groupStart += groupCount;
@hofk asked me to detail the solution to the problem that I had. Some of the conversations took place on a separate thread, I have posted that conversation below. @hofk suggested that I create an invisible area. So I draw the rectangle with line segments and then overlay them with invisible triangles. I also had to adjust the line precision to a smaller number.