Construyendo un globo terráqueo 3D para el rastreo de envíos con Gadget

Globo terráqueo 3D para rastreo de envíos con Gadget

14 may 2026 • 2 min read • Q2BSTUDIO Team

Globo terráqueo 3D para rastreo de envíos con Gadget

Desarrollar aplicaciones dentro de entornos altamente restringidos, como el ecosistema de Shopify Shop Minis, representa un reto técnico fascinante que combina visualización 3D, backend serverless y manejo de datos en tiempo real. Un ejemplo concreto es la creación de un globo terráqueo interactivo para rastrear envíos, donde cada paquete se representa como un arco iluminado entre su origen y destino. La solución implica usar Three.js para renderizar la esfera y sus accidentes geográficos, pero con la limitación de que ciertas bibliotecas populares no están aprobadas en ese entorno cerrado, lo que obliga a implementar desde cero el mapeo de una imagen equirrectangular de la Tierra sobre una malla de puntos. El proceso consiste en convertir coordenadas geográficas a píxeles de la textura, detectar zonas de tierra firme usando umbrales de color y colocar puntos instanciados sobre esas posiciones. En paralelo, el backend gestiona la autenticación y el almacenamiento histórico de cada usuario. Aquí es donde plataformas como Gadget ofrecen un Node serverless con PostgreSQL, capaz de validar tokens de Shopify, crear sesiones seguras con JWT y orquestar llamadas a APIs externas como Ship24 para obtener datos de tracking y luego geocodificar las direcciones para convertirlas en coordenadas. Todo ese flujo se integra con el frontend para dibujar arcos animados sobre la esfera, usando curvas de círculo máximo con una elevación sinusoidal, tubos con shaders que revelan progresivamente el trazo y un sprite tipo cometa que marca la cabeza del arco. Este tipo de proyecto demuestra cómo la combinación de aplicaciones a medida con infraestructura moderna puede resolver problemas complejos de visualización y seguimiento. En Q2BSTUDIO aplicamos esta misma filosofía en cada solución que entregamos: desde desarrollos personalizados hasta integraciones con servicios cloud aws y azure, pasando por capas de inteligencia artificial y análisis de negocio. Por ejemplo, es posible enriquecer estos rastreadores con agentes IA que anticipen retrasos o con dashboards en power bi que monitoricen la cadena logística. La clave está en entender las restricciones del entorno objetivo —ya sea una mini app, una web o un sistema embebido— y diseñar una arquitectura que las aproveche sin sacrificar rendimiento. Así, aunque el núcleo visual se base en Three.js y Gadget, el valor real reside en la automatización de procesos, la ciberseguridad de los tokens y la capacidad de escalar sin fricción. Este caso de uso ilustra cómo un software a medida puede transformar una interfaz llamativa en una herramienta operativa, donde cada arco sobre el globo cuenta la historia de un envío real, conectando clientes con sus paquetes de forma inmediata y atractiva.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat