Online Model Viewer

Client Query

Hey ALEX, I have a cool idea for something that could really help us out on site! Do you think you guys can help us out?.

While I was working at JHA as a Digital Engineer, our BIM team was consulting on a data management project involving combustible panel replacements on a building in Sydney. The client requested a new method: the ability to quickly view the construction status of a project visually and efficiently. The status of each panel was documented in their project management system, but trying to match a panel ID with the physical location was time-consuming and cumbersome.

The client’s project manager wanted an improved workflow — a way to see progress across the whole building at a glance without having to cross-reference databases and facade reference drawings. With my previous experience with JavaScript and BIM management, we were able to quickly construct a prototype for the client to test.

Approach

I built a web app that projects the live panel data onto an interactive 3D model of the building. Each panel is colour-coded by status, so the state of an entire elevation can be instantly captured without cross-references.

Diagram contrasting the old workflow (choose panel, locate on drawing, record panel ID, search the Procore database, read results) with the new one (locate on the 3D model, click the panel, see results)

The interface is built with React and Three.js for the model rendering. A Node.js service sits between the user’s browser and the Procore API to normalise and correct any responses. The web app was designed to work on both desktop and phone so managers can work effectively both on-site and in the office.

The Model Viewer showing a building elevation with panels colour-coded for regions against a grey wireframe

A selected panel showing its ID, an aluminium-panels label, stage tabs, a photo of the completed install, and a Status: Pass result

Response

The response to the Model Viewer application from the client and site managers was overwhelmingly positive, with active users using it daily and it being the default way to check progress on the project.

This [application] ensures all trades are doing their relevant tasks to complete the project. Since this is now established, the ability to track progress can be in real time and give site managers greater control in seeing progress.
— Project Coordinator, SHAPE

JHA’s BIM team was engaged to apply the same application on multiple similar projects going forward, and it strengthened our range of digital services. The development of the Model Viewer directly impacted the reputation and revenue of our BIM team.

The project went well into development, adding more features, including multi-project scalability, simple analytics and metrics, desktop support with Electron and 2D architectural plan support.

The analysis panel charting status progression across the building over several months

Built at JHA Services for SHAPE.