I’m drawing quadrilaterals by using line segments, so that I don’t get diagonals as I do when I use triangles. The issue is when I try to click in the interior of the quadrilateral I get an error message ( as shown below ) which states that v0.distanceTo is not function. There are other geometric shapes being drawn and I get the same error when the quadrilaterals are present. If I remove the quads then the raycasting works without issue. Any help is appreciated in helping me figure out what I’m doing wrong.
Please provide a live demo that shows what are you doing in your code.
https://jsfiddle.net/aitheorem/unxh05ka/42/
This is a scaled down version of what I’m doing.
Use this version as the previous version had some duplicated code.
https://jsfiddle.net/unxh05ka/46/
You have created a vector object like this:
vec0 = {};
Since vec0 is now no instance of THREE.Vector3, you get the mentioned error.
Fixed example: https://jsfiddle.net/unxh05ka/54/
I appreciate the help. The error has been removed but the intersects array has no face or faceindex information when the triangles are clicked on. Likewise, clicking in the quadrilateral always yields an index value of 0. Is this because the quads and triangle share a common border?
Update fiddle: https://jsfiddle.net/unxh05ka/61/
If I click on the triangles, I get intersections with different face indices. It seems to me that the winding order of your triangles is messed up. I had to rotate the mesh so the front faces are headed towards the camera.