Spaces:
No application file
No application file
| import { Canvas } from '@react-three/fiber'; | |
| import { OrbitControls, Stars, Sky, Environment } from '@react-three/drei'; | |
| import Ocean from './components/Ocean'; | |
| import Ship from './components/Ship'; | |
| import FluidField from './components/FluidField'; | |
| import ControlPanel from './components/ControlPanel'; | |
| export default function App() { | |
| return ( | |
| <div className="w-full h-screen relative overflow-hidden bg-[#0a1628]"> | |
| {/* 3D Canvas */} | |
| <Canvas | |
| camera={{ position: [40, 20, 60], fov: 55, near: 0.1, far: 2000 }} | |
| shadows | |
| gl={{ antialias: true, alpha: false }} | |
| style={{ position: 'absolute', inset: 0 }} | |
| > | |
| {/* Lighting */} | |
| <ambientLight intensity={0.3} color="#b0d8ff" /> | |
| <directionalLight | |
| position={[60, 80, 40]} | |
| intensity={1.8} | |
| color="#fff8ee" | |
| castShadow | |
| shadow-mapSize={[2048, 2048]} | |
| /> | |
| <pointLight position={[0, 15, 0]} intensity={0.5} color="#5ec4f0" /> | |
| {/* Sky & Stars */} | |
| <Sky | |
| sunPosition={[100, 40, 20]} | |
| turbidity={10} | |
| rayleigh={2} | |
| mieCoefficient={0.005} | |
| mieDirectionalG={0.8} | |
| /> | |
| <Stars radius={400} depth={60} count={2000} factor={4} /> | |
| {/* Fog for depth */} | |
| <fog attach="fog" args={['#0a1628', 100, 500]} /> | |
| {/* Scene objects */} | |
| <Ocean /> | |
| <Ship /> | |
| <FluidField /> | |
| {/* Navigation grid lines (seabed visual aid) */} | |
| <gridHelper args={[200, 40, '#0d2137', '#0d2137']} position={[0, -12, 0]} /> | |
| {/* Controls */} | |
| <OrbitControls | |
| target={[0, 0, 0]} | |
| maxPolarAngle={Math.PI / 2.1} | |
| minDistance={15} | |
| maxDistance={300} | |
| enablePan={true} | |
| enableDamping | |
| dampingFactor={0.05} | |
| /> | |
| </Canvas> | |
| {/* UI overlay */} | |
| <ControlPanel /> | |
| {/* Bottom legend */} | |
| <div className="absolute bottom-4 right-4 text-[10px] text-blue-600 font-mono text-right leading-relaxed select-none"> | |
| <p>Ecuaciones: Navier-Stokes (Gerstner + N-S pressure)</p> | |
| <p>IA: Mistral-7B via Hugging Face Inference API</p> | |
| <p>Resistencia: ITTC-57 + Michell (Froude)</p> | |
| <p className="mt-1 text-blue-800">🖱 Click + Arrastre = Orbitar · Scroll = Zoom</p> | |
| </div> | |
| </div> | |
| ); | |
| } | |