React Native and 3D BIM

3D BIM has been used for many years now and is recently being integrated with new BIM workflow processes. Being able to view your 3D BIM model has many pre-construction advantages such as being able to visualize projects before construction which ultimately mitigates risk and reduces cost.

After identifying some of the issues within the BIM industry a 3D viewer-mobile app was developed since mobile apps have the advantage of being faster and more efficient. 

React Native was used as this has been identified as the most preferred cross-platform solution for the creation of both Android and iOS apps respectively as well as the Autodesk Forge Viewer which is well documented here. The UI consists of the Home Screen which contains the viewable 2D and 3D files. The Autodesk forge API’s provide a variety of storage providers, Google Drive, One Drive and Drop Box to name a few.

The home screen stack consists of the login screen which runs two-legged authentication to get an access token which will be provided to the viewer along with the file urn which is the string based identifier for the viewable file. 

The viewer is then initialized using the token and urn running on react-native-webview which is a component that is used to load webpages on your React Native app. 

A unique Id reference is required to persist an element in the forge viewer. The viewer provides a function to get the external Id of the element which is a unique GUID (globally unique identifier). This along with the element name can be retrieved by calling the viewer.getProperties(dbId, callback) function which requires a dbid that can be retrieved by calling the viewer.getSelection() function.

There are many advantages to storing viewer element data on a database, one being able to modify the element color based on a specific database reading. The Firebase database is used to store the name and externalId field. 

An additional status field is then added in order to capture the condition of the element as it's being inspected. This can be used for facility management with the elements’ color changing based on the database status value.

When working inside the Forge viewer, dbId’s are used to interact with the model geometry. The dbId is an index used on the model to access the geometry. Since we want to modify a value base on a database reading, we would need to retrieve the dbId from the externalId database reading. The getExternalMapping()  function can be used which returns an object with key values being dbNodeIds and values being externalIds.

The HVAC Units Screen found in the drawer navigator retrieves the element data from firebase and renders the values in a flatlist.

In conclusion there are many issues identified within the BIM industry which can be solved with automation. Adapting new BIM workflows can allow for companies to streamline their facility management processes which can provide ROI well after project completion.

Please like, share and leave any comments and suggestions below

#ReactNative #AutodeskForge #BIM #Javascript