feat: dispatch clicks on the 3d models to the canvases

app/pages/index.vue

@@ -6,6 +6,26 @@ const screen = computed(() => route.query.screen as string | undefined);
 
 const topScreen = useTemplateRef("topScreen");
 const bottomScreen = useTemplateRef("bottomScreen");
+
+const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
+const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
+
+const handleScreenClick = (
+  canvas: HTMLCanvasElement | null,
+  x: number,
+  y: number,
+) => {
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  const clickEvent = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    clientX: (x / SCREEN_WIDTH) * rect.width + rect.left,
+    clientY: (y / SCREEN_HEIGHT) * rect.height + rect.top,
+  });
+  canvas.dispatchEvent(clickEvent);
+};
 </script>
 
 <template>
@@ -18,9 +38,13 @@ const bottomScreen = useTemplateRef("bottomScreen");
       <TresDirectionalLight />
 
       <NDS
-        v-if="topScreen && bottomScreen"
-        :top-screen-canvas="topScreen.canvas"
-        :bottom-screen-canvas="bottomScreen.canvas"
+        v-if="topScreenCanvas && bottomScreenCanvas"
+        :top-screen-canvas="topScreenCanvas"
+        :bottom-screen-canvas="bottomScreenCanvas"
+        @top-screen-click="(x, y) => handleScreenClick(topScreenCanvas, x, y)"
+        @bottom-screen-click="
+          (x, y) => handleScreenClick(bottomScreenCanvas, x, y)
+        "
       />
     </TresCanvas>