🚀 Auto-deploy: BrainWind atualizado em 12/07/2026 16:37:46

app/src/components/SceneCanvas.tsx

@@ -2,7 +2,10 @@ import { useEffect, type ReactNode } from 'react';
 import { Canvas, type CanvasProps } from '@react-three/fiber';
 import { isWebGLSupported } from '../lib/webgl-detect';
 import { useCaptureStore } from '../store/captureStore';
+import { useViewerStore } from '../store/viewerStore';
 import WebglErrorBoundary from './WebglErrorBoundary';
+import { Lock, Unlock } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip';
 
 interface SceneCanvasProps extends CanvasProps {
   fallback: ReactNode;
@@ -57,14 +60,35 @@ export default function SceneCanvas({ fallback, style, className, ...rest }: Sce
     );
   }
 
+  const { isLocked, toggleLock } = useViewerStore();
+
   return (
     <div
-      style={{ width: '100%', height: '100%', minHeight: '500px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', ...style }}
+      style={{ width: '100%', height: '100%', minHeight: '500px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', position: 'relative', ...style }}
       className={`${className ?? ''} glass-panel`}
     >
       <WebglErrorBoundary fallback={fallback}>
         <CanvasInner {...rest} fallback={fallback} />
       </WebglErrorBoundary>
+      
+      <div className="absolute bottom-4 right-4 z-20">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={toggleLock}
+                className="flex items-center justify-center w-10 h-10 rounded-full bg-background/80 hover:bg-background border border-border shadow-sm backdrop-blur-md transition-colors"
+                aria-label={isLocked ? 'Destravar visualização 3D' : 'Travar visualização 3D'}
+              >
+                {isLocked ? <Lock className="w-5 h-5 text-destructive" /> : <Unlock className="w-5 h-5 text-muted-foreground" />}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              <p>{isLocked ? 'Destravar rotação' : 'Travar rotação'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </div>
   );
 }

app/src/components/Warehouse3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './three/ViewerOrbitControls';
 import * as THREE from 'three';
 import { useGalpaoStore } from '../store/galpaoStore';
 import { useWindStore } from '../store/appStore';

app/src/components/three/Bar3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Bridge3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Cylinder3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Dome3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Dynamics3D.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/IsolatedRoof3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Sign3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/Tower3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import { WindArrow } from './WindArrow';

app/src/components/three/Vault3D.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
+import { Grid, Environment, Text } from '@react-three/drei';
+import { ViewerOrbitControls as OrbitControls } from './ViewerOrbitControls';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';

app/src/components/three/ViewerOrbitControls.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { OrbitControls } from '@react-three/drei';
+import { useViewerStore } from '@/store/viewerStore';
+
+type OrbitControlsProps = React.ComponentProps<typeof OrbitControls>;
+
+export const ViewerOrbitControls: React.FC<OrbitControlsProps> = (props) => {
+  const isLocked = useViewerStore((state) => state.isLocked);
+  
+  return <OrbitControls enabled={!isLocked} {...props} />;
+};

app/src/store/viewerStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ViewerState {
+  isLocked: boolean;
+  toggleLock: () => void;
+}
+
+export const useViewerStore = create<ViewerState>((set) => ({
+  isLocked: false,
+  toggleLock: () => set((state) => ({ isLocked: !state.isLocked })),
+}));