The AEC industry continues to seek its place in the #metaverse, but finding the best way to utilize BIM models in this environment is not an easy task. At ATBIM, we implement web viewers to leverage these digital assets (BIM models) that seem more real, accessible, and easy to use… Because if we do all our work in a web environment, why don’t we use our BIM models on the web?

This way we can continue to exploit BIM files, reusing their geometry and data in the web context, accessible from anywhere and any device, without software and without licenses.

The possibilities are endless: from a simple 3D model viewer (so that the entire team can access this model without the need for software like REVIT or Navisworks), to project gamification, animation with physics, virtual reality (VR), NTFS and blockchain.

Foto de un portátil en una mesa con una ventana . En la pantalla se ve código de programación

Currently, and in a very high percentage of cases, companies working with BIM use images of their models for a meeting or explanation, but why don’t we show the entire project, as it is?

We will reduce work time and add value to our clients. Being able to explore your project in an immersive way brings us closer to reality and adds value and freshness to interesting details.

To achieve this successfully, we must solve problems related to the size and weight of BIM files. We have found a simple, viable, and exciting solution that will mark a before and after in our work:

We use the Three.js and R3F (react-three-fiber) libraries. Three.js supports a wide range of 3D file types, but it is recommended to use glTF (a fast file type that can be compressed into a very compact file, ideal for BIM models).

Imagen donde de un lado se ve los logos de react y three.js y al otro se ve unos edificios en 3D. — react + three.js = react-three-fiber

Three.js allows rendering graphics on the web, while React Three Fiber is a library that abstracts or simplify the implementation process of Three.js a bit more and allows us to develop web applications with an easier to work with.
In summary, Three.js is an independent 3D graphics library used to create 3D content on the web, while React Three Fiber is a library based on Three.js used to integrate 3D content into React applications.

Converting the BIM model into a reusable React component:

We start by exporting our rvt file to fbx and then converting it to glTF. Once our RVT model has been exported and compressed to glTF, the best option is to convert it to GLB. The GLB format stores the data internally, making the file size considerably smaller, and this is a very advantageous point since we typically work with complex geometry and large-sized BIM models.

Grafico explicativo sobre el ciclo de conversión de BIM a gltfjsx — Conversion Cycle of an .rvt Model to gltfjsx

Converting the BIM model into a reusable React component is easy with the gltfjsx package. This tool compiles all the information from our model into a reusable React component.

If you want to try with your own models, you can use the following converter:

https://gltf.pmnd.rs/

You can also use it in the terminal with the command:

npx gltfjsx model.gltf –transform

(To use it, you must have Node installed on your computer).

This command processes your model for a few seconds and will output a Model.jsx file ready to work with React.

And that’s it!

After this simple process, you will have your model ready to implement on the web.