I. La tarde en que el navegador falló

El año pasado, un Bim Una empresa de consultoría técnica se encargó de un proyecto de visualización web para el sector de la construcción. Los requisitos parecían bastante sencillos: mostrar un modelo Revit proporcionado por el cliente en el navegador, con soporte para navegación virtual, interacción con componentes y visualización de la propiedad.

El equipo del proyecto pensó que sería sencillo. Instalar three.js, encontrar una herramienta para convertir .rvt a .Glb, cárgalo con GLTFLoader, listo.

Luego, el cliente envió los archivos del modelo.

El archivo comprimido tenía un tamaño de 12 GB.

Tras la extracción, un único archivo del modelo principal ocupaba 8,7 GB. El equipo se armó de valor y utilizó una herramienta convencional para convertirlo a glTF; la conversión duró 40 minutos y produjo un archivo .glb de 6 GB. Lo incorporaron a su proyecto Three.js y...

El navegador pasó directamente a una pantalla en blanco.

La consola tenía una línea: Fuera de memoria.

Sinceramente, el equipo quedó atónito. No se trataba de un rendimiento lento ni de una baja velocidad de fotogramas; simplemente no funcionaba.

II. Los intentos de rescate (y por qué todos fracasaron)

Durante las dos semanas siguientes, el equipo revisó exhaustivamente todos los foros técnicos que pudo encontrar.

Intento 1: Compresión Draco

Comprimieron el archivo glTF con Draco y luego lo cargaron. El archivo se redujo de 6 GB a 1,8 GB; esto parecía prometedor.

Pero el análisis del hilo principal de JavaScript seguía tardando más de 90 segundos, durante los cuales la página permanecía completamente congelada. Los usuarios tenían que esperar un minuto y medio después de abrir la página web. Nadie podía aceptar eso.

Intento 2: LOD manual

Intentaron crear manualmente tres versiones del modelo con distintos niveles de precisión en Blender y desarrollaron su propio código para alternar entre ellas según la distancia de la cámara. Esto mejoró un poco las cosas, pero crear manualmente tres versiones de un mismo modelo les llevó casi todo el día. El cliente tenía más de un modelo, por lo que este método era demasiado ineficiente. Además, Blender tenía problemas con modelos de gran tamaño y se bloqueaba sin previo aviso.

Intento 3: Conversión a la nube

Intentaron usar una plataforma comercial en la nube. Subir el modelo tardó dos horas, y tras la conversión y la descarga, la mayor parte de los datos de las propiedades de los componentes se habían perdido. Los usuarios querían hacer clic en una pared para ver la información del material, pero solo obtenían un objeto de malla vacío. Los requisitos simplemente no se cumplieron.

Tras casi un mes de dificultades, la empresa de consultoría BIM llegó a una conclusión difícil de aceptar:

Three.js en sí no tiene ningún problema. El problema radica en que trabaja con datos 3D/BIM de nivel industrial, no con recursos para videojuegos. Son dos mundos completamente distintos.

Al no poder resolver el problema con su propio equipo, la empresa de consultoría BIM recurrió a 3D Expert Co.,Ltd.

III. Fundamentos técnicos del experto en 3D

3D Expert Co., Ltd., con sede en Osaka, Japón, cuenta con años de experiencia en el procesamiento ligero de datos y modelos 3D/BIM a gran escala. No se trata de una solución improvisada: el equipo lleva mucho tiempo trabajando en los aspectos clave del análisis de datos 3D de nivel industrial, el procesamiento ligero y la renderización web de alto rendimiento, con un profundo conocimiento de las estructuras internas de los formatos industriales más comunes, como Revit, IFC, SolidWorks y Bentley.

Tras recibir la solicitud de ayuda de la empresa de consultoría BIM, el equipo de 3D Expert identificó rápidamente el problema. Durante su análisis, dividieron los cuellos de botella que Three.js enfrenta con modelos grandes en cuatro capas:

Esto no se solucionaba con una simple actualización de Three.js; requería cambios estructurales en la base del proceso de renderizado. Y precisamente ahí radicaba la amplia experiencia del equipo de 3D Expert.

