Hi all,
I was wondering if anyone could help to change the ArcRotateCam Pan in a way that middle mouse button would pan in Y direction up and down and right click would pan in XZ.
Basically:
Middle mouse button:
camera.panningAxis=new BABYLON.Vector3(0,1,0);
Right mouse button:
camera.panningAxis=new BABYLON.Vector3(1,0,1);
Thank you
Hi Delta,
Welcome to Babylon! I don’t really understand what effect you’re going for, but here’s a Playground example of how to do the specific thing you asked about.
Babylon.js Playground (babylonjs.com)
Even if that doesn’t do exactly what you’re wanting, it might give you the tools to explore a bit further and and serve as the basis for follow-up questions. Hope this helps, and best of luck!
The effect I am looking for is having 2 pans for ArcRotateCamera,
one with middle mouse button to pan in Y axis
and
second pan to be done by right mouse button across XZ axis
I couldn’t find any examples in playground.
Right, I probably could have been clearer. 
It’s not obvious to me what “having 2 pans” means. When you hold down the middle mouse button and move the mouse, what happens? Do you translate only in the Y axis? Is that in the world’s Y axis or the camera’s local Y? If translation in world space, does XZ “panning” also take place in world space? If so, how do you want to handle rotation? And if XZ is supposed to take place in local space, what does it mean to “pan” in the local Z axis?
At a guess, I suspect there’s a tool you’ve used before that has behavior you’re trying to replicate, and I’m just having trouble understanding what you’re looking for because I’m not familiar with the same expectation. If you know of an example that can illustrate what you’re looking for, that would definitely help communicate it; otherwise, the best approach might be to just try a few things with the tools demonstrated in the Playground I linked. 3D camera control can be tricky to implement, and sometimes even trickier to communicate, so just finding a common parlance to talk about camera movement can be a task unto itself. 
ok let’s dig a big dipper, I thought that is clear.
You can set default ArcRotateCamera to pan in a certain axis with certain mouse button click like so:
camera.panningAxis = new BABYLON.Vector3(0, 1, 0);
camera._panningMouseButton = 1;
what above will do is when middle mouse button is pressed and dragged it will Pan the camera up and down in Y axis.
that is good so far
and now, I also want the same camera to be able to Pan with Right Mouse button on XZ axis:
camera.panningAxis = new BABYLON.Vector3(1, 0, 1);
camera._panningMouseButton = 2;
so when Right Mouse Button is pressed and dragged to Pan the camera in XZ axis.
what the final camera behaviour will be, A camera that has 2 Pan controls:
first pan it will work with middle mouse button pressed & dragged for Y axis
second Pan it will work with right click mouse button pressed & dragged in XZ axis
https://playground.babylonjs.com/#JXTQ11#1
here is a playground link, the issue is you have to press the mouse button to activate that axis and on the second time click it would do the action I am looking for.
If all that you want to do is change the panning axis value, then I think everything you need should be in the Playground I linked to. I can’t test this locally as I don’t have a middle mouse button, but it should not be difficult to modify my Playground to do the things you described.
if you ever find a mouse with 3 button try to give it a go. it does not work.
@Deltakosh any clues?
I’m sure @syntheticmagus will figure it out:) no need for my help 
here is a version that sort of works in playground but in my project I have to click to activate and on second click it will do the action I am looking for, middle click pan Y, right click pan XZ
I wanna thank you all for helping me to solve the issue
here is the final working solution if anyone needs it.
Middle mouse button click hold drag Pan in Y
Right mouse button click hold drag Pan in XZ