Orillusion

简体中文

English

简体中文

English

Appearance

鼠标与触控 ​

引擎中提供了基本的输入系统 inputSystem，可以统一处理鼠标与触屏的操作输入。

监听事件 ​

inputSystem 接口已经整合到引擎的 Engine3D 实例中，用户可以很方便地使用，只需要监听对应的事件类型就可以在事件回调函数中获得对应的事件。

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

  protected start() {
    Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_CLICK, this.onClick, this);
  }
  onClick(e: PointerEvent3D) {
    // 点击回调
  }
}
import { ComponentBase, PointerEvent3D, Engine3D } from "@orillusion/core";
export class PickScript extends ComponentBase {
  protected init() {}

  protected start() {
    Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_CLICK, this.onClick, this);
  }
  onClick(e: PointerEvent3D) {
    // 点击回调
  }
}

引擎已经整合了触控与鼠标的操作，使用统一事件模型， 用 PointerEvent3D 来指定具体的事件类型。

事件说明
POINTER_CLICK触摸点击事件
POINTER_MOVE触摸滑动事件
POINTER_DOWN触摸开始事件
POINTER_UP触摸结束事件
POINTER_OUT触摸滑出事件

PointerEvent3D ​

引擎会默认监听当前 canvas，统一了触控与鼠标的事件模型，调用监听函数后会在回调函数中获取到 PointerEvent3D 类型的事件。

参数类型描述
pointerIdnumber对于某个由指针引起的事件的唯一标识。
pointerTypestring表明引发该事件的设备类型（鼠标/笔/触摸等）。
isPrimaryboolean表示该指针是否为该类型指针中的首选指针。
pressurenumber规范化后的指针输入的压力值，取值范围为 0 到 1，0 代表硬件可检测到的压力最小值，1 代表最大值。
mouseXnumber当前 x 坐标
mouseYnumber当前 y 坐标
movementXnumber它提供了当前事件和上一个鼠标事件之间鼠标在水平方向上的移动值。
movementYnumber它提供了当前事件和上一个鼠标事件之间鼠标在垂直方向上的移动值。
deltaXnumber在向左滚动时返回负双值，向右滚动时返回正双值，否则为0。
deltaYnumber在向下滚动时返回正值，向上滚动时返回负值，否则为0。

示例 ​

该示例演示如何监听左键、右键、滚轮的操作。


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

<
ts
import { Engine3D, Scene3D, Vector3, AtmosphericComponent, Object3D, Camera3D, View3D, LitMaterial, MeshRenderer, BoxGeometry, MouseCode, PointerEvent3D, DirectLight } from '@orillusion/core'

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

Engine3D.inputSystem.addEventListener(
    PointerEvent3D.POINTER_DOWN,
    (e: PointerEvent3D) => {
        if (e.mouseCode == MouseCode.MOUSE_LEFT) {
            boxObj.rotationY -= 20
        } else if (e.mouseCode == MouseCode.MOUSE_RIGHT) {
            boxObj.rotationY += 20
        }
    },
    this
)

Engine3D.inputSystem.addEventListener(
    PointerEvent3D.POINTER_WHEEL,
    (e: PointerEvent3D) => {
        boxObj.z += Engine3D.inputSystem.wheelDelta / 120
    },
    this
)
import { Engine3D, Scene3D, Vector3, AtmosphericComponent, Object3D, Camera3D, View3D, LitMaterial, MeshRenderer, BoxGeometry, MouseCode, PointerEvent3D, DirectLight } from '@orillusion/core'

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

Engine3D.inputSystem.addEventListener(
    PointerEvent3D.POINTER_DOWN,
    (e: PointerEvent3D) => {
        if (e.mouseCode == MouseCode.MOUSE_LEFT) {
            boxObj.rotationY -= 20
        } else if (e.mouseCode == MouseCode.MOUSE_RIGHT) {
            boxObj.rotationY += 20
        }
    },
    this
)

Engine3D.inputSystem.addEventListener(
    PointerEvent3D.POINTER_WHEEL,
    (e: PointerEvent3D) => {
        boxObj.z += Engine3D.inputSystem.wheelDelta / 120
    },
    this
)