IV. Comparación de las soluciones disponibles

El equipo de expertos en 3D revisó todas las soluciones que pudo encontrar:

Las soluciones en la nube presentan un obstáculo ineludible: la necesidad de cargar datos. Para los clientes del sector de la construcción, extremadamente sensibles a la seguridad de los datos, esto suponía un impedimento insalvable. Además, los formatos convertidos eran opacos, lo que impedía a los desarrolladores front-end personalizarlos.

Basándose en años de experiencia técnica, el equipo de 3D Expert ofreció su propia respuesta: Cargador rapid3D para three.js.

V. Cómo rapid3D Loader para three.js resuelve estos problemas

rapid3D Loader para three.js no es una simple capa de abstracción sobre Three.js, ni una herramienta de conversión de formato. Es un flujo de trabajo completo, desde la conversión del modelo hasta la renderización en el front-end.

Arquitectura: Productor-Consumidor

┌─────────────────────────────┐ ┌──────────────────────────────────┐ │ Generador de archivos Opt (Productor)│ ────► │ Cargador rapid3D JS Paquete │ │ │ │ (Consumidor) │ │ · Se ejecuta localmente, sin nube │ │ · Publicado como paquete npm │ │ cargas │ │ · Se integra en proyectos Three.js │ │ · Análisis nativo de más de 20 │ │ · Carga paralela de múltiples trabajadores │ │ formatos │ │ · Carga LOD dinámica multinivel │ │ · Genera geometría .opt │ │ · Renderizado por fragmentos + renderizado de │ │ archivos instanciados │ │ │ │ · Genera propiedad .db │ │ · Interfaz de API abierta │ │ bases de datos │ │ │ │ │ · Versión para Windows disponible │ │ │ │ para descargar │ │ │ └─────────────────────────────┘ └──────────────────────────────────┘ 

Principales ventajas de esta arquitectura:

• La conversión se realiza localmente en el equipo del usuario. — Los datos principales nunca salen del ordenador del cliente, cumpliendo de inmediato con los requisitos de seguridad y cumplimiento normativo.
• El front-end recibe pre-optimizado formato .opt archivos, eliminando la necesidad de un análisis exhaustivo en el navegador.
• Los datos geométricos y los datos de propiedades se almacenan por separado. — .opt se encarga de la representación gráfica, .db se encarga de las consultas de datos empresariales, y cada uno se carga bajo demanda sin ralentizar al otro.

Cuatro tecnologías clave que disparan el rendimiento

1. Carga de cola de múltiples trabajadores

// Carga nativa de archivos grandes en Three.js: monohilo, congelado cuando está congelado const loader = new GLTFLoader (); loader. load ( 'model.glb' , ( gltf ) => { // Este paso puede tardar 90 segundos, durante los cuales la página no responde en absoluto scene. add (gltf. scene ); }); // Rapid3D Loader: procesamiento paralelo multi-Worker en segundo plano // La API es igualmente simple, pero los hilos Worker se asignan automáticamente internamente rapidLoader. load ( 'model.opt' , { onProgress : ( percent ) => console . log ( ` ${percent} %` ) // Información de progreso disponible }); 

El análisis de archivos grandes se divide en tareas paralelas, aprovechando al máximo las CPU multinúcleo. Los desarrolladores no necesitan gestionar manualmente los subprocesos de trabajo.

2. Carga LOD dinámica multinivel

Esta es la tecnología clave que permite a rapid3D Loader cargar el modelo en menos de un segundo. En lugar de cargar el modelo completo en la memoria de una sola vez, carga los datos del modelo dinámicamente con diferentes niveles de precisión según el punto de vista y la distancia de la cámara. Lo que el usuario ve es lo que se carga; lo que no es visible no consume recursos.

Esto significa que, incluso ante un modelo Revit de 8,7 GB, los usuarios no necesitan esperar a que se cargue el archivo completo: los datos necesarios para la presentación inicial en pantalla son mínimos, lo que mantiene los tiempos de carga por debajo de los 10 segundos. Desde una vista panorámica de todo el campus hasta un primer plano de un solo tornillo, el sistema de carga escalonada LOD programa dinámicamente los recursos del modelo en diferentes niveles de precisión según la distancia de la cámara, el tamaño de la pantalla y la velocidad de movimiento, manteniendo una velocidad de fotogramas estable en todo momento.

