Fix for raycasting inaccuracy

[pichiste]

Solves #68

Fixes raycast inaccuracy, which was more pronounced when objects were towards the edge of the viewport. The problem was that the raycast origin did not take the cursor position into account.

Changes:

• Updated ray origin to use pointerX and pointerY
• Moved the calculation to a computeRay helper
• Added a regression test (compute-ray.test.ts) for this issue

Screen Captures:

before.mp4

after.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 2286de8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-three-map	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2286de8:

Sandbox	Source
example-mapbox	Configuration
example-maplibre	Configuration
stories	Configuration

[RodrigoHamuy]

@pichiste

Thanks for the fix and the clear write-up!

Would you mind just keeping it a bit more minimal. The helper and test add overhead for what is essentially a one-line change. Could you simplify to just:

state.raycaster.ray.origin.set(state.pointer.x, state.pointer.y, -1).applyMatrix4(projViewInv);

in events.ts, and delete compute-ray.ts and compute-ray.test.ts? Happy to merge it in that form.

[pichiste]

Hi @RodrigoHamuy, thanks for merging. I was wondering if you have an ETA when you might do a next release?