键盘

引擎同样可以通过 inputSystem 监听键盘输入事件，而且支持开发者随时查询当前的键盘交互实况，不需引入额外包且调用接口十分简单。

监听事件

跟监听鼠标事件一样，开发者可以将感兴趣的键盘按键挂载到事件系统，当该按钮触发后引擎会触发对应的回调函数。

键盘事件支持的类型

事件	说明
KEY_DOWN	按键每次按下时响应。
KEY_UP	按键每次回弹时响应。

基本使用方法:

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) {
    // 按键回调
  }
}

KeyEvent

引擎会默认监听当前 window 下的键盘事件，调用监听函数后会在回调函数中获取到 KeyEvent 类型的事件。

参数	类型	说明
KEY_DOWN	string	按键每次按下时响应。
KEY_UP	string	按键每次回弹时响应。
keyCode	number	对应的按键码，详情请参考 keycode 定义。

示例

该示例演示 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);