Three JS - Strange raycast behaviour when objects are moved

Question

Version and info

THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93

The problem

When I raycast an object in my scene, I found that it worked perfectly down to the pixel, until I moved the object. In my program I expload the scene, so I move all the objects, and child objects away from the center of the scene.

To easily visualise the issue instead of raycasting a single point at a mouse click, I opted to raycast the entire screen, this is what I get (Figure 1)

(Figure 1) The reason for the gaps is because it took to long to raycast every pixel, so instead I raycasted every fourth. The reason for the gap in the middle is because I zoomed away from the original position.

Now, see what happens when I expload the object (Figure 2),

(Figure 2) As you can see, there is almost a circle. Why is this?

What I've tried

I've tried many things across the internet, and came here when I could find no more.

I've tried a range of different models, some work differently to others, strangely enough. The lamborghini-aventador which was created in Blender works the strangest.

To see if it was a problem with the exploading code, I moved the object to the right. This is where things get interesting (Figure 3).

(Figure 3) It looks as if my outlining I put on the object (the outlines are an EdgesGeometry) is behind, the actual object is in the middle, and the raycasts are further.

What I speculate

I suspect the issue is to do with scaling. So I tried removing all scaling I did in the code, however I got the same result, unfortunately.

Apologies if this is some noobie mistake, though I do hope it is :)

The code

For those who are adventurous enough to delve into my terrible code base, here it is (the majority of the code is inside demo.js):

github

Testing it

Press G to shoot the raycasts (will freeze for a bit), press X to expload, press S to unexpload. Standard orbit controls.

What I've found

Here are some of the links I have already found and tried on this issue:

https://threejs.org/docs/#api/core/Raycaster

Three.js Raycaster not detecting scene mesh

https://github.com/mrdoob/three.js/issues/1325 (Updating the matrix)

http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works (Followed step by step)

... and many more ...

Any ideas?

Answer 1

I think that your model might not have proper bounding boxes/spheres generated. The circular shape could result from the rays passing the bounding sphere check of a bounding sphere that is too small.

You mention resizing/processing your geometries in some way... After you do that, try calling geometry.computeBoundingBox() and geometry.computeBoundingSphere() to rebuild boxes and spheres, and see if that helps?

edit: Apparently this problem was due to bounding boxes and spheres not being recomputed...

the fix was to:

scene.traverse( (o)=>if(o.geometry){o.geometry.computeBoundingBox();o.geometry.computeBoundingSphere();} );