Customize Camera Inputs

How To Customize Camera Inputs

Every Babylon.js camera will automatically handle inputs for you, once you call the camera's attachControl function. You can revoke the control by using the detachControl function. Most Babylon.js experts use a two-step process to activate and attach a camera:

//First, set the scene's activeCamera... to be YOUR camera.
scene.activeCamera = myCamera;
// Then attach the activeCamera to the canvas.
//Parameters: canvas, noPreventDefault
scene.activeCamera.attachControl(canvas, true);

A simpler version might look like this:

myCamera.attachControl(canvas);

By default noPreventDefault is set to false, meaning that preventDefault() is automatically called on all canvas mouse clicks and touch events.

Babylon.js v2.4 introduced a different way to manage camera inputs to provide an approach oriented toward composability of inputs.
You can now use an input manager and each input can be seen as a plugin that is specific to this camera family, and to a given
input type (mouse, keyboard, gamepad, device orientation, etc.).

Using input manager, you can add, remove, enable, or disable any input available for the camera. You can also implement your own input mechanism or override the existing one, very easily.

The input manager is available through a property called inputs, for example

Implementing Your Own Input

Your input method is created as a function object. You must them write code for several methods, with required names, that are called by the input function object. The method names and purpose are

//This function must return the type name of the camera, it could be used for serializing your scene
getTypeName();
//This function must return the simple name that will be injected in the input manager as short hand
//for example "mouse" will turn into camera.inputs.attached.mouse
getSimpleName();
//This function must activate your input event. Even if your input does not need a DOM element
// element and noPreventDefault must be present and used as parameter names.
// Return void.
attachControl(element, noPreventDefault);
//Detach control must deactivate your input and release all pointers, closures or event listeners
//element must be present as a parameter name.
// Return void.
detachControl(element);
//This optional function will get called for each rendered frame, if you want to synchronize your input to rendering,
//no need to use requestAnimationFrame. It's a good place for applying calculations if you have to.
// Return void.
checkInputs();

With Javascript

This changes the normal use of the keys from moving the camera left and right, forward and back to rotating at its current position.

With Typescript

Using TypeScript, you could implement the interface ICameraInput.

interface ICameraInput<TCamera extends BABYLON.Camera> {
// the input manager will fill the parent camera
camera: TCamera;
//this function must return the type name of the camera, it could be used for serializing your scene
getTypeName(): string;
//this function must return the simple name that will be injected in the input manager as short hand
//for example "mouse" will turn into camera.inputs.attached.mouse
getSimpleName(): string;
//this function must activate your input, event if your input does not need a DOM element
attachControl: (element: HTMLElement, noPreventDefault?: boolean) => void;
//detach control must deactivate your input and release all pointers, closures or event listeners
detachControl: (element: HTMLElement) => void;
//this optional function will get called for each rendered frame, if you want to synchronize your input to rendering,
//no need to use requestAnimationFrame. It's a good place for applying calculations if you have to
checkInputs?: () => void;
}