Ray casting to objects with a common border

Questions
#1

Hello,

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.

https://jsfiddle.net/aitheorem/nhb7L496/133/

#2

Did you see that?
https://discourse.threejs.org/t/gridboxgeometry/1420
https://discourse.threejs.org/t/grid-collection/1893

#3

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.

#4

Maybe this can help?
(Note! From r95 raycast multi-material is supported correctly!)
https://discourse.threejs.org/t/modify-indexed-buffergeometry-mouse-or-input/1674

In these examples I select triangle, edge or corner.

http://threejs.hofk.de/modifyGeo/modifyGeo.html
http://sandboxthreef.threejs.hofk.de/modifyRaycastMultiMaterial.html

#5

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.

#6

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?

“var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,[meshMaterial,wireframeMaterial]);”

I didn’t see a statement like that in your code. Is one of the materials you used considered a multi-material?

My last question is based on my previous reply. Should I expect the following statement to use the actual mouse click x and y coordinate?

“raycaster.setFromCamera( mouse, camera );”

#7

Until r84, one had to define a multi-material of individual materials separately.
Now an array containing the materials is sufficient:
https://github.com/mrdoob/three.js/wiki/Migration-Guide r84 → r85

In the example http://sandboxthreef.threejs.hofk.de/modifyRaycastMultiMaterial.html
the triangles have different materials:

var materials = [
		
		new THREE.MeshBasicMaterial( {
			opacity: 0.15,	transparent: true, 	
			side: side, wireframe: wireframe } ),					//  0 transparent
			
		new THREE.MeshPhongMaterial( {
			color: 0x440033, emissive: 0x330033, specular: specular,
			side: side, wireframe: wireframe, flatShading: flatShading } ),	//  1 color

...
];

In view-source:http://sandboxthreef.threejs.hofk.de/geo.js you can see that the materials are assigned with .addGroup. The name is a bit problematic because it has nothing to do with 3D Objekt Group (https://threejs.org/docs/index.html#api/objects/Group).

For example, see https://github.com/mrdoob/three.js/blob/master/src/geometries/BoxGeometry.js
lines starting at 183

	// 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;

Not sure if I understand the question correctly, but raycast leads the beam from the 2D mouse coordinates into 3D space. Maybe this simple example from http://threejs.hofk.de/ will help you: http://threejs.hofk.de/raycaster/raycaster.html

#8

I appreciate the quick response. :smile: I will review the information that you have provided.

#9

I appreciate your help! Thank you :slight_smile:

#10

@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.

image