feat: adicionar super manual didatico com fluxos 2d e sheet panel

app/src/components/three/Bridge3D.tsx

@@ -3,6 +3,7 @@ import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';
+import { WindArrow } from './WindArrow';
 
 export interface Bridge3DInput {
   /** Maior vão Lₚ (m) */
@@ -21,6 +22,8 @@ export interface Bridge3DInput {
   fxPerLength: number;
   /** Força de sustentação por unidade de comprimento Fz (kN/m) */
   fzPerLength: number;
+  /** Ângulo de ataque do vento (graus) */
+  alpha: number;
 }
 
 function BridgeModel({
@@ -29,8 +32,7 @@ function BridgeModel({
   deckHeight,
   heg,
   cx,
-  fxPerLength,
-  fzPerLength,
+  alpha,
 }: Bridge3DInput) {
   const halfL = lp / 2;
   const halfW = width / 2;
@@ -47,13 +49,6 @@ function BridgeModel({
   // Pilar heights: posicionar 3 pilares ao longo do vão
   const pillarHeights = useMemo(() => [deckY - 0.5, deckY - 0.5, deckY - 0.5], [deckY]);
 
-  // Vetor de força (Fx horizontal)
-  const fxLen = Math.min(Math.max(Math.abs(fxPerLength) * 0.5, 0.3), 4);
-  const fxDir = fxPerLength >= 0 ? 1 : -1;
-  // Vetor de força (Fz vertical)
-  const fzLen = Math.min(Math.max(Math.abs(fzPerLength) * 0.5, 0.3), 4);
-  const fzDir = fzPerLength >= 0 ? 1 : -1;
-
   return (
     <group>
       {/* Tabuleiro (deck) */}
@@ -89,32 +84,15 @@ function BridgeModel({
         <meshStandardMaterial color="#60a5fa" opacity={0.4} transparent roughness={0.3} />
       </mesh>
 
-      {/* Vetor Cx (horizontal) */}
-      <ForceArrow
-        start={[-halfL * 0.6, deckY + deckThickness + 0.3, halfW + 0.5]}
-        direction={[fxDir, 0, 0]}
-        length={fxLen}
-        color="#ef4444"
-      />
-
-      {/* Vetor Cz (vertical) */}
-      <ForceArrow
-        start={[halfL * 0.6, deckY + deckThickness + 0.3, halfW + 0.5]}
-        direction={[0, fzDir, 0]}
-        length={fzLen}
-        color="#3b82f6"
-      />
-
-      {/* Vetor no centro também para destacar */}
-      <ForceArrow
-        start={[0, deckY + deckThickness + 0.3, 0]}
-        direction={[fxDir, 0, 0]}
-        length={fxLen * 0.7}
-        color="#ef4444"
+      {/* Seta de Vento (bate no meio do tabuleiro) */}
+      <WindArrow
+        target={[0, deckY + deckThickness / 2, 0]}
+        direction={[0, Math.sin((alpha * Math.PI) / 180), Math.cos((alpha * Math.PI) / 180)]}
+        scale={4}
       />
       <Text
-        position={[0, deckY + deckThickness + 1.0, 0]}
-        fontSize={0.6}
+        position={[0, deckY + deckThickness + 1.5, 0]}
+        fontSize={1.2}
         color="#1e40af"
         anchorX="center"
         anchorY="bottom"
@@ -125,54 +103,7 @@ function BridgeModel({
   );
 }
 
-function ForceArrow({
-  start,
-  direction,
-  length,
-  color,
-}: {
-  start: [number, number, number];
-  direction: [number, number, number];
-  length: number;
-  color: string;
-}) {
-  const startVec = useMemo(() => new THREE.Vector3(...start), [start]);
-  const dirVec = useMemo(() => new THREE.Vector3(...direction), [direction]);
-  const end = useMemo(
-    () => new THREE.Vector3(
-      startVec.x + dirVec.x * length,
-      startVec.y + dirVec.y * length,
-      startVec.z + dirVec.z * length,
-    ),
-    [startVec, dirVec, length],
-  );
-  const mid = useMemo(
-    () => new THREE.Vector3().addVectors(startVec, end).multiplyScalar(0.5),
-    [startVec, end],
-  );
-  const quat = useMemo(() => {
-    const dir = new THREE.Vector3().subVectors(end, startVec).normalize();
-    const q = new THREE.Quaternion();
-    q.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir);
-    return new THREE.Euler().setFromQuaternion(q);
-  }, [startVec, end]);
-  const headLen = 0.3;
 
-  return (
-    <group>
-      {length - headLen > 0.01 && (
-        <mesh position={mid.toArray()} rotation={[quat.x, quat.y, quat.z]} castShadow>
-          <cylinderGeometry args={[0.06, 0.06, length - headLen, 10]} />
-          <meshStandardMaterial color={color} />
-        </mesh>
-      )}
-      <mesh position={end.toArray()} rotation={[quat.x, quat.y, quat.z]} castShadow>
-        <coneGeometry args={[0.15, headLen, 10]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-    </group>
-  );
-}
 
 export default function Bridge3DViewer(input: Bridge3DInput) {
   const { lp, deckHeight, width } = input;