键盘
引擎同样可以通过 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_DOWN | string | 按键每次按下时响应。 |
KEY_UP | string | 按键每次回弹时响应。 |
keyCode | number | 对应的按键码,详情请参考 keycode 定义。 |
示例
该示例演示 W、S、A、D、Q、E六个按钮的操作
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)