3d tooltip

frontend/components/model/ModelViewer.tsx

@@ -17,18 +17,20 @@ import {
   InstancedMesh,
   Animation,
   CubicEase,
-  EasingFunction,
-  Matrix,
-  Viewport,
+  EasingFunction, 
   ImportMeshAsync,
+  PointerEventTypes,
+  PointerInfo,
 } from '@babylonjs/core'
 import '@babylonjs/loaders'
 
+import SceneToolbar from './SceneToolbar';
 import LoadingSpinner from '../ui/LoadingSpinner'
 
 
 export interface ModelViewerProps {
   modelPath: string
+  onSelectModel: (path: string) => void;
   onModelLoaded?: (modelData: {
     meshes: AbstractMesh[]
     boundingBox: {
@@ -43,6 +45,7 @@ export interface ModelViewerProps {
 
 const ModelViewer: React.FC<ModelViewerProps> = ({
   modelPath,
+  onSelectModel,
   onModelLoaded,
   onError,
   focusSensorId,
@@ -62,6 +65,142 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   const [overlayPos, setOverlayPos] = useState<{ left: number; top: number } | null>(null)
   const [overlayData, setOverlayData] = useState<{ name?: string; sensorId?: string } | null>(null)
   const [modelReady, setModelReady] = useState(false)
+  const [panActive, setPanActive] = useState(false);
+
+  const handlePan = () => setPanActive(!panActive);
+
+  useEffect(() => {
+    const scene = sceneRef.current;
+    const camera = scene?.activeCamera as ArcRotateCamera;
+    const canvas = canvasRef.current;
+
+    if (!scene || !camera || !canvas) {
+      return;
+    }
+
+    let observer: any = null;
+
+    if (panActive) { 
+      camera.detachControl();
+
+      observer = scene.onPointerObservable.add((pointerInfo: PointerInfo) => {
+        const evt = pointerInfo.event;
+
+        if (evt.buttons === 1) {
+          camera.inertialPanningX -= evt.movementX / camera.panningSensibility;
+          camera.inertialPanningY += evt.movementY / camera.panningSensibility;
+        }
+        else if (evt.buttons === 2) {
+          camera.inertialAlphaOffset -= evt.movementX / camera.angularSensibilityX;
+          camera.inertialBetaOffset -= evt.movementY / camera.angularSensibilityY;
+        }
+      }, PointerEventTypes.POINTERMOVE);
+
+    } else {
+      camera.detachControl();
+      camera.attachControl(canvas, true);
+    }
+
+    return () => {
+      if (observer) {
+        scene.onPointerObservable.remove(observer);
+      }
+      if (!camera.isDisposed() && !camera.inputs.attachedToElement) {
+        camera.attachControl(canvas, true);
+      }
+    };
+  }, [panActive, sceneRef, canvasRef]);
+
+  const handleZoomIn = () => {
+     const camera = sceneRef.current?.activeCamera as ArcRotateCamera
+     if (camera) {
+       sceneRef.current?.stopAnimation(camera)
+       const ease = new CubicEase()
+       ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT)
+ 
+       const frameRate = 60
+       const durationMs = 300
+       const totalFrames = Math.round((durationMs / 1000) * frameRate)
+ 
+       const currentRadius = camera.radius
+       const targetRadius = Math.max(camera.lowerRadiusLimit ?? 0.1, currentRadius * 0.8)
+ 
+       Animation.CreateAndStartAnimation(
+         'zoomIn',
+         camera,
+         'radius',
+         frameRate,
+         totalFrames,
+         currentRadius,
+         targetRadius,
+         Animation.ANIMATIONLOOPMODE_CONSTANT,
+         ease
+       )
+     }
+   }
+    const handleZoomOut = () => {
+     const camera = sceneRef.current?.activeCamera as ArcRotateCamera
+     if (camera) {
+       sceneRef.current?.stopAnimation(camera)
+       const ease = new CubicEase()
+       ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT)
+ 
+       const frameRate = 60
+       const durationMs = 300
+       const totalFrames = Math.round((durationMs / 1000) * frameRate)
+ 
+       const currentRadius = camera.radius
+       const targetRadius = Math.min(camera.upperRadiusLimit ?? Infinity, currentRadius * 1.2)
+ 
+       Animation.CreateAndStartAnimation(
+         'zoomOut',
+         camera,
+         'radius',
+         frameRate,
+         totalFrames,
+         currentRadius,
+         targetRadius,
+         Animation.ANIMATIONLOOPMODE_CONSTANT,
+         ease
+       )
+     }
+   }
+    const handleTopView = () => {
+      const camera = sceneRef.current?.activeCamera as ArcRotateCamera;
+      if (camera) {
+        sceneRef.current?.stopAnimation(camera);
+        const ease = new CubicEase();
+        ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT);
+
+        const frameRate = 60;
+        const durationMs = 500;
+        const totalFrames = Math.round((durationMs / 1000) * frameRate);
+
+        Animation.CreateAndStartAnimation(
+          'topViewAlpha',
+          camera,
+          'alpha',
+          frameRate,
+          totalFrames,
+          camera.alpha,
+          Math.PI / 2,
+          Animation.ANIMATIONLOOPMODE_CONSTANT,
+          ease
+        );
+
+        Animation.CreateAndStartAnimation(
+          'topViewBeta',
+          camera,
+          'beta',
+          frameRate,
+          totalFrames,
+          camera.beta,
+          0,
+          Animation.ANIMATIONLOOPMODE_CONSTANT,
+          ease
+        );
+      }
+    };
   
 
   useEffect(() => {
@@ -165,6 +304,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
       setLoadingProgress(0)
       setShowModel(false)
       setModelReady(false)
+      setPanActive(false)
        
       const oldMeshes = sceneRef.current.meshes.slice();
       const activeCameraId = sceneRef.current.activeCamera?.uniqueId;
@@ -263,8 +403,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
           setIsLoading(false)
         }
       } catch (error) {
-        clearInterval(progressInterval)
-        // Only report error if this loading is still relevant
+        clearInterval(progressInterval) 
         if (!isDisposedRef.current && modelPath === currentModelPath) {
           console.error('Error loading GLTF model:', error)
           const errorMessage = error instanceof Error ? error.message : String(error)
@@ -409,34 +548,6 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
     }
   }, [focusSensorId, modelReady])
 
-  useEffect(() => {
-    const scene = sceneRef.current
-    if (!scene || isDisposedRef.current) return
-    const observer = scene.onAfterRenderObservable.add(() => {
-      const chosen = chosenMeshRef.current
-      if (!chosen) return
-      
-      try {
-        const engine = scene.getEngine()
-        const cam = scene.activeCamera
-        if (!cam) return
-        
-        const center = chosen.getBoundingInfo().boundingBox.centerWorld
-        const world = Matrix.IdentityReadOnly
-        const transform = scene.getTransformMatrix()
-        const viewport = new Viewport(0, 0, engine.getRenderWidth(), engine.getRenderHeight())
-        const projected = Vector3.Project(center, world, transform, viewport)
-        setOverlayPos({ left: projected.x, top: projected.y })
-      } catch (error) {
-        console.warn('[ModelViewer] Error updating overlay position:', error)
-        setOverlayPos(null)
-      }
-    })
-    return () => {
-      scene.onAfterRenderObservable.remove(observer)
-    }
-  }, [])
-
   return (
     <div className="w-full h-screen relative bg-gray-900 overflow-hidden">
       {!modelPath ? (
@@ -482,6 +593,14 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
               </div>
             </div>
           )}
+          <SceneToolbar 
+            onZoomIn={handleZoomIn}
+            onZoomOut={handleZoomOut}
+            onTopView={handleTopView}
+            onPan={handlePan}
+            onSelectModel={onSelectModel}
+            panActive={panActive}
+          />
         </>
       )}
       {renderOverlay