Locking camera rotation and releasing the right mouse button

Hello everyone. I want to implement the following functionality. I have a scene with a camera made using arcRotateCamera.

I need to make it so that when I right-click on the canvas, the cursor disappears (becomes none), as soon as I release the right-click, the cursor appears (becomes default). If I go beyond the canvas (scene), I need to make it so that the camera stops rotating and the mouse becomes instead of none → default.

Do you have a starting playground?

1 Like

@sk1wz welcome aboard!

I believe this will involve removing some or all of the event listeners that the framework attaches to the canvas and implementing custom logic to handle camera movement. However, some of these event listeners may be bound to anonymous or internal functions, which makes them difficult or impossible to remove directly. In such cases, you may need to disable the default input handling provided by the framework and replace it with your own event handling.

That said, I could be wrong.I haven’t tested this approach, so let’s wait for someone who is more familiar with the internals of the framework to confirm or provide a better solution.

If I’m not mistaken, @polygonalSun authored the camera input system and might be able to give us a quick and definitive answer on whether this is feasible, along with some pointers on how to get started.

I did a quick test, and the pointerleave event doesn’t fire when the pointer leaves the canvas, because the browser seems to retain capture of the element where the initial pointerdown occurred.

A quick thought on detecting whether the pointer has left the canvas: register a top-level (window) pointermove handler and check the pointer’s x, y position against the canvas bounds, rather than relying on the pointerleave event.

cc @amoebachant

1 Like

The same event handlers on a BJS canvas

and on a regular canvas

behaves differently.

Even without the camera being attached, the events are not fired in the same way on the BJS canvas as on a regular canvas.

The mouseleave is not fired on the BJS canvas when a mouse button is pressed.

Feel free to play around with the code…

Hi @sk1wz,
When you press and hold a mouse button while over the canvas, and you have the camera hooked up to mouse events (by calling attachControl() on the camera), Babylon will call setPointerCapture() on the canvas so that pointer move events will continue to flow to the canvas even if the mouse moves outside of it, which is usually the desired behavior.

We don’t have a way to disable that behavior, but you can cancel it out by clearing the pointer capture yourself. You can also get the cursor behavior you want by setting scene.doNotHandleCursors = true and then managing the cursor yourself.

Here’s a playground that demonstrates these approaches, and I think gets the behavior you want. Let me know if this helps!

Thanks!