camera.inputs.addMouseWheel() - how do I raycast when scrolling and affect the targeted object

Questions
1

When my users scroll their mouse wheel, I’d like that input to modify an object they’re pointing at.

How can I ray cast and update the object under the pointer when the mouse wheel scrolls?

Thank you!

2

Welcome to the community,
What exactly do you want to achieve? What type of camera are you using? I’m not sure raycasting would be the method but on the other hand, I don’t know what you are trying to achieve. Can you be a little bit more precise, do you have a mock-up or a PG example to share?

1 Like
3

Hi Mawa, thanks for asking.

I want to make “pan” and “zoom” for a diagram editor.

Here’s the component parenting

  • root (TransformNode)
    • scrollRoot (TransformNodde)
      • all the diagram components
    • plane (mesh)

On “plane” is a PointerDragBehavior that implements panning along with clipping to disable diagram components outside the plane boundaries. Plane doesn’t move - instead it moves the scrollRoot around. So panning is working great.

For “zoom”, my plan is to scale the entire diagram using scrollRoot’s scale. Mousewheel is the most common UX for scaling diagrams or photos in an editor.

Is there a Behavior like what I’m talking about? I am using TypeScript, so I found the typings, but not the implementation for PointerDragBehavior easily.

I’d love a generic PointerBehavior to subclass - it seems to have the mesh selection part nailed. I just need to get different events than Drag (mouse wheel). Is there a generic version that streams an observable of all PointerEvents?

I get that “Pointer” means mouse and VR controller. I’m making a VR-first app, but using a mouse pointer for development. For VR, I’d want to experiment with different controller buttons to iterate the UX.

Where would you start?

Thank you!

4

I found the Ray code in PointerDragBehavior, and the Behavior interface.

This is literally my first scene, but scene.onPointerObservable seems to offer “Observable event triggered each time an input event is received from the rendering canvas”.

There’s some example code in the “Diving Deeper” section, but I haven’t been able to dig into it yet.

5

I’m afraid this is going beyond my expertise (particularly the part of VR). But now that you provided with all this info (thx for that) may be @RaananW can help you further or call in someone that can.

6

Hi Mawa, no problem.

I freelance during the week, so I only get to work on Babylonjs during the weekends.

Unless someone has a better idea, scene.onPointerObservable seems like the best place to start.

Thanks for the conversation!

Michael

7

Hi! Here’s the class for the PointerDragBehavior if you’d like to take a deeper look at it: Babylon.js/pointerDragBehavior.ts at master · BabylonJS/Babylon.js (github.com) :smiley:

8

Hello just checking in, was your question answered? Would you like any further help? :slight_smile: @FunAndFriendly