BIM en WEB: cómo exportar y visualizar modelos

La industria AEC sigue buscando su lugar en el #metaverso, pero encontrar la mejor manera de utilizar los modelos BIM en este entorno no es tarea fácil. En ATBIM implementamos visores web para sacarle partidos a estos activos digitales (modelos BIM) que nos parece más real, accesible y fácil… Por que, si todo nuestro trabajo lo hacemos en entorno web ¿Por qué no usar nuestros modelos BIM en la web?

Así podemos seguir explotando los archivos BIM, reutilizando su geometría y datos en el contexto web, accesible desde cualquier lugar y dispositivo, sin software, sin licencias..

..y las posibilidades son infinitas, desde un simple visor de modelos 3D para que todo el equipo pueda acceder a este modelo sin la necesidad de utilizar softwares como REVIT o Navisworks, hasta la gamificación del proyecto, la animación con física, la virtualización (VR) , los NTFS, blockchain…

Actualmente, y en un % muy alto de los casos, las empresas que trabajan con BIM utilizan imágenes de sus modelos para una reunión o explicación, pero ¿porqué no mostrar el proyecto completo, tal cual?

De esta forma reduciremos tiempo de trabajo y añadiremos valor a nuestros clientes…
Poder «tocar» y explorar tu proyecto, de forma inmersiva nos acerca a la realidad y aporta esa riqueza y frescura en los detalles interesantes.

Para conseguirlo con éxito, deberemos solucionar los problemas referentes al tamaño y peso de los archivos BIM. Nosotros hemos encontrado una solución sencilla, viable y emocionante que marcará un antes y un después en nuestros trabajos:

Utilizamos las librerías Three.js y R3F (react-three-fiber). Three.js admite una amplia gama de tipos de archivos 3D, pero es recomendable utilizar glTF (un tipo de archivo rápido que se puede comprimir en un archivo muy compacto, ideal para modelos BIM).

Three.js permite renderizar gráficos en la web, mientras que React Three Fiber es una librería que abstrae un poco más el proceso de implementación Three.js y nos permite desarrollar aplicaciones web con un código más fácil y sencillo de trabajar.
En resumen, Three.js es una biblioteca de gráficos en 3D independiente que se utiliza para crear contenido 3D en la web, mientras que React Three Fiber es una biblioteca basada en Three.js que se utiliza para integrar contenido 3D en aplicaciones de React.

Convirtiendo el modelo BIM en un componente React reutilizable:

Empezamos exportando nuestro archivo rvt a fbx para después pasarlo a glTF. Una vez que se ha exportado y comprimido nuestro modelo RVT a glTF, lo ideal es convertirlo en GLB en este proceso. El formato GLB almacena los datos internamente, lo que hace que el tamaño del archivo sea considerablemente menor… y este es un punto muy a nuestro favor ya que normalmente trabajamos con modelos BIM de geometría compleja y gran tamaño.

Convertir el modelo BIM en un componente React reutilizable es fácil con el paquete gltfjsx. Esta herramienta compila toda la información de nuestro modelo en un componente React reutilizable.

Si deseas probar con tus propios modelos, puedes utilizar el siguiente conversor:

https://gltf.pmnd.rs/

También puedes usarlo en la terminal con el comando: 

npx gltfjsx model.gltf –transform 

(Para usarlo, debes tener instalado Node en tu ordenador).

Este comando procesa tu modelo por unos segundos y te devolverá como salida un archivo Model.jsx listo para trabajar con React.

¡Y listo! 

Después de este sencillo proceso, tendrás tu modelo listo para implementarlo en la web. 

Aquí tienes un pequeño ejemplo open source para que puedas ver todo el potencial de la herramienta:

¡Cuéntanos tus ideas de como implementar esta herramienta en tus proyectos! y si necesitas ayuda, no dudes en consultarnos en info@atbim.es!