🌌 Trasteando con Three.js

Una simulación de partículas en 3D hecha con Three.js, React, TypeScript y Tailwind CSS.

✨ Características

• 3000 partículas dinámicas en tiempo real con Three.js
• Física interactiva: Gravedad y colisiones simuladas
• Interactividad con mouse: Rota la vista moviendo el cursor
• Ciclo de vida de partículas: Nacimiento, envejecimiento y muerte
• Gradientes de color: Partículas con colores que varían de azul a púrpura
• Interfaz moderna: Paneles de control con Tailwind CSS
• Responsive: Adaptable a cualquier tamaño de pantalla
• Renderizado optimizado: 60 FPS con WebGL

🚀 Tecnologías

• Three.js - Motor gráfico 3D
• React 18 - Framework UI
• TypeScript - Tipado estático
• Vite - Build tool ultrarrápido
• Tailwind CSS - Utilidades CSS
• WebGL - Renderización acelerada por GPU

📦 Instalación y Ejecución

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Compilar para producción
npm run build

# Vista previa de compilación
npm run preview

🎮 Controles

Acción	Descripción
Mover Mouse	Rota la vista 3D alrededor de las partículas
Ventana Activa	Las partículas interactúan en tiempo real

🏗️ Estructura del Proyecto

src/
├── components/
│   ├── ThreeScene.tsx      # Escena 3D principal con partículas
│   └── ControlPanel.tsx     # Panel de controles e información
├── App.tsx                  # Componente raíz
├── App.css                  # Estilos globales
└── index.css               # Estilos base + Tailwind

🔧 Características Técnicas

Sistema de Partículas

• 3000 partículas renderizadas con PointsMaterial
• Física realista: Gravedad, velocidad inicial, aceleración
• Ciclo de vida: Nacimiento, envejecimiento y reinicio automático
• Colores dinámicos: Basados en HSL con gradientes azul-púrpura-rosa

Interactividad

• Control con mouse: Rotación suave de la escena
• Actualizaciones en tiempo real: 60 FPS objetivo
• Responsive: Adaptación automática a cambios de tamaño de ventana

Interfaz

• Paneles de control flotantes con diseño glassmorphism
• Estadísticas en vivo
• Información interactiva

📊 Performance

• Partículas: 3,000 objetos simultáneamente
• FPS Target: 60 fps
• Renderer: WebGL optimizado
• Memory: Gestión eficiente de geometrías y materiales

🎨 Paleta de Colores

• Fondo oscuro: #050812 (Darker)
• Paneles: #0a0e27 (Dark) con semi-transparencia
• Acentos: Gradientes de azul (#6600ff) a púrpura

💡 Cómo Funciona

1. Three.js renderiza la escena 3D con WebGL
2. React gestiona el estado y la interfaz de usuario
3. Tailwind CSS estiliza los paneles y componentes UI
4. requestAnimationFrame sincroniza la animación a 60 FPS
5. El mouse controla la rotación de la escena en tiempo real

🚀 Mejoras Futuras

• Interacción con clics del mouse para afectar partículas
• Múltiples modos de simulación (explosión, vórtice, galaxia)
• Controles deslizantes para velocidad y gravedad en tiempo real
• Guardado de parámetros en localStorage
• Sonido y efectos de audio reactivos
• Exportación de frames/video
• Modo oscuro/claro
• Configuración de cantidad de partículas

📝 Notas de Desarrollo

• El sistema se auto-reinicia cuando las partículas envejecen
• La gravedad solo afecta el eje Y (velocidad negativa)
• Los colores varían automáticamente durante el ciclo de vida
• La escena se auto-ajusta al redimensionar la ventana
• WebGL requiere un navegador moderno (Chrome, Firefox, Safari, Edge)

📄 Licencia

MIT - Libre para usar, modificar y distribuir

---

Hecho con ❤️ usando Three.js + React + Tailwind CSS import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ])