Nuestra Historia: SPA 

Este proyecto tiene un significado especial para mí porque nació del deseo de crear algo único. Me recuerda que programar no solo sirve para crear soluciones comerciales o generar ingresos, sino también como una forma de aprender y construir espacios digitales que honren a las personas que queremos.

¿Qué es Nuestra Historia?

Nuestra Historia es una Simple Page Aplication (SPA) que incluye:

• Reproductor de música con canciones significativas.
• Render de modelo 3D en tiempo real desde el navegador.
• Manifest, lo que permite instalarla como una aplicación nativa.

Todo esto utilizando Three.js y React. Además, aunque no utiliza un CMS tradicional, el proyecto incluye un archivo JSON interno que funciona como fuente de la verdad, permitiendo agregar y editar información de manera sencilla.

Visualización 3D con Three.js

El proyecto integra Three.js, una librería que permite renderizar modelos y efectos 3D directamente en el navegador.

Reproductor de Música Integrado

En la barra de navegación se encuentra un reproductor de música que utiliza el hook useState de React para controlar la reproducción de manera simple.

¿Qué aprendí con este proyecto?

Gran parte de los conocimientos para realizar este proyecto los adquirí en un curso sobre Three.js sin embargo aquí fui más allá y me enfrenté particularmente a un desafío: optimizar el renderizado del modelo 3D sin afectar la experiencia del usuario.

Optimización de Rendimiento

Uno de los principales desafíos técnicos fue optimizar el rendimiento del modelo 3D:

• Problema inicial: Al usar frameloop establecido en always (valor por defecto) causaba caídas de rendimiento al desplazarse hacia abajo, haciendo que la página se volviera lenta.
• Alternativa problemática: Establecer la propiedad en demand, el efecto de nieve desaparecía tras algunos segundos.

Solución implementada: Utilicé la API de Intersection Observer de JavaScript para detectar dinámicamente cuándo el modelo 3D está visible en pantalla:

• Cuando el modelo no está visible: frameloop se establece en demand, desactivando el renderizado y ahorrando recursos.
• Cuando el modelo está visible: frameloop se establece en always, garantizando que el efecto de nieve se muestre continuamente.

¿Dónde ver el código?

El código no está disponible ya que está en un repositorio privado sin embargo, puedes ver el proyecto en producción desde el siguiente enlace:
🔗 https://nuestra-historia-xi.vercel.app/

Ahí encontrarás:

• Proyecto funcionando.
• Ideas para inspirarte.

Conclusión

Nuestra Historia lo tiene todo, desarrollo web moderno, ingeniería y una historia que sigue escribiéndose.