Custom Event

In addition to the basic mouse and keyboard events, the engine also provides a custom event CEvent class for developers to use. You can use engine.inputSystem to dispatch and listen to any custom event. We recommend using the event system for communication when components need to interact.

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

<

import { Engine3D, Scene3D, Vector3, Object3D, Camera3D, View3D, AtmosphericComponent, LitMaterial, MeshRenderer, ComponentBase, CEvent, BoxGeometry, DirectLight } from '@orillusion/core';
import dat from 'dat.gui';

class UserEventScriptLeft extends ComponentBase {
    private rotation: number = 0;

    private OnRunEvent(e: CEvent) {
        console.log(e.type, e.data);
        let params = e.data;
        console.log(params);
        if (params.direction == 'left') {
            this.rotation = -5;
        } else if (params.direction == 'right') {
            this.rotation = 5;
        }
    }

    private OnStopEvent(e: CEvent) {
        console.log(e.type, e.data);
        this.rotation = 0;
    }

    public start() {
        engine.inputSystem.addEventListener('RunEvent', this.OnRunEvent, this);
        engine.inputSystem.addEventListener('StopEvent', this.OnStopEvent, this);
    }

    public onUpdate() {
        this.object3D.transform.rotationY += this.rotation;
    }
}

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();
boxObj.addComponent(UserEventScriptLeft);
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);

const gui = new dat.GUI();
// Debug
const debugInfo = {
    leftEvent: () => {
        let params = { direction: 'left' };
        let e = new CEvent('RunEvent', params);
        engine.inputSystem.dispatchEvent(e);
    },
    rightEvent: () => {
        let params = { direction: 'right' };
        let e = new CEvent('RunEvent', params);
        engine.inputSystem.dispatchEvent(e);
    },
    stopEvent: () => {
        let e = new CEvent('StopEvent');
        engine.inputSystem.dispatchEvent(e);
    }
};
gui.add(debugInfo, 'leftEvent');
gui.add(debugInfo, 'rightEvent');
gui.add(debugInfo, 'stopEvent');

Event Dispatching

Call the engine.inputSystem.dispatchEvent method to dispatch an event. Dispatching the corresponding event will trigger the execution of the listener callback function.

import {Engine3D, CEvent} from '@orillusion/core';

let customEvent = new CEvent("UserEvent", {name:'name',data:'data'});
engine.inputSystem.dispatchEvent(customEvent);

Event Listening

Event listening associates events with handler functions.

// Listen to the event
engine.inputSystem.addEventListener("UserEvent", this.OnUserEvent, this);
// Handler function
private OnUserEvent(e: CEvent) {
    let params = e.data;
}

Removing Events

Events that are no longer needed can be removed.

engine.inputSystem.removeEventListener("UserEvent", this.OnUserEvent, this);

CEvent

The event handler function takes a parameter of type CEvent, from which event information can be obtained.

Parameter	Type	Description	Example
type	string	The type identifier string for the event in the engine	"UserEvent"
data	any	Additional data	{ "name": "name", "data": "any" }