Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Raycast and pointer enter/leave handling #31

Closed
SaFrMo opened this issue Mar 21, 2021 · 2 comments
Closed

Raycast and pointer enter/leave handling #31

SaFrMo opened this issue Mar 21, 2021 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@SaFrMo
Copy link
Contributor

SaFrMo commented Mar 21, 2021

While working with #30, I was wondering if there's a cleaner way to handle raycasting and pointer events. I'm thinking of a two-step approach, raycaster-first and object-first.

Raycaster-first

Sometimes I want to raycast against everything in a crowded scene - in this case, I'd rather write a single raycaster's pointerEnter and pointerLeave functions than those of all the objects in the scene. To accomplish this, we could add a Raycaster component:

<Camera>
  <Raycaster @pointerEnter="onEnter" @pointerLeave="onLeave"/>
</Camera>
export default {
  methods: {
    onEnter(intersections) {
      console.log(intersections)
    },
    onLeave(inactiveIntersections){ 
      console.log(inactiveIntersections)
    }
  }
}

This would raycast against everything (raycaster.intersectObjects(scene.children)) and fire appropriate callbacks when pointer interactions start and end. We could also include an optional prop targetObjects if the user wants to specify which objects to target if they don't want all of them.

Object-first

I'm finding the <Renderer mouse-over> and mesh :onHover prop a little confusing - maybe we could do something like this:

  • Add pointerEnter and pointerLeave props to all Meshes
  • In a mesh's initialization, if either pointerEnter or pointerLeave are defined, check for this.three.raycaster.
    • If one is defined, add the mesh to the list of target objects the raycaster can intersect.
    • If one is not defined, tell this.three to create one (a new method like this.three.initializeRaycaster()), then add the mesh to the list of target objects.

From there, three.raycaster can handle calling events on meshes when the pointer enters or leaves them. This way we don't need any Renderer-level awareness of raycasting and the pointerEnter/pointerLeave events more closely match the Raycast component above (plus they're more clearly named for handling non-mouse inputs).

Happy to add this in the next couple days if it sounds worthwhile - let me know any thoughts @klevron !

@SaFrMo SaFrMo added the enhancement New feature or request label Mar 21, 2021
@klevron
Copy link
Member

klevron commented Mar 21, 2021

Thanks, sounds great, I was thinking the same about replacing mouse with pointer

@SaFrMo
Copy link
Contributor Author

SaFrMo commented Apr 1, 2021

Fixed in #33

@SaFrMo SaFrMo closed this as completed Apr 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants