Keyboard

The engine can also listen to keyboard input events through the inputSystem and support developers to query the current keyboard interaction status at any time without introducing additional packages and the calling interface is very simple.

Listen to Events

Similar to listening to mouse events, developers can attach interested keyboard keys to the event system, and when the button is triggered, the engine will trigger the corresponding callback function.

Keyboard event types supported:

Event	Description
KEY_DOWN	Responds every time the button is pressed down.
KEY_UP	Responds every time the button is released.

Basic usage:

import { ComponentBase, KeyEvent, Engine3D } from "@orillusion/core";
export class keyScript extends ComponentBase {
  protected init() {}

  protected start() {
    Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.onKeyUp, this);
  }
  onKeyUp(e: KeyEvent) {
    // Callback function for keyup
  }
}

KeyEvent

The engine will listen to the keyboard events under the current window by default. After calling the listening function, the event of type KeyEvent will be obtained in the callback function.

Parameter	Type	Description
KEY_DOWN	string	Triggered every time a key is pressed.
KEY_UP	string	Triggered every time a key is released.
keyCode	number	Corresponding keycode, please refer to keycode definition for details.

Example

This example demonstrates the operation of six buttons: W, S, A, D, Q, E.

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Vector3, Object3D, AtmosphericComponent, Camera3D, View3D, LitMaterial, BoxGeometry, MeshRenderer, ComponentBase, KeyEvent, KeyCode, DirectLight } from '@orillusion/core';

class KeyboardScript extends ComponentBase {
    private front: boolean = false;
    private back: boolean = false;
    private left: boolean = false;
    private right: boolean = false;
    private q: boolean = false;
    private e: boolean = false;

    public start() {
        Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.keyUp, this);
        Engine3D.inputSystem.addEventListener(KeyEvent.KEY_DOWN, this.keyDown, this);
    }
    private keyDown(e: KeyEvent) {
        // console.log('keyDown:', e.keyCode);
        if (e.keyCode == KeyCode.Key_W) {
            this.front = true;
        } else if (e.keyCode == KeyCode.Key_S) {
            this.back = true;
        } else if (e.keyCode == KeyCode.Key_A) {
            this.left = true;
        } else if (e.keyCode == KeyCode.Key_D) {
            this.right = true;
        } else if (e.keyCode == KeyCode.Key_Q) {
            this.q = true;
        } else if (e.keyCode == KeyCode.Key_E) {
            this.e = true;
        }
    }
    private keyUp(e: KeyEvent) {
        // console.log('keyUp:', e.keyCode);
        let transform = this.object3D.transform;
        console.log(transform.x, transform.y, transform.z, transform.rotationX);
        if (e.keyCode == KeyCode.Key_W) {
            this.front = false;
        } else if (e.keyCode == KeyCode.Key_S) {
            this.back = false;
        } else if (e.keyCode == KeyCode.Key_A) {
            this.left = false;
        } else if (e.keyCode == KeyCode.Key_D) {
            this.right = false;
        } else if (e.keyCode == KeyCode.Key_Q) {
            this.q = false;
        } else if (e.keyCode == KeyCode.Key_E) {
            this.e = false;
        } else {
            transform.x = 0;
            transform.y = 0;
            transform.z = 0;
            transform.rotationX = 0;
            console.log(transform.x, transform.y, transform.z, transform.rotationX);
        }
    }

    public onUpdate() {
        if (!this.enable) return;

        let transform = this.object3D.transform;
        if (this.front) transform.z -= 1;
        if (this.back) transform.z += 1;
        if (this.left) transform.x -= 1;
        if (this.right) transform.x += 1;
        if (this.q) transform.rotationX -= 5;
        if (this.e) transform.rotationX += 5;
    }
}

let scene: Scene3D;
let cameraObj: Object3D;
let camera: Camera3D;
let boxObj: Object3D;

await Engine3D.init();

scene = new Scene3D();
scene.addComponent(AtmosphericComponent);

cameraObj = new Object3D();
camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
camera.lookAt(new Vector3(0, 5, 15), new Vector3(0, 0, 0));
scene.addChild(cameraObj);

// add a base light
let lightObj = new Object3D();
lightObj.addComponent(DirectLight);
scene.addChild(lightObj);

boxObj = new Object3D();
boxObj.addComponent(KeyboardScript);
let mr: MeshRenderer = boxObj.addComponent(MeshRenderer);
mr.geometry = new BoxGeometry(3, 3, 3);
mr.material = new LitMaterial();
boxObj.localPosition = new Vector3(0, 0, 0);
scene.addChild(boxObj);

let view = new View3D();
view.scene = scene;
view.camera = camera;
// start render
Engine3D.startRenderView(view);