Skip to content

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.

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) {
    // 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

EventDescription
POINTER_CLICKTouch click event
POINTER_MOVETouch swipe event
POINTER_DOWNTouch start event
POINTER_UPTouch end event
POINTER_OUTTouch 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.

ParameterTypeDescription
targetObject3DThe target object3d for the event
dataObjectCoordinate data for the event, including information such as the target object’s normal and position
pointerIdnumberA unique identifier for an event caused by a pointer
pointerTypestringIndicates the type of device that caused the event (mouse/pen/touch, etc.)
isPrimarybooleanIndicates whether the pointer is the primary pointer in a set of pointers of the same type
pressurenumberThe 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
mouseXnumberThe current x coordinate
mouseYnumberThe current y coordinate
movementXnumberIt provides the horizontal movement value of the mouse between the current and previous mouse events
movementYnumberIt provides the vertical movement value of the mouse between the current and previous mouse events
deltaXnumberReturns a negative double value when scrolling left, a positive double value when scrolling right, and 0 otherwise
deltaYnumberReturns a positive value when scrolling down, a negative value when scrolling up, and 0 otherwise
metaKeybooleanif the meta key is pressed, otherwise false
ctrlKeybooleanif the ctrl key is pressed, otherwise false
altKeybooleanif the alt key is pressed, otherwise false
shiftKeybooleanif the shift key is pressed, otherwise false

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

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

Released under the MIT License