Skip to content

鼠标与触控

引擎中提供了基本的输入系统 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) {
    // 点击回调
  }
}

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

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

PointerEvent3D

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

参数类型描述
targetObject3D事件触发的目标对象
dataObject事件触发的坐标数据,包含目标对象 Normal 和 Position 信息等
pointerIdnumber对于某个由指针引起的事件的唯一标识
pointerTypestring表明引发该事件的设备类型,例如:鼠标/笔/触摸等
isPrimaryboolean表示该指针是否为该类型指针中的首选指针
pressurenumber规范化后的指针输入的压力值,取值范围为 0 到 1,0 代表硬件可检测到的压力最小值,1 代表最大值
mouseXnumber当前屏幕 x 坐标
mouseYnumber当前屏幕 y 坐标
movementXnumber它提供了当前事件和上一个鼠标事件之间鼠标在水平方向上的移动值
movementYnumber它提供了当前事件和上一个鼠标事件之间鼠标在垂直方向上的移动值
deltaXnumber在向左滚动时返回负双值,向右滚动时返回正双值,否则为0
deltaYnumber在向下滚动时返回正值,向上滚动时返回负值,否则为0
metaKeybooleanMeta 键是否按下
ctrlKeybooleanCtrl 键是否按下
altKeybooleanAlt 键是否按下
shiftKeybooleanShift 键是否按下

示例

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

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