Un dashboard 3D muestra los datos de una empresa en una escena tridimensional que se mueve en el navegador. Con three.js se hace sin instalar nada y sin pagar licencias por usuario. Lo hemos hecho para gestionar Lagunbot y aquí contamos cuándo el 3D aporta, cuándo estorba y cómo está montado por dentro.
- Qué es un dashboard 3D
- Qué es three.js y por qué lo usamos
- Cuándo ayuda el 3D en un dashboard
- Cuándo estorba
- Los dashboards 3D con los que gestionamos Lagunbot
- Cómo están hechos por dentro
- Lo que aprendimos al construirlos
- Un ejemplo para un cliente: el panel de un servicio técnico
- Dashboard 2D o 3D: comparación
- Cómo encargar un dashboard personalizado
- Preguntas frecuentes sobre dashboards 3D
- Fuentes
Qué es un dashboard 3D
Un dashboard 3D es un cuadro de mando en el que los datos de la empresa se dibujan sobre una escena tridimensional: por ejemplo, un edificio con una sala por departamento o una nave con sus líneas de producción. Se abre en el navegador, se puede girar y acercar, y se alimenta de las mismas fuentes que un panel de toda la vida: hojas de cálculo, programas de facturación, analítica web o el CRM.
En las búsquedas se mezclan tres cosas distintas.
- El dashboard 3D de datos de negocio. Aquí mandan los indicadores, y la escena sirve para ordenarlos y mirarlos.
- El gemelo digital, que reproduce una instalación física real, como una fábrica o un edificio, con sus sensores. Necesita modelos 3D del lugar y datos de planta, y es otro tipo de proyecto.
- El gráfico 3D suelto: la barra o la tarta con volumen que algunas herramientas de paneles permiten insertar. Es un gráfico plano con relieve y no cambia la forma de organizar la información.
Este artículo trata del primero, y sobre todo de su parte visual y técnica. Qué indicadores conviene poner lo explicamos en el cuadro de mando de una empresa.
Qué es three.js y por qué lo usamos
three.js es una librería de JavaScript de código abierto para crear gráficos 3D en una página web. Según su repositorio, el objetivo del proyecto es una librería 3D fácil de usar, ligera, de uso general y que funcione en distintos navegadores. Se publica con licencia MIT y las versiones actuales incluyen los renderizadores WebGL y WebGPU. Se usa para escenas y videojuegos, y también para visualización de datos 3D en la web.
WebGL es la tecnología del navegador que permite dibujar gráficos 3D en un elemento canvas. Programar directamente con ella es lento y complicado. La librería se encarga de la parte difícil (cámaras, luces, materiales, objetos y animación): quien programa describe la escena y three.js la dibuja.
En un proyecto de empresa, eso tiene consecuencias prácticas:
- No hay que instalar nada. El dashboard se abre con un enlace, en el ordenador de la oficina o en la pantalla de la sala de reuniones.
- Con la licencia MIT no hay un coste por usuario ni por panel que suba cuando entra más gente.
- Todo es código web, así que puede mantenerlo cualquier persona que sepa programar para web.
Cuándo ayuda el 3D en un dashboard
Después de construir varios, vemos tres situaciones en las que la tercera dimensión compensa lo que cuesta.
Cuando hay un lugar o una estructura que reconocer
Si la empresa se puede ver como un conjunto de espacios, una metáfora espacial ayuda a que cada persona encuentre lo suyo. Un edificio con una sala para ventas, otra para facturación y otra para el SEO se recorre sin instrucciones, y nadie tiene que acordarse de en qué pestaña estaba cada informe.
Cuando importa la vista de conjunto
El 3D va bien para ver de un vistazo qué parte del negocio está tranquila y cuál necesita atención. El color y el tamaño de los objetos dan esa lectura rápida, que es lo que uno busca al empezar la mañana. Para comprobar una cifra concreta hace falta otra vista, como contamos más abajo.
Cuando hay datos con ubicación
Almacenes, rutas, obras o instalaciones están en un sitio concreto. Si la posición forma parte de la decisión, dibujarla ayuda.
Cuándo estorba
Hay cuatro casos en los que el 3D sobra, y conviene tenerlos claros antes de encargar nada.
Para comparar cifras con exactitud
Para saber si una cifra es mayor que otra, lo más claro es una barra en 2D sobre un eje común. La perspectiva hace que lo cercano parezca más grande, y eso distorsiona la comparación. La guía de visualización de Salesforce Trailhead lo muestra con un gráfico circular en 3D en el que una porción parece más pequeña de lo que es. En nuestros paneles, las cifras que importan se leen en texto y en tablas, y la altura de un cubo solo sirve para orientarse.
Para quien tiene dificultades de visión o de movimiento
Una escena dibujada en un canvas no es accesible por sí sola, porque un lector de pantalla no sabe qué hay dentro. Las pautas de accesibilidad WCAG (criterio 1.1.1) piden una alternativa en texto para el contenido que no es texto y, en los gráficos de datos, recomiendan además dar los datos reales en una tabla cuando sea posible. El movimiento continuo, por su parte, molesta a las personas con trastornos vestibulares. Quien lo necesita puede pedir menos movimiento en la configuración de su equipo, y la página lo detecta con prefers-reduced-motion. Un dashboard 3D bien hecho ofrece la alternativa en texto y respeta esa preferencia.
En equipos lentos o con mucha carga
Dibujar en 3D le cuesta al ordenador más que dibujar una tabla. En un portátil antiguo, o en un ordenador con veinte programas abiertos, la escena tarda en aparecer y se mueve a saltos. Si el panel lo va a abrir gente con equipos muy distintos, hay que tenerlo en cuenta desde el diseño. Cuantos más objetos animados hay en pantalla, más trabaja la tarjeta gráfica, así que conviene dibujar solo lo necesario.
Cuando una herramienta del mercado ya lo resuelve
Si lo que necesitas son las ventas por mes, por comercial y por producto, seguramente te basta con una hoja de cálculo bien montada o con una herramienta de paneles estándar. Un 3D hecho a medida para eso es dinero mal gastado, y te lo diremos en el diagnóstico.
Si la pregunta es «cuánto» o «cuál es mayor», usa un gráfico 2D. Si la pregunta es «dónde está lo que necesita atención» o «cómo va todo», el 3D puede ayudar. En cualquier caso, un buen dashboard 3D lleva los números importantes escritos en texto al lado.
Los dashboards 3D con los que gestionamos Lagunbot
En octubre y noviembre de 2026 hemos construido con three.js un conjunto de paneles para llevar nuestra propia empresa. Son nuestra herramienta de trabajo, así que podemos contar qué funciona y qué no.
| Panel | De dónde saca los datos | Qué decisión permite |
|---|---|---|
| SEO | Search Console, Google Analytics 4, Bing Webmaster Tools y PageSpeed | Qué páginas trabajar esta semana |
| Clientes | Conversaciones de los asistentes de cada cliente y fichas del CRM | Qué cliente necesita atención y cuál va bien |
| Embudo de ventas | Hojas de cálculo y notas de los tres embudos comerciales | En qué fase se atascan los contactos |
| Facturación | Exportaciones del programa de facturación y previsión de lo pendiente de facturar | Qué hay cobrado, qué falta por cobrar y qué se gasta |
| Oficina virtual | Los cuatro anteriores | Una mirada rápida al estado de todo el negocio |
La oficina virtual es el ejemplo más claro de metáfora espacial: un edificio en 3D en el que cada sala es uno de los otros cuatro paneles. Entras, miras qué sala tiene un aviso y pasas a ella.
Los datos de estos paneles son internos y no los publicamos.
Cómo están hechos por dentro
La arquitectura tiene pocas piezas, y es así a propósito.
- Las fuentesHojas de cálculo, programas de facturación, analítica web, plataformas de asistentes y notas del CRM. Cada una guarda sus datos como siempre.
- Recolector y puentesUn recolector en Python, que corre en nuestro servidor, y puentes de Google Apps Script leen las fuentes cada 30 minutos.
- Un fichero JSONEl resultado queda en un fichero de datos ordenado, sin lógica de negocio escondida en la pantalla.
- Una web estática con three.jsLa página lee el JSON y pinta la escena. No hay una base de datos que consultar en cada visita, así que carga rápido y es sencilla de mantener.
- Acceso propioUsuario y contraseña en una página de acceso hecha por nosotros. Sin licencias por usuario.
Leer las fuentes cada 30 minutos fue una decisión. Un dashboard en tiempo real, con datos que cambian segundo a segundo, necesitaría otra arquitectura: conexiones permanentes con el servidor y fuentes que emitan eventos. Para decidir sobre ventas, facturas o SEO, media hora es de sobra, y así todo es mucho más simple y da menos problemas.
La página de acceso es propia porque la ventana de usuario y contraseña del navegador no aparece en algunos navegadores integrados, y desde ellos no se podía entrar. Con nuestra página se entra desde todos.
Lo que aprendimos al construirlos
Las cifras importantes van también en texto. Cuando el ordenador está muy cargado, la escena 3D tarda en pintarse, y si la cifra que buscas solo está dentro de la escena, te quedas esperando sin saber qué pasa. Por eso ahora las cifras principales se escriben aparte, en HTML normal, y se ven al instante.
La escena se detiene cuando nadie la mira. Una animación continua en una pestaña oculta gasta batería y procesador para nada. El panel deja de dibujar cuando la pestaña no está a la vista y vuelve a hacerlo cuando regresas.
Si no hay API, se usan las exportaciones. No todos los programas de facturación tienen API, y algunos la cobran aparte. En esos casos el panel se alimenta de las exportaciones que el programa sí permite y se actualiza subiendo el fichero. Es menos elegante que una conexión automática, pero funciona ya y no depende de un extra de pago.
Un ejemplo para un cliente: el panel de un servicio técnico
Además de los paneles propios, hemos diseñado un panel 3D para una empresa de reparación e instalación de persianas. Es un prototipo funcional con datos ficticios y no está en producción en ningún cliente.
Sigue el recorrido completo de un trabajo: el aviso del cliente, el técnico que lo recibe, el parte de trabajo, la factura en PDF con código QR, el pago, la encuesta y la reseña. Tiene páginas pensadas para el móvil del técnico y para el del cliente, un servidor propio hecho con Python, FastAPI y SQLite, y un asistente conectado que, cuando el cliente escribe, crea el aviso por su cuenta.
El panel pinta ese recorrido como una escena y, con los datos de prueba, sirve para enseñar a un cliente qué vería cada mañana. El sistema completo que lo rodea lo contamos en el artículo sobre hiperautomatización.
Dashboard 2D o 3D: comparación
| Dashboard 2D | Dashboard 3D con three.js | |
|---|---|---|
| Comparar cifras exactas | Muy bien: barras, líneas y tablas | Mal: hay que apoyarse en texto y tablas |
| Vista de conjunto | Correcta si hay pocos indicadores | Muy buena con metáforas espaciales |
| Pantalla de reunión | Informativa | Llama la atención y abre la conversación |
| Accesibilidad | Más sencilla de resolver | Exige texto y tablas equivalentes y respetar el movimiento reducido |
| Equipos antiguos | Sin problema | Puede ir lento |
| Licencias | Según la herramienta; algunas cobran por usuario | Ninguna por usuario con three.js (licencia MIT) |
| Mejor cuando | El dato exacto manda | Hay estructura, lugar o hace falta una mirada de conjunto |
Las dos opciones se pueden combinar: una entrada en 3D para orientarse y, al elegir una sala, tablas y gráficos de barras en 2D para el detalle.
Cómo encargar un dashboard personalizado
Un dashboard personalizado, sea 2D o 3D, sale bien cuando se decide qué tiene que mostrar antes de dibujar nada. Nosotros lo hacemos en este orden:
- Las decisionesQué decisiones toma el equipo cada semana y qué dato le falta para tomarlas. Sin esto, el panel acaba lleno de indicadores que nadie mira.
- Las fuentesDónde están hoy esos datos y cómo se pueden leer: API, exportación u hoja de cálculo.
- Un prototipoUna primera versión con un par de indicadores y datos reales, para decidir si el 3D aporta o si basta con 2D.
- Entrega por fasesSe añaden las áreas de una en una, empezando por la que más se usa.
- MantenimientoLas fuentes cambian y los programas se actualizan. Alguien tiene que vigilar que el panel siga leyendo bien.
Antes de contratar a nadie, pregunta de quién serán el código y los datos, dónde se alojará el panel y quién paga ese alojamiento, y quién lo mantendrá si cambia una fuente. Si las respuestas quedan por escrito, luego no hay sorpresas.
Este tipo de trabajo forma parte de lo que hacemos en software a medida, junto con integraciones y automatización de procesos con IA. Si no tienes claro si necesitas un panel o si antes toca ordenar los datos, la consultoría de IA empieza justo por ahí, y en cómo trabajamos están los pasos. Estamos en Azpeitia y trabajamos con empresas de Gipuzkoa, del resto del País Vasco y de toda España en remoto.
Veamos si tu empresa necesita un dashboard 3D o uno 2D
En 30 minutos repasamos qué decisiones quieres tomar con tus datos y te decimos qué formato encaja mejor, aunque la respuesta sea una hoja de cálculo. Es gratis y sin compromiso.
Pedir un diagnóstico →Preguntas frecuentes sobre dashboards 3D
¿Qué es three.js?
Es una librería de JavaScript de código abierto, con licencia MIT, para dibujar gráficos 3D en una página web. Se apoya en WebGL y en WebGPU, dos tecnologías del navegador, y ahorra tener que programar a bajo nivel las cámaras, las luces y los materiales.
¿Un dashboard 3D es lo mismo que un dashboard en tiempo real?
No necesariamente. Que sea 2D o 3D y cada cuánto se actualiza son decisiones distintas. Nuestros paneles se actualizan cada 30 minutos, y eso basta para decidir sobre ventas, facturación o SEO. Un panel en tiempo real, con datos al segundo, se diseña de otra manera y solo compensa si de verdad hay que decidir en ese plazo.
¿Hace falta instalar algo para verlo?
No. Se abre en el navegador con un enlace y un usuario. Funciona en los ordenadores y las pantallas de reunión actuales. En móviles y equipos antiguos conviene probarlo antes y, si hace falta, ofrecer una vista más ligera.
¿Es accesible un dashboard 3D?
Puede serlo si se diseña para ello. Las cifras importantes se escriben también en texto y en tablas, la escena respeta la preferencia de movimiento reducido del sistema y hay una vista alternativa sin 3D. Una escena 3D sola, sin nada más, no es accesible.
¿Se puede conectar con mis programas actuales?
Depende de lo que ofrezca cada programa. Si tiene API, se lee directamente; si no la tiene o la cobra aparte, se trabaja con sus exportaciones. Nosotros hemos conectado hojas de cálculo, Google Search Console y Analytics, programas de facturación y plataformas de asistentes de IA.
¿Cuánto cuesta un dashboard personalizado?
Depende del número de fuentes, de las áreas que incluya y de si necesita 3D o basta con 2D. Por eso no publicamos tarifas: después del diagnóstico gratuito de 30 minutos enviamos una propuesta a medida por escrito.
¿Sirve para una empresa pequeña?
Sí, si hay decisiones que se toman con datos repartidos en varios sitios. En una empresa pequeña, lo que se gana es no tener que abrir cinco programas cada mañana. A veces el primer paso es una hoja de cálculo bien ordenada, y con eso es suficiente.
¿Quién mantiene el dashboard cuando cambia una fuente de datos?
Quien se acuerde por escrito al contratarlo. Los programas cambian sus exportaciones y sus API, así que hay que dejar fijado desde el principio quién vigila, cómo se avisa de un fallo y cuánto se tarda en repararlo. Nosotros lo planteamos en la propuesta.