Atomo Editor

Atomo Editor es un editor 3D que corre en el navegador para construir modelos de átomos: núcleo con protones y neutrones, capas de electrones que orbitan y orbitales s, p, d y f. Se puede montar un modelo a mano con el ratón o generarlo con un pequeño lenguaje de scripts, y luego compartirlo con un enlace que abre directamente en modo presentación.

Qué hace

• Primitivas 3D (esfera, cubo, cilindro, cono, icosaedro, plano) y formas de orbital s, p, d y f.
• Generadores de núcleo y de capas de electrones, con electrones animados que siguen la trayectoria de su orbital.
• Nubes de partículas y esferas con oleaje animado para representar la densidad electrónica.
• Gizmos para mover, rotar y escalar con ajuste a la cuadrícula, multiselección, grupos anidados y panel de capas.
• Animación por keyframes con línea de tiempo, incluidos grupos animables y traspaso de electrones entre capas.
• Editor de scripts con funciones como nucleo, orbital, atomo y capas para generar modelos completos en pocas líneas.
• Modo visualizador sin interfaz, con HUD del elemento y su configuración electrónica (1s² 2s² 2p⁶).
• Compartir el modelo con un enlace que lleva la escena comprimida en la URL, más exportación e importación de archivos .atomo.

Cómo funciona

La escena se renderiza con Three.js a través de React Three Fiber, con bloom tipo UnrealBloomPass y ajustes de exposición y emisión. El estado vive en Zustand con selectores granulares para que solo se repinte lo que cambia. Para compartir, el modelo y la configuración gráfica se comprimen con lz-string dentro del fragmento de la URL, así que no hace falta backend.

Retos

• Mantener la fluidez en móviles de gama baja: resolución adaptativa, geometría reducida, render bajo demanda y bloom desactivado en calidad baja.
• Ordenar el render de objetos transparentes para que las esferas se vean dentro de las nubes de onda.
• Que los enlaces compartidos funcionen igual en todos los navegadores, lo que llevó a guardar los datos en el fragmento # en lugar de en la query.