fix: allow 3d orbit during hotspot placement

components/canvas/world3d/World3DViewer.tsx

@@ -1106,6 +1106,7 @@ function WorldSplatScene({
   const camera = useThree((state) => state.camera);
   const renderer = useThree((state) => state.gl);
   const orbitControlsRef = useRef<any>(null);
+  const hotspotPointerDownRef = useRef<{ x: number; y: number } | null>(null);
   const hasAppliedInitialViewRef = useRef(false);
   const lastCameraPoseRef = useRef<WorldCameraPose | null>(null);
   const lastResetViewTokenRef = useRef<number | undefined>(resetViewToken);
@@ -1365,8 +1366,32 @@ function WorldSplatScene({
     sparkRenderer.dirty = true;
   });
 
-  const handlePointerDown = (event: ThreeEvent<PointerEvent>) => {
+  useEffect(() => {
+    hotspotPointerDownRef.current = null;
+  }, [interactionMode, splatUrl]);
+
+  const handleHotspotPointerDown = (event: ThreeEvent<PointerEvent>) => {
     if (interactionMode !== "hotspot") return;
+    hotspotPointerDownRef.current = {
+      x: event.nativeEvent.clientX,
+      y: event.nativeEvent.clientY,
+    };
+  };
+
+  const handleHotspotPointerMove = (event: ThreeEvent<PointerEvent>) => {
+    if (interactionMode !== "hotspot" || !hotspotPointerDownRef.current) return;
+    const deltaX = event.nativeEvent.clientX - hotspotPointerDownRef.current.x;
+    const deltaY = event.nativeEvent.clientY - hotspotPointerDownRef.current.y;
+    if (Math.hypot(deltaX, deltaY) > 6) {
+      hotspotPointerDownRef.current = null;
+    }
+  };
+
+  const handleHotspotClick = (event: ThreeEvent<MouseEvent>) => {
+    if (interactionMode !== "hotspot") return;
+    const pointerDown = hotspotPointerDownRef.current;
+    hotspotPointerDownRef.current = null;
+    if (!pointerDown) return;
     event.stopPropagation();
     onPick?.({
       point: [event.point.x, event.point.y, event.point.z],
@@ -1387,7 +1412,12 @@ function WorldSplatScene({
       ) : null}
       <Suspense fallback={null}>
         <primitive object={sparkRenderer}>
-          <primitive object={splatMesh} onPointerDown={handlePointerDown} />
+          <primitive
+            object={splatMesh}
+            onClick={handleHotspotClick}
+            onPointerDown={handleHotspotPointerDown}
+            onPointerMove={handleHotspotPointerMove}
+          />
         </primitive>
       </Suspense>
       {particleCloudData ? <SplatParticleCloud data={particleCloudData} phase={revealPhase} /> : null}