Universal camera with mouse scroll wheel and touch pinch

So my project is coming along nicely.
So nicely i decided to look into better camera control.
I’m using the Universal Camera. I want to be able to move it around the scene and view from any angle. Ideally i’d be able to do this with either just mouse or mobile touch. (Think Google Earth UI.)

So what’s missing? Basically i need another axis of motion.
When using mouse or touch the Universal Camera can pan left-right and up-down but not in-out.
My mouse has a scroll wheel… (Well actually, a touch pad emulating a scroll wheel…)

Looking in Babylon.js/src/Cameras/Inputs at master · BabylonJS/Babylon.js · GitHub it doesn’t look lie i’m missing anything (although i do notice version 4.2 will have keyboard control of 3 axis instead of just the current 2).

is there any appetite for me to do some refactoring?
Last time i ran into similar issues as this i created Babylon.js/BaseCameraPointersInput.ts at master · BabylonJS/Babylon.js · GitHub
With that as the base, getting multi touch working should be fairly straight forward.

This would probably replace both freeCameraMouseInput.ts and freeCameraTouchInput.ts with a unified replacement but they are both much less complicated than followCameraPointersInput.ts which i originally created BaseCameraPointersInput.ts for.

anyone got opinions / input / etc before i start?

looking at this on my phone this morning, it appears i d have 3 axis on mobile; Double finger drag allows pan up/down.
It is very slow… Need to tweak sensitivity settings.

So wile using BaseCameraPointersInput.ts would give more options for touch input,
i think implementing scroll-wheel is higher on my list of priorities.

So, same question for scroll-wheel on the Universal Camera; is there any appetite for me to do some refactoring?
Is this something that would likely get merged if i implemented it?


any refactoring is welcome as long as:

  • it adds something new and useful
  • it protects the backward compatibility

Well i’m Covid locked-down again so stuck in the hose for the weekend.
On the plus side, that means i have an implementation of Mouse Wheel for FreeCamera and derivatives working quite nicely.

I have a few UI questions though.
Mouse wheels can theoretically have up to 3 axis.
I’m not sure what the hardware for the 3rd would look like (pinch multitouch maybe?)… but most laptops have an X and Y axis.

It would make sense for a user to be able to plumb these 3 axis to a range of camera properties.
My current implementation allows the following to be controlled form any wheel axis:

  1. Position of camera relative to the camera. Any 1 axis. (eg: Fly forward.)
  2. Position of camera relative to the scene. Any 1 axis. (eg: Change camera height.)
  3. Rotation of camera. Any 1 axis. (Can’t think why this would be useful but it’s easily done.)
    3x3x3 = 27 different combinations. Boolean toggles clearly aren’t the way to go for the UI here.

Can anyone suggest any thing in the current API that is typical of the style we want to achieve?

Left to my own devices i’d probably have
an Enum of properties and an Enum of axis and assign each mouse wheel axis one of each?

You can see the private variables i need to control here:

Look for the definition of _wheelXAction and the following lines.


So i came up with a API for this that is usable.
The following snippet would disable the mouse wheel’s Y axis from controlling the “move forward/backward” default behavior:
camera.inputs.attached["mousewheel"].wheelYMoveRelative = null;
The following would attach the same axis to camera height in the scene instead:
camera.inputs.attached["mousewheel"].wheelYMoveScene = BABYLON.AXIS.Z;