Orillusion

简体中文

English

简体中文

English

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) {
    // 按键回调
  }
}
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六个按钮的操作


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

<
ts
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)
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)