Una maqueta arquitectónica para explorar proyectos.
Este es un portafolio digital para una arquitecta. Los edificios de una maqueta 3D explorable representan proyectos arquitectónicos y permiten navegar por la colección.
Mi contribución es el software y la experiencia interactiva. Los proyectos arquitectónicos son obra de la arquitecta, no mía.
Ir más allá de una galería de proyectos.
La idea era recorrer el portafolio como una maqueta o ciudad digital. La escena debía ayudar a descubrir proyectos y ofrecer una forma clara de consultar sus detalles y abrir sus páginas individuales.
Del concepto técnico a un prototipo en línea.
Definí el concepto técnico, la arquitectura del frontend y el modelo de datos de los proyectos; después conecté la escena 3D con la interfaz de la aplicación.
- Construir la escena, integrar modelos glTF / GLB e implementar las interacciones con los edificios.
- Coordinar el estado de selección, el movimiento de cámara y la información del proyecto.
- Desarrollar paneles laterales en escritorio, una interfaz inferior en móvil y modales con detalles del proyecto.
- Crear rutas individuales para los proyectos, desplegar la aplicación y corregir problemas de interacción.
La selección conecta la maqueta con la interfaz.
Seleccionar un edificio actualiza el proyecto activo en la interfaz y mueve la cámara para enfocarlo. Los paneles presentan el proyecto, con un modal o vista de detalle y una ruta propia para explorarlo.
La escena y la interfaz comparten el estado de selección para que el edificio, su información y la respuesta de la cámara formen una sola interacción.
Integrar el 3D en la aplicación.
React Three Fiber conecta la escena de Three.js con los componentes de React y el estado de la aplicación. Así, la maqueta funciona como una superficie de navegación integrada.
La exploración de la escena y las URL individuales cumplen necesidades distintas: descubrir proyectos en el espacio o abrir y compartir uno directamente.
En escritorio se utiliza un panel lateral; en móvil, la información se ubica en la parte inferior para adaptar los controles y detalles a una pantalla más pequeña.
La experiencia se despliega por separado de este portafolio. Su código de Three.js y sus modelos 3D se cargan únicamente al abrir la demo externa.
Los detalles de interacción hacen usable la maqueta.
El trabajo incluyó corregir parpadeos al pasar el cursor y seleccionar, coordinar el movimiento de cámara con el proyecto seleccionado y evitar la navegación por debajo del suelo.
Otros retos fueron sincronizar la selección 3D con el estado de la interfaz, adaptar paneles y modales a distintos tamaños de pantalla y manejar los modelos 3D manteniendo una interacción usable en móvil.
En línea y en desarrollo continuo.
El prototipo se puede explorar en línea. Integra una maqueta interactiva, selección de proyectos, paneles de información y rutas individuales.
La experiencia sigue en desarrollo activo. Es un prototipo en línea; el catálogo completo de proyectos de la arquitecta aún no se presenta como terminado.
Tecnologías
- Next.js
- React
- TypeScript
- Three.js
- React Three Fiber
- Drei
- glTF / GLB