Virtual Joysticks


Create virtual joysticks for the left and right side of the screen

const leftJoystick = new BABYLON.VirtualJoystick(true);
const rightJoystick = new BABYLON.VirtualJoystick(false);

Get joystick value

VirtualJoystick Example

Note: This will create an overlay canvas on top of the canvas for the scene. This will disable interaction with the Babylon GUI elements and scene pointer events. To avoid this the overlay joystick canvas's z index can be modified to toggle between scene interaction and joysticks input as seen in the playground above. Another option would be to create a custom joystick using the Babylon GUI as described below.

Custom joystick

To create a custom virtual joystick and modify it to suit specific use cases, the Babylon GUI can be used.

Custom Joystick Example

As seen in this example, no overlay canvas is used so other GUI elements will continue to function and the visuals can be modified/positioned if needed.

You can also create a custom input for a camera. For example, here is a joined input suitable for FPS games with a movement joystick on the left and swipe-rotation area on the right:

Custom Joystick Input Example