Preserve right click context menu with ArcRotateCamera

Questions
1

Hi,

I would like to preserve the context menu with ArcRotateCamera, but even if I use camera.inputs.attached.pointers.buttons = [0] to allow only left click input the right click is disabled and I loose the option to save the canvas as an image.
How can I have the ArcRotateCamera but also the context menu on right click?

Thank a lot.

2

I think you may use this instruction - Customizing Camera Inputs | Babylon.js Documentation
Also, one may use much simpler draft as here - Babylon.js Playground

3

Thank you labris.
I already checked the Customizing Camera link you sent me before writing the post but I couldn’t find the solution in there (Maybe I need to write my own Input, but I didn’t really understand how to do it).
The playground you sent me has the same issue I was talking about. What I need is to preserve the original browser context menu behavior and not to implement my own context menu functions. Also in that example the original context menu is gone.

4

Babylon overrides the context menu event so you can implement it on your own. If you still want it to work, you can override the mouseinput’s onContextMenu function before attaching the camera to the canvas. Something along these lines:

Babylon.js Playground (babylonjs.com)

1 Like
5

Thanks RaananW, that worked perfectly. You made my day :slight_smile:
Bless

1 Like
6

I am not able to find contextmenu in arc rotate camera and hence not being able to enable it as shown in the approved solution. Can someone please help?

7

you should use the pointers input:

camera.inputs.attached['pointers'].onContextMenu = (e) => {
        console.log(e);
    }
1 Like
8

Exampe - https://playground.babylonjs.com/#PIKP4K#1

9

Hey; small bump on this, but I don’t believe this works for the newer versions. The playgrounds no longer exhibit the intended behavior. Anyone know the new way to do this?

10

This PG from my previous answer works well with the latest and Babylon 5.71.1 too (see console) - https://playground.babylonjs.com/#PIKP4K#1

11

When I implement it on my end in TypeScript I get an error: TypeError: Cannot set properties of undefined (setting 'onContextMenu').
Also while this captures the pointer event, I thought the original intention of the post was to re-enable the browser’s original right click context menu for “Save as Image…”, “Inspect Element” and whatnot. I’m unsure how that’d be implemented through this method.