Raycaster inaccuracy with OrbitControls

Hi Folks,

I’m new to Three.js and am trying to learn how to do some basic stuff. First I’m trying to make a basic scene with OrbitControls where I can use the mouse to select and highlight objects in the scene. I’m using raycaster examples to achieve this, but the raycasting seems very inaccurate a lot of the time and I’m not sure what I’m doing wrong or if something is broken.

First example:

Here, my “floor plane” is just a LineSegment object (is that the right name?) and then there is a cube in the scene. When you click something, the raycaster should find it and highlight it in red. But clicking various places it highlights the wrong thing:

Accurate click:

Inaccurate (it thinks I’m clicking the floor)

Inaccurate (I’m clicking the background area but it thinks I’m clicking the floor)

Next I tried a different approach. I replaced the floor linesegments with a single PlaneGeometry:

Better but similar results with this:

Doesn’t think I’m clicking anything here:

It thinks I’m clicking the plane:

Can anyone shed light as to what is going on here? I really don’t get it. Is the Raycasting just broken? I’m using r136. When I search for similar threads in this forum I find other people asking similar questions with no resolution to the problem. No one even suggesting that the Raycasting core is buggy. It seems like maybe the Raycasting isn’t properly taking into account the camera FOV or zoom position or something.

Or is my Raycasting code just wrong? If so can anyone fix my Codepen and link the fixed version?

If anyone is able to provide insight thank you very much.

There are several issues with your coding but none does the offset, we are seeing.
This will fix one of them.

raycaster .params.Line.threshold = 0;

Here is an example raytracing using an older version of 3JS.
Ray Multi Objects.html (4.4 KB)