Orillusion

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) {
    // 点击回调
  }
}

引擎已经整合了触控与鼠标的操作，使用统一事件模型， 用 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。

示例 ​

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


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

<
ts
import { Engine3D, Scene3D, Vector3, Object3D, Camera3D, ForwardRenderJob, LitMaterial, MeshRenderer, BoxGeometry, MouseCode, PointerEvent3D } from "@orillusion/core";

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

async function demo() {
    await init();

    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;
        }
    });
    Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_WHEEL, (e: PointerEvent3D) => {
        boxObj.z += Engine3D.inputSystem.wheelDelta / 120;
    });

}

demo();