Ejemplo de proyecto · Integración web y 3D moderna

Navegador interactivo de viviendas – desde la selección 3D hasta la vista detallada

Para un proyecto inmobiliario se desarrolló un navegador web reutilizable que combina selección 3D interactiva con listas de viviendas, filtros, variantes, planos e información detallada.

El widget está diseñado para escritorio y móvil, puede integrarse de forma aislada en sitios web existentes y puede cargar datos y recursos del proyecto desde otros dominios.

Navegador interactivo de viviendas con vista 3D del edificio, filtros y detalles de las viviendas

3D, lógica funcional e integración web en un solo widget

La vista 3D no es solo una visualización: las viviendas pueden seleccionarse directamente en el edificio. La vista 3D, la lista, el detalle y la API pública del widget utilizan el mismo estado central para mantener coherentes la selección, los filtros, las variantes y los estados.

La implementación técnica incluye Vue 3, TypeScript, Vite, Pinia, Three.js y Gaussian Splat, además de aislamiento mediante Shadow DOM para una integración segura en sitios web externos. La arquitectura, el modelo de datos, el comportamiento responsive, la integración entre dominios, las pruebas, la depuración y el despliegue estuvieron bajo mi responsabilidad técnica.

Qué demuestra técnicamente el proyecto

Frontend con Vue 3 y TypeScript, con un estado central en Pinia para selección, filtros, ordenación, vistas y cambio de proyecto.
Selección 3D interactiva con Three.js, Gaussian Splat y geometrías GLB separadas para mapeo y selección.
Sincronización entre 3D, lista de viviendas, vista de detalle y API JavaScript pública sin estados paralelos.
Widget IIFE integrable con Shadow DOM propio para evitar conflictos de CSS con el sitio web anfitrión.
Interfaces responsive para escritorio y móvil, además de carga entre dominios del widget, datos del proyecto y recursos.
Validación de proyectos, 12 pruebas de regresión, comprobación de TypeScript y verificación del build como parte fija del proceso de producción.

¿Tiene previsto un proyecto similar de web, integración o 3D?

Si un sitio web, una aplicación empresarial o una visualización existente necesita una interfaz interactiva moderna, podemos aclarar primero sin compromiso el enfoque técnico más adecuado.