[Solved] Raycaster missing half a plane - bug?

In order to stretch a 2D rounded rectangle without distortion, I repositioned the rectangle towards one direction (eg left) by the desired amount and added that amount to the right-most vertices to compensate and appear stretched. The problem is that now raycaster is missing the right-half of the rectangle.

I made the following jsfiddle stretching a normal rectangle:

http://jsfiddle.net/vser1n2u/5/
If you hover the mouse on the rectangle you’ll see that raycaster works properly (“TRUE” indication). If you click on the rectangle, it will expand to the left. Now if you hover you’ll see that it works only half way (“FALSE” indication).

Am I missing something, or is this a three.js bug?

You are missing something^^. If you modify the geometry, you also have to update the corresponding bounding volumes like so:

geometry.computeBoundingSphere();
geometry.computeBoundingBox();

Raycasting first checks the bounding volumes. The more expensive ray/triangle intersection test comes next.

Updated fiddle: http://jsfiddle.net/vser1n2u/9/

BTW: I’ve seen some things in your fiddle that are not so good:

  • You should not dispose a geometry right after creating a mesh. It’s also not necessary to set the geometry variable to null.
  • The way you manipulate the geometry data is strange. Right now, the code that updates the geometry is executed multiple frames. It’s better to put the related logic in a click event listener which is executed just once.
2 Likes

Crossposting.

Please use only a single place for your questions. The collaborators are active here and at stackoverflow.

Please use only a single place for your questions. The collaborators are active here and at stackoverflow.

Noted. Sorry about that, it’s confusing to have two places for the same thing though, not to mention the bonus-points motivation for helping (and I did wait for 7 hours before cross-posting -an eternity for a non-hobbyist).

Thanks for the tips and the fix. Like I wrote, I did try computeBoundingBox but it didn’t work, obviously because I placed it before the verticesNeedUpdate.

The way you manipulate the geometry data is strange. Right now, the code that updates the geometry is executed multiple frames. It’s better to put the related logic in a click event listener which is executed just once

You are right, but that is the side-effect of overslimplification, to make a quick test jsfiddle from my main code where the mouse is continuously varying the geometry in edit mode.

I just checked it, it wasn’t the position of the instruction after all, but the use of computeBoundingBox instead of computeBoundingSphere! It is strange that a bounding sphere is needed and works properly with a rectangular object! :astonished:

The problem is that the ray and the geometry with its bounding volumes are in different spaces. A ray is usually expressed in world space, the geometry in local space. Both entities have to be in the same space for an intersection test.

The initial step of Mesh.raycast() is to transform the bounding sphere to world space and perform the first intersection test with the ray. This step requires at least calculations. All subsequent tests (ray/AABB, ray with all triangles) are performed in the local space of the geometry.

You mean the bounding sphere is the first rough step in world space and more tests with triangles etc follow for precision in local space. While computeBoundingSphere alone works on that example, computeBoundingBox does not though -not very intuitive to figure out, but obviously some priority is given to the former due to the fact it has that low-cost first world-space step.Thanks for clarifying.