3. Renderizado por fragmentos + Renderizado por instancias

Muchos componentes de los modelos grandes son repetitivos; por ejemplo, un edificio de oficinas podría tener 200 ventanas idénticas. El método tradicional asigna una llamada de dibujo por ventana, lo que resulta en 200 llamadas. La renderización por fragmentos divide el grafo de escena en unidades de renderización manejables y, combinada con la renderización instanciada por GPU, las mismas 200 ventanas requieren solo unas pocas llamadas de dibujo.

4. Eliminación de troncos de cono + Eliminación dinámica + Dibujo en caché

El triple descarte garantiza que la GPU no desperdicie recursos renderizando elementos fuera del campo de visión. Combinado con el renderizado no en tiempo real y el dibujo en caché, el rendimiento se lleva al límite.

Integridad de los datos: ¿Qué es lo que más impresiona a los clientes de BIM?

Tras la mayoría de las conversiones de formato, el modelo se convierte en una colección de "mallas huecas". Haces clic en un componente y el programa ni siquiera sabe qué es: ¿una pared? ¿Una columna? ¿Una tubería? Todo se pierde.

rapid3D Loader es diferente. Mediante complementos de exportación específicos (uno para cada uno de los siguientes programas: Revit, Bentley, Tekla, Rhino, Navisworks, SolidWorks, Inventor, Siemens NX y PTC Creo), conserva los identificadores de componentes, las relaciones jerárquicas, los parámetros de los materiales y las propiedades profesionales, además de la extracción de datos geométricos, almacenándolos en archivos de base de datos con estructuras de tabla documentadas públicamente.

Esto te permite hacer cosas como esta:

// Seleccionar un componente const mesh = pickMesh (event); const componentId = mesh.userData.componentId ; // Consultar las propiedades completas del archivo de la base de datos const properties = await dbLoader.getComponentProperties (componentId); console.log (properties); // { // id: 'wall-001', // type: 'Structural Wall', // material: 'C30 Concrete', // thickness: 200, // mm // level: 'F2', // ... // } 

Esto es fundamental para las aplicaciones BIM: los usuarios pueden hacer clic en una columna y ver la información completa del componente.

La gama de formatos compatibles es muy completa: Revit, SolidWorks, Bentley, Tekla, IFC, FBX, STEP, 3DXML, skp, dae, stp, stl, iges, rvm, vue, obj, lo que abarca todos los formatos 3D industriales más utilizados.

VI. La integración es realmente sencilla.

Todo el proceso consta de solo tres pasos:

Paso 1: Descargar el generador de archivos Opt

Instalar Generador de archivos Opt (herramienta de conversión de formato de modelo) en Windows, seleccione su archivo de modelo y elija .optar como formato de exportación. Todo se hace localmente; no se sube nada a la nube.

Descargar en: https://www.opt3ds.com/ o https://www.3dexpert.jp/

Paso 2: Instalar el paquete npm

npm install opt-rapid3d-loader 

Paquete npm: https://www.npmjs.com/package/opt-rapid3d-loader

Paso 3: Escribe unas pocas líneas de código

import { RapidLoader } from 'opt-rapid3d-loader' ; const scene = new THREE . Scene (); // ... tu código de inicialización de Three.js ... const loader = new RapidLoader (); loader. load ( 'path/to/model.opt' , { onProgress : ( p ) => updateLoadingBar (p), onComplete : ( model ) => { scene. add (model); // Cada malla en el modelo es una malla estándar de Three.js // Tu lógica de interacción existente, sombreadores, código de negocio: no se necesitan cambios } }); 

El cargador genera objetos Mesh estándar de Three.js, lo que significa que todo lo que hayas escrito anteriormente es totalmente compatible. No es necesario empezar de nuevo.

VII. Datos de rendimiento en el mundo real

Pruebas realizadas en la misma máquina (i7-12700 / 32 GB de RAM / RTX 3060 / Chrome 120):

