Spaces:
No application file
No application file
| import { useRef } from 'react'; | |
| import { useFrame } from '@react-three/fiber'; | |
| import * as THREE from 'three'; | |
| import { useStore } from '../store'; | |
| // Visual representation of the fluid field (Navier-Stokes snapshot from backend) | |
| export default function FluidField() { | |
| const { fluidField } = useStore(); | |
| const groupRef = useRef<THREE.Group>(null); | |
| useFrame(({ clock }) => { | |
| if (!groupRef.current) return; | |
| groupRef.current.children.forEach((child, i) => { | |
| const mesh = child as THREE.Mesh; | |
| // Subtle pulsing animation on field cells | |
| mesh.position.y = mesh.userData.baseY + Math.sin(clock.elapsedTime * 2 + i) * 0.05; | |
| }); | |
| }); | |
| if (!fluidField || fluidField.length === 0) return null; | |
| const N = Math.sqrt(fluidField.length); | |
| const spacing = 1.2; | |
| const offset = (N * spacing) / 2; | |
| return ( | |
| <group ref={groupRef} position={[30, 0, 0]}> | |
| {fluidField.map((elevation, idx) => { | |
| const col = idx % N; | |
| const row = Math.floor(idx / N); | |
| const x = col * spacing - offset; | |
| const z = row * spacing - offset; | |
| const y = elevation; | |
| const intensity = Math.abs(elevation); | |
| return ( | |
| <mesh | |
| key={idx} | |
| position={[x, y, z]} | |
| userData={{ baseY: y }} | |
| > | |
| <boxGeometry args={[0.9, Math.max(0.05, intensity * 2), 0.9]} /> | |
| <meshStandardMaterial | |
| color={new THREE.Color().setHSL( | |
| 0.55 - intensity * 0.15, | |
| 0.8, | |
| 0.3 + intensity * 0.3 | |
| )} | |
| transparent | |
| opacity={0.75} | |
| wireframe={false} | |
| /> | |
| </mesh> | |
| ); | |
| })} | |
| {/* Label */} | |
| <mesh position={[0, 5, 0]}> | |
| <planeGeometry args={[12, 1.5]} /> | |
| <meshBasicMaterial color="#0a2040" /> | |
| </mesh> | |
| </group> | |
| ); | |
| } | |