As a newcomer to TypeScript, I am exploring how to create a functionality similar to a "double-click" event for a hand-input controller in my Three.js application. Here is my approach:
- I monitor a click event
- I check the timing between the last click and the current click
- If the time difference is less than a certain threshold, I trigger a custom event
My challenge arises when attempting to dispatch this custom event from my controller, XRTargetRaySpace. While I can successfully dispatch the event using the document object, I am unsure about the workings of the event dispatcher in this specific scenario.
Below is the interface detailing the event map:
https://i.sstatic.net/FwMrH3Vo.png
Here is the snippet of 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();
});
My expectation is to have something similar to:
controller1.addEventListener('sandbox:doubleClick', (e) => console.log(e))where the controller can be XRTargetRaySpace, XRGripSpace, or XRHandSpace.