Mouse and Touchscreen

The engine provides a basic input system inputSystem, which can handle mouse and touchscreen input operations uniformly.

Listening for Events

The inputSystem interface has been integrated into the engine's Engine3D instance, so users can use it conveniently. By simply listening for the corresponding event type, you can obtain the corresponding event in the event callback function.

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

  protected start() {
    engine.inputSystem.addEventListener(PointerEvent3D.POINTER_CLICK, this.onClick, this);
  }
  onClick(e: PointerEvent3D) {
    // Click callback
  }
}

The engine has integrated touch and mouse operations using a unified event model, and uses PointerEvent3D to specify the specific event type.

Event	Description
POINTER_CLICK	Touch click event
POINTER_MOVE	Touch swipe event
POINTER_DOWN	Touch start event
POINTER_UP	Touch end event
POINTER_OUT	Touch out event

PointerEvent3D

By default, the engine listens to the current canvas and unifies the event model of touch and mouse. After calling the listener function, an event of type PointerEvent3D will be obtained in the callback function.

Parameter	Type	Description
target	Object3D	The target object that triggers the event
data	Object	The coordinate data when the event is triggered, including the Normal and Position information of the target object, etc.
pointerId	number	A unique identifier for an event caused by a pointer
pointerType	string	Indicates the device type that triggered the event, e.g. mouse / pen / touch, etc.
isPrimary	boolean	Indicates whether the pointer is the primary pointer among pointers of the same type
pressure	number	The normalized pressure value of the pointer input, ranging from 0 to 1, where 0 represents the minimum pressure detectable by the hardware and 1 represents the maximum value
mouseX	number	The current screen x coordinate
mouseY	number	The current screen y coordinate
movementX	number	It provides the horizontal movement value of the mouse between the current event and the previous mouse event
movementY	number	It provides the vertical movement value of the mouse between the current event and the previous mouse event
deltaX	number	Returns a negative double value when scrolling left, a positive double value when scrolling right, and 0 otherwise
deltaY	number	Returns a positive value when scrolling down, a negative value when scrolling up, and 0 otherwise
metaKey	boolean	Whether the Meta key is pressed
ctrlKey	boolean	Whether the Ctrl key is pressed
altKey	boolean	Whether the Alt key is pressed
shiftKey	boolean	Whether the Shift key is pressed

Example

This example demonstrates how to listen for left-click, right-click, and scroll wheel operations.

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

<

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;
let engine = await Engine3D.init();

scene = new Scene3D();
scene.addComponent(AtmosphericComponent);

cameraObj = new Object3D();
camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, engine.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
engine.startRenderView(view);

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

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