🚀 Auto-deploy: BrainWind atualizado em 01/09/2026 14:55:28

app/src/components/three/Shelter3D.tsx

@@ -138,24 +138,58 @@ function ShelterModel({
       {/* Parede Lateral Direita (X = +halfW) */}
       {renderWallWithGap(depth, height, rightClosure, 'distributed', Math.PI / 2, [halfW, 0, 0])}
 
-      {/* Seta de Vento Global (Sempre visível para não pular de posição) */}
+      {/* Setas de Vento Global (0°, 45°, 90°) */}
-      <group>
+      {[
-        <GlobalWindArrow 
+        {
-          target={[0, height * 1.5 - 1.5, -halfD - 8 + 2]}
+          angle: 0,
-          direction={[0, 0, 1]}
+          label: 'Vento 0°',
-          scale={3.2}
+          target: [0, height * 1.5 - 1.5, -halfD - 4] as [number, number, number],
-        />
+          direction: [0, 0, 1] as [number, number, number],
-        <Text
+          textPos: [0, height * 1.5, -halfD - 6] as [number, number, number],
-          position={[0, height * 1.5, -halfD - 8]}
+          textRot: [0, Math.PI, 0] as [number, number, number],
-          rotation={[0, Math.PI, 0]}
+        },
-          fontSize={0.96}
+        {
-          color={isDark ? '#60a5fa' : '#2563eb'}
+          angle: 45,
-          anchorX="center"
+          label: 'Vento 45°',
-          anchorY="bottom"
+          target: [-halfW - 3, height * 1.5 - 1.5, -halfD - 3] as [number, number, number],
-        >
+          direction: [0.707, 0, 0.707] as [number, number, number],
-          Vento
+          textPos: [-halfW - 5, height * 1.5, -halfD - 5] as [number, number, number],
-        </Text>
+          textRot: [0, Math.PI * 0.75, 0] as [number, number, number],
-      </group>
+        },
+        {
+          angle: 90,
+          label: 'Vento 90°',
+          target: [-halfW - 4, height * 1.5 - 1.5, 0] as [number, number, number],
+          direction: [1, 0, 0] as [number, number, number],
+          textPos: [-halfW - 6, height * 1.5, 0] as [number, number, number],
+          textRot: [0, Math.PI / 2, 0] as [number, number, number],
+        }
+      ].map((arrow) => {
+        const isActive = windAngle === arrow.angle;
+        const arrowColor = isActive ? (isDark ? '#60a5fa' : '#2563eb') : (isDark ? '#475569' : '#94a3b8');
+        return (
+          <group key={`wind-${arrow.angle}`}>
+            <GlobalWindArrow 
+              target={arrow.target}
+              direction={arrow.direction}
+              scale={isActive ? 3.2 : 2.0}
+              color={arrowColor}
+              opacity={isActive ? 1 : 0.3}
+            />
+            <Text
+              position={arrow.textPos}
+              rotation={arrow.textRot}
+              fontSize={isActive ? 0.96 : 0.75}
+              color={arrowColor}
+              fillOpacity={isActive ? 1 : 0.5}
+              anchorX="center"
+              anchorY="bottom"
+            >
+              {arrow.label}
+            </Text>
+          </group>
+        );
+      })}
 
       {/* Partículas de Ar */}
       {isAirflow && (

app/src/components/three/WindArrow.tsx

@@ -8,11 +8,14 @@ export interface WindArrowProps {
   direction: THREE.Vector3 | [number, number, number];
   /** Fator de escala da seta (default: 1) */
   scale?: number;
+  /** Cor da seta */
+  color?: string;
+  /** Opacidade da seta (0 a 1) */
+  opacity?: number;
 }
 
-export function WindArrow({ target, direction, scale = 1 }: WindArrowProps) {
+export function WindArrow({ target, direction, scale = 1, color = '#3b82f6', opacity = 1 }: WindArrowProps) {
   const length = 2.5 * scale; // Tamanho visual fixo
-  const color = '#3b82f6'; // Azul padrão do vento
 
   const targetVec = target instanceof THREE.Vector3 ? target : new THREE.Vector3(...target);
   const dirVec = direction instanceof THREE.Vector3 ? direction : new THREE.Vector3(...direction);
@@ -46,13 +49,13 @@ export function WindArrow({ target, direction, scale = 1 }: WindArrowProps) {
       {shaftLength > 0 && (
         <mesh position={midPoint.toArray()} rotation={rotation} castShadow>
           <cylinderGeometry args={[shaftRadius, shaftRadius, shaftLength, 12]} />
-          <meshStandardMaterial color={color} />
+          <meshStandardMaterial color={color} transparent={opacity < 1} opacity={opacity} />
         </mesh>
       )}
       {/* Ponta da seta (cone) */}
       <mesh position={[end.x, end.y, end.z]} rotation={rotation} castShadow>
         <coneGeometry args={[headRadius, headLen, 12]} />
-        <meshStandardMaterial color={color} />
+        <meshStandardMaterial color={color} transparent={opacity < 1} opacity={opacity} />
       </mesh>
     </group>
   );