javascripttypescriptthree.jswebxr

Creating a new xr event


I am new to typescript and I am trying to implement the equivalent of a "double-click" event for a hand-input controller to interact with a mesh in my three-js app. I wish to do this the following way :

-> I listen to a click

-> I check when was last click

-> if time between last click and current click < threshold

I dispatch an event

My issue is when I try to dispatch my custom event, I want to dispatch my event from my controller : XRTargetRaySpace. I can dispatch my event when I use the document to dispatch it. Iam struggling to understand how the event dispatcher works in this context

Here is the interface that discribes the event map :

enter image description here

Here is my code

let deltaTime = 0,
    lastclick = 0,
    MAX_DELTA_TIME = 500;
const doubleClickEvent = new CustomEvent("sandbox:doubleClick", {
    bubbles: true,
    cancelable: true,
    composed: true,
    detail: {
        deltaTime,
    },
});

controller1.addEventListener("squeezestart", (_) => {
    deltaTime = window.performance.now() - lastclick;

    if (deltaTime < MAX_DELTA_TIME) {
        controller1.dispatchEvent(doubleClickEvent);
        lastclick = 0;
    }
    lastclick = window.performance.now();
});
controller2.addEventListener("squeezestart", (_) => {
    deltaTime = window.performance.now() - lastclick;

    if (deltaTime < MAX_DELTA_TIME) {
        controller2.dispatchEvent(doubleClickEvent);
        lastclick = 0;
    }
    lastclick = window.performance.now();
});

I expect to have something like :

controller1.addEventListener('sandbox:doubleClick', (e) => console.log(e)) 

where controller : XRTargetRaySpace | XRGripSpace | XRHandSpace


Solution

  • I wanted to update this topic because I think it could help someone in the futur. I believe that it is not possbile to add a new event to the threeJs controllers eventmap so it is not possible to have something like controller.addEventListener("myCustomEvent", (e) => console.log(e)) where controller is type of XRTargetRaySpace, XRGripSpace ... however it is possible to create a class called MyClass that extends EventDispatcher that will contain the controllers and then dispatch an myCustomEvent when a method of this class is evoqued. Then it is possible to add an eventListener on any MyClass instance that will call a function when ever MyCustomEvent is fired.