v4.0.1 The `onPointerLeave` function is not activating.

[hawk86104]

Describe the bug

As shown in the StackBlitz URL example, onPointerLeave was activating in version 3.9 and earlier. However, in version 4.0 and later, it is difficult to activate. How can I use onPointerLeave?

  <TresMesh
    @pointer-enter="onPointerEnter"
    @pointer-leave="onPointerLeave"
    name="box"
  >
    <TresBoxGeometry />
    <TresMeshBasicMaterial color="#006060" />
  </TresMesh>

This way of using it is not a good practice.

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction-kentgx?file=src%2Fcomponents%2FTheExperience.vue,src%2FApp.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

yarn

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[hexianWeb]

feat(events)!: pointerevents manager and state #529 mentioned that the code no longer works, maybe in a certain version Is it working normally? But it cannot run for tresjs v4.0.1

https://github.com/Tresjs/tres/assets/59913119/a82860a4-bc57-43e5-bd16-58611cb9a459

[hexianWeb]

feat(events)!: pointerevents manager and state #529 mentioned that the code no longer works, maybe in a certain version Is it working normally? But it cannot run for tresjs v4.0.1

bandicam.2024-06-02.14-41-19-353.mp4

My current approach to solving this issue involves maintaining a collection to store objects that are no longer intersected by rays. This collection is then used to trigger the propogateEvent function.

  let prevIntersections: Intersection[] = []
  let differenceSetObject: TresObject[] = []
  onPointerMove((event) => {
    // Current intersections mapped as meshes
    const hits = event.intersections.map(({ object }) => object)

    differenceSetObject = prevIntersections.filter((hit) => !hits.includes(hit))

    differenceSetObject.forEach(() => {
      propogateEvent('onPointerLeave', event)
      propogateEvent('onPointerOut', event)
    })
    // .......
    // Update previous intersections
    prevIntersections = hits as unknown as Intersection[]
  })

[hexianWeb]

"It is work." before

https://github.com/Tresjs/tres/assets/59913119/a478d562-107f-47b3-8713-f541e9c738ee

after

https://github.com/Tresjs/tres/assets/59913119/12ff884f-6b26-4bbb-8411-3ddc946ce283

[garrlker]

Hi!

Thanks for the reproduction, it's helped me nail down the issue

Looks like I had an oversight in the event system and relied too much on the intersections array. Since these are pointer-leave/out events we won't have intersections in array to propagate with.

Working on a fix now, will comment when a PR is up

[garrlker]

I've got a PR up(#716) with the fix

[garrlker]

@hawk86104 @hexianWeb The fix was released this morning is @tresjs/core version 4.0.2

Please give that a try and report back when you get a chance 🙂

[hexianWeb]

Thank you for the update! I will give @tresjs/core version 4.0.2 a try and report back before this time tomorrow. (11pm in China,
So the reply might be a bit delayed. : )

[hexianWeb]

LGTM, this was a timely and effective fix.