La solución nativa utilizaba GLTFLoader + compresión Draco. El modelo de 8,7 GB provocó un error de falta de memoria; ni siquiera llegó a arrancar.

Gracias a Tecnología de carga LOD dinámica multinivel, rapid3D Loader no necesita esperar a que se cargue todo el modelo antes de renderizar la pantalla inicial. Tanto el modelo Revit de 8,7 GB como el modelo IFC de 1,2 GB se cargan en menos de 10 segundos. En comparación con Three.js nativo, La velocidad de carga de modelos mejora en 3 veces o más, y la velocidad de fotogramas de renderizado de modelos grandes mejora en 10 veces o más.El número de llamadas de dibujo se redujo de 12.000 a 380; visualmente es imperceptible, pero la estabilidad de la velocidad de fotogramas habla por sí sola.

El problema que la empresa de consultoría BIM no pudo resolver se solucionó sin esfuerzo con rapid3D Loader.

VIII. Casos de uso

Si tu proyecto cumple con alguno de estos criterios, merece la pena dedicar media hora a probar una demostración:

• Es necesario cargar formatos de modelos 3D/BIM profesionales como Revit / SolidWorks / IFC.
• El archivo de un solo modelo supera los 500 MB.
• El cliente tiene requisitos de seguridad de datos (no puede subir archivos a la nube).
• Se requiere interacción a nivel de componente (clic para consultar propiedades, anotación de color, mostrar/ocultar, etc.).
• No quiero quedarme atascado en una solución de caja negra y necesito seguir desarrollando basándome en Three.js.

Industrias aplicablesConstrucción naval/ingeniería marina, industria aeroespacial, energía y electricidad, petroquímica, fabricación avanzada, ciudades inteligentes, diseño arquitectónico: esencialmente cualquier proyecto de visualización web que utilice modelos 3D profesionales.

IX. Acerca de 3D Expert Co.,Ltd.

3D Expert Co., Ltd. tiene su sede en Osaka, Japón, y cuenta con años de experiencia en el procesamiento ligero de datos y modelos 3D/BIM a gran escala. La empresa se dedica a superar la brecha técnica entre los motores de renderizado 3D de uso general y los datos de nivel industrial, proporcionando a sus clientes un flujo de trabajo completo, desde la conversión del formato del modelo hasta el renderizado web de alto rendimiento.

Cargador rapid3D para three.js es el producto estrella del equipo de 3D Expert: conversión de formato, procesamiento ligero, renderizado de alto rendimiento e interacción de datos, todo en un flujo de trabajo integrado. Y como el resultado son objetos de malla estándar de Three.js, nunca estarás atado a ningún ecosistema propietario.

Cómo empezar

Además, se proporcionan ejemplos de demostración y código fuente para el uso básico de la API, la extracción de datos del modelo y el desarrollo avanzado basado en objetos Mesh de Three.js.

Después de descargar el generador de archivos Opt, seleccione .optar como formato de exportación, y el paquete rapid3D Loader JS puede cargarlo y renderizarlo directamente.

X. Conclusión

Three.js es una herramienta excelente, pero se posiciona como un motor de renderizado 3D de propósito general, no como una solución BIM de nivel industrial. Al trabajar con datos industriales reales, existe una importante brecha tecnológica que debe subsanarse, y en eso precisamente ha estado trabajando el equipo de 3D Expert durante años.

El cargador rapid3D para three.js cubre esa necesidad. La principal conclusión tras usarlo: Por fin dejas de luchar con modelos complejos. Concéntrate en escribir la lógica de negocio, concéntrate en crear interacciones.

Si también trabajas en visualización 3D web, nos encantaría saber de ti. Comparte tus experiencias, los problemas con los que te has encontrado y las soluciones que has probado. ¡Hablemos!

3D Expert Co., Ltd. 📍 Osaka, Japón 🌐 https://www.opt3ds.com/ | https://www.3dexpert.jp/ 📦 npm: https://www.npmjs.com/package/opt-rapid3d-loader

© 2010–2026 3D Expert Co.,Ltd. Todos los derechos reservados.