Orillusion

Appearance

本页内容

键盘 ​

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

监听事件 ​

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

键盘事件支持的类型

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

基本使用方法:

ts
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_DOWNstring按键每次按下时响应。
KEY_UPstring按键每次回弹时响应。
keyCodenumber对应的按键码，详情请参考 keycode 定义。

示例 ​

该示例演示 W、S、A、D、Q、E六个按钮的操作


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import { Engine3D, Scene3D, Vector3, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, ComponentBase, KeyEvent, KeyCode } 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;

    protected 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);
        }
    }


    update() {
        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;

async function init() {
    await Engine3D.init({});

    // 创建场景实例
    scene = new Scene3D();

    // 创建相机实例
    cameraObj = new Object3D();
    camera = cameraObj.addComponent(Camera3D);
    // 设置正交相机
    camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
    camera.lookAt(new Vector3(0, 5, 15), new Vector3(0, 0, 0));

    // 设置主相机
    Camera3D.mainCamera = camera;
    scene.addChild(cameraObj);

    // 添加物体
    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 renderJob = new ForwardRenderJob(scene);
    // 开始执行渲染
    Engine3D.startRender(renderJob);
}

init();