simplify raycaster calculations

RodrigoHamuy · web-flow · commit bd62ef9ce631 · 2023-07-20T17:51:20.000+01:00
diff --git a/.changeset/strange-walls-repeat.md b/.changeset/strange-walls-repeat.md
@@ -0,0 +1,5 @@
+---
+"react-three-map": patch
+---
+
+asdsd
diff --git a/src/core/create-events.ts b/src/core/create-events.ts
@@ -1,5 +1,5 @@
 import { Events, RenderProps, RootState, createEvents as createFiberEvents } from "@react-three/fiber";
-import { PerspectiveCamera } from "three";
+import { Matrix4 } from "three";
 import { UseBoundStore } from "zustand";
 
 type DomEvent = PointerEvent | MouseEvent | WheelEvent;
@@ -17,17 +17,12 @@ const DOM_EVENTS = {
   onLostPointerCapture: ["lostpointercapture", true],
 } as const;
 
-const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
+const projByViewInv = new Matrix4()
 
 /** ThreeLayer event manager for MapLibre and Mapbox */
 export function createEvents(): RenderProps<HTMLCanvasElement>["events"] {
   return (store: UseBoundStore<RootState>) => {
     const { handlePointer } = createFiberEvents(store);
-    const rayCamera = new PerspectiveCamera();
-    rayCamera.position.z = 5
-    rayCamera.matrixAutoUpdate = false;
-    rayCamera.matrixWorldAutoUpdate = false;
-    rayCamera.lookAt(0, 0, 0)
 
     return {
       priority: 1,
@@ -38,21 +33,13 @@ export function createEvents(): RenderProps<HTMLCanvasElement>["events"] {
         state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;
         state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;
 
-        rayCamera.copy(state.camera as PerspectiveCamera);
-
-        const projByViewInv = rayCamera.userData.projByViewInv || identity;
-
-        rayCamera.matrix.identity();
-        rayCamera.matrixWorld.identity();
-        rayCamera.matrixWorldInverse.copy(rayCamera.matrixWorld).invert();
-        rayCamera.projectionMatrixInverse.fromArray(projByViewInv)
-        rayCamera.projectionMatrix.fromArray(rayCamera.userData.projByView)
+        if(state.camera.userData.projByViewInv) projByViewInv.fromArray(state.camera.userData.projByViewInv);
 
         state.raycaster.camera = state.camera;
-        state.raycaster.ray.origin.setScalar(0).applyMatrix4(rayCamera.projectionMatrixInverse);
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);
         state.raycaster.ray.direction
           .set(state.pointer.x, state.pointer.y, 1)
-          .applyMatrix4(rayCamera.projectionMatrixInverse)
+          .applyMatrix4(projByViewInv)
           .sub(state.raycaster.ray.origin)
           .normalize();
       },
diff --git a/stories/package.json b/stories/package.json
@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
-    "react-three-map": "^0.3.5",
+    "react-three-map": "^0.4.1",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
     "web-ifc-three": "^0.0.125"
diff --git a/stories/src/multi-coordinates.stories.tsx b/stories/src/multi-coordinates.stories.tsx
@@ -37,7 +37,7 @@ export function Default() {
       longitude={green[0]}
       latitude={green[1]}
     >
-      <MyBox position={[0, 1, 0]} color="green" />
+      <MyBox position={[-2, 1, 0]} color="green" />
     </Coordinates>
     <Coordinates
       longitude={purple[0]}
@@ -53,6 +53,7 @@ const MyBox = ({ position, color }: { position: Vector3, color: ColorRepresentat
 
   return <Box
     position={position}
+    onClick={() => hover(!hovered)}
     onPointerOver={() => hover(true)}
     onPointerOut={() => hover(false)}
     scale={hovered ? 1.5 : 1}
diff --git a/stories/yarn.lock b/stories/yarn.lock
@@ -3473,10 +3473,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.3.5.tgz#ca35fba24a81cc84b8252b5d607be390be069b95"
-  integrity sha512-BVji1OgyEf7RxMWuYWuOl3k3Ro1wxJ+NZ+tBtWbzl1jp5QIKkQnOZ+cJOKA5XFr/6OMi2xI8yY9g2WFp2TlMtA==
+react-three-map@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.4.1.tgz#4849aba8d907f1a0782c269f623f81675d144fbb"
+  integrity sha512-ctVVZwhkDH33yjM2r8zQ2URXxK3OimuJJgwTDJBEmuhRMTwqqseGvPPC/enqXhI2KWeGmUKySSeonpDq2LjB4Q==
 
 react-use-measure@^2.1.1:
   version "2.1.1"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-three-map": patch
 +---
++
 +asdsd