Mouse and Touchscreen

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

Listening for Events

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

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) {
    // Click callback
  }
}

The engine has integrated the operation of touch screen and mouse, using a unified event model and specifying the specific event type withPointerEvent3D

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 swipe out event

PointerEvent3D

The engine will listen to the current canvasby default, unify the event model of touch screen and mouse, and obtain PointerEvent3D type events in the callback function after calling the listening function.

Parameter	Type	Description
pointerId	number	A unique identifier for an event caused by a pointer.
pointerType	string	Indicates the type of device that caused the event (mouse/pen/touch, etc.).
isPrimary	boolean	Indicates whether the pointer is the primary pointer in a set of pointers of the same type.
pressure	number	The normalized pressure value of the pointer input, with a value range of 0 to 1, where 0 represents the smallest pressure detectable by the hardware, and 1 represents the maximum value.
mouseX	number	The current x coordinate.
mouseY	number	The current y coordinate.
movementX	number	It provides the horizontal movement value of the mouse between the current and previous mouse events.
movementY	number	It provides the vertical movement value of the mouse between the current and previous mouse events.
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.

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