Three.js · WebGL
Desarrollo web 3D que sirve para algo
El 3D se gana su sitio cuando el usuario necesita manipular lo que ve: girar un producto, recorrer un espacio, entender una pieza. Si solo es decoración, te lo diremos y nos ahorramos los dos el proyecto.
Cuándo el 3D se gana su sitio
Los cuatro casos tienen algo en común: si quitas el 3D, el usuario pierde información. Esa es la prueba del algodón.
Configuradores de producto
Un sofá en catorce telas, unas zapatillas con seis suelas, una cocina montada. El 3D sustituye un catálogo de cientos de fotos imposible de mantener, y reduce devoluciones porque el cliente ha visto exactamente lo que compra.
Espacios e inmobiliaria
Recorrer un piso que todavía no está construido o entender la distribución de una nave. Un plano en 2D no transmite el volumen, y las fotos de la promoción tampoco existen aún.
Piezas técnicas e industriales
Maquinaria, componentes y despieces. Girar la pieza y ver dónde encaja cada parte es información, no decoración. Sustituye a un PDF de instrucciones que nadie abre.
Datos con forma espacial
Mapas de instalaciones, redes, plantas de edificio con sensores. Si el dato tiene coordenadas, el 3D es el formato natural para enseñarlo.
Lo que no hacemos
Una figura que gira en la cabecera. Partículas que siguen al ratón. El logo con volumen. Queda bien en la presentación del diseño y no aporta nada al visitante.
El problema no es estético, es de coste: esa decoración se paga en los primeros segundos de carga, que son justo los que deciden si alguien se queda. Y se paga en cada visita, en cada móvil, para siempre.
Cómo lo construimos
La parte difícil del 3D en web no es el 3D: es que no se lleve por delante el rendimiento.
Modelos optimizados, no exportados sin más
Un modelo que viene de CAD o de Blender pesa decenas de megas y no sirve para la web. Se reduce la geometría, se hornean las texturas y se comprime con Draco o Meshopt. La diferencia entre 40 MB y 2 MB es trabajo, no magia.
El 3D carga después, no antes
La página se ve y se puede usar sin esperar al modelo. El visor se carga aparte y solo cuando hace falta, para que la primera impresión no sea una pantalla en blanco con un porcentaje.
Alternativa en móviles y equipos antiguos
No todos los dispositivos mueven WebGL con soltura. Siempre hay una salida: imágenes, vídeo o una secuencia de fotogramas. Nadie se queda sin ver el producto.
Se mide el coste en rendimiento
Antes y después, con Core Web Vitals reales. Si el 3D hunde la velocidad de la página, eso hay que saberlo y decidirlo, no descubrirlo tres meses más tarde cuando bajan las visitas.
Preguntas frecuentes sobre web 3D
¿Qué es Three.js?
Una librería de JavaScript que se apoya en WebGL, la tecnología que permite al navegador hablar directamente con la tarjeta gráfica. Es software libre, maduro y funciona en cualquier navegador moderno sin plugins ni instalaciones. Prácticamente todo lo que veas como «web 3D interactiva» está hecho con Three.js o con algo construido encima.
¿Hace falta que el usuario instale algo?
No. Todo ocurre en el navegador, igual que una página normal. No hay plugins, ni apps, ni descargas. Funciona en móvil y en escritorio.
¿No va a ir lenta la web?
Depende de cómo se haga. Un modelo exportado tal cual puede pesar 40 MB y hundir la página; el mismo modelo optimizado baja a un par de megas y se carga después de que la web ya sea usable. Medimos el impacto antes y después, y si no compensa, te lo decimos.
¿Cuánto cuesta una web con 3D?
Más que una web normal, y la diferencia está casi toda en el modelado y la optimización, no en la programación. Por eso lo primero que miramos es si ya tienes modelos 3D de tus productos: si vienen de fábrica o de ingeniería, el proyecto cambia mucho de precio. Escríbenos y lo estimamos.
¿Y si lo que quiero es solo que quede bonito?
Entonces probablemente no lo necesites, y te lo vamos a decir. Una figura girando en la cabecera se paga en los primeros segundos de carga, que son los que deciden si alguien se queda. La prueba es sencilla: si al quitar el 3D el usuario no pierde información, no era necesario.
¿Buscas algo más concreto? Mira también:
¿Listo para tener la web que mereces?
Cuéntanos tu proyecto. Primera consulta gratuita, sin compromiso.