I’m following the guides on Customize Camera Inputs - Babylon.js Documentation
I like the camera movement in this playground example:
And I am trying to port the example from javascript to typescript.
The docs say Using TypeScript, you could implement the interface ICameraInput
so presumably I implement that with a class like so:
export class FreeCameraKeyboardWalkInput implements BABYLON.ICameraInput<BABYLON.UniversalCamera>
and then just port the required functions from the playground into the class.
Where I get confused is that the example functions in the playground reference properties like this._onKeyDown and this._onKeyUp which are not defined in the interface. I’m not sure where my class is supposed to get those.
Here is an example:
In the playground, one of the functions to implement is ‘detachControl’:
//Add detachment controls
FreeCameraKeyboardWalkInput.prototype.detachControl = function (element) {
if (this._onKeyDown) {
element.removeEventListener("keydown", this._onKeyDown);
element.removeEventListener("keyup", this._onKeyUp);
BABYLON.Tools.UnregisterTopRootEvents([
{ name: "blur", handler: this._onLostFocus }
]);
this._keys = [];
this._onKeyDown = null;
this._onKeyUp = null;
}
};
In my class that would be a instance method (see further below):
export class FreeCameraKeyboardWalkInput implements BABYLON.ICameraInput<BABYLON.UniversalCamera>{
camera: UniversalCamera
_keys: number[]
keysUp: number[]
keysDown: number[]
keysLeft: number[]
keysRight: number[]
constructor() {
this._keys = [];
this.keysUp = [38];
this.keysDown = [40];
this.keysLeft = [37];
this.keysRight = [39];
}
.....
detachControl(element: HTMLElement) {
if (this._onKeyDown) {
element.removeEventListener("keydown", this._onKeyDown);
element.removeEventListener("keyup", this._onKeyUp);
BABYLON.Tools.UnregisterTopRootEvents(window, [
{ name: "blur", handler: this._onLostFocus }
]);
this._keys = [];
this._onKeyDown = null;
this._onKeyUp = null;
}
}
Error: Property ‘_onKeyDown’ does not exist on type ‘FreeCameraKeyboardWalkInput’
I did a search of the code base for _onKeyDown and it can be found in ’ src/Inputs/scene.inputManager.ts’
So then I thought maybe I need to extend my class from an inputManager to access those properties?
I tried inheriting from a inputs manager like this, as a guess:
export class FreeCameraKeyboardWalkInput extends BABYLON.CameraInputsManager<BABYLON.UniversalCamera> implements BABYLON.ICameraInput<BABYLON.UniversalCamera>
but intellisense still doesn’t know how this._onKeyDown is defined.
No sure at this point… anyway I think the documentation could benefit from at least one TypeScript example.
Thanks for any advice on how to proceed!