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 :
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
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.