Built with HOOPS Toolkits

← Back to Projects

IoT Demo

How do you display real-time IoT data in 3D? HERE is what we came up with using Arduino MKR Wi-Fi enabled microcontrollers with environmental shields.

With a bunch of these scattered around the office, we were able to display both real-time and historical environmental data for different locations using several different technologies.


MQTT is a lightweight messaging protocol for small sensors and mobile devices. The Arduino IDE comes with abundant sample code including one for sending MQTT data to AWS IoT Core. A shout out to @Arduino_Genuino for his guidance on how to do this.

Once AWS IoT Core collects the data, it is relayed to an AWS Dynamo database for storage. An AWS EC2 instance running a Node.js Express server listens for any changes to the database and relays them to any connected clients using a WebSocket.

The client-side display is built using Vue.js as an application framework, Vuex for state and data management, Bulma for styling, and vue-chart.js for line graphs. Central to display is HOOPS Communicator, which is used to visualize the 3D model, the location of the IoT devices, and real-time data. Here we combine the real with the virtual in a 3D environment.

Try it: HERE

Current Build: HOOPS Communicator 2019 SP2 U1


Last Updated: February 20th 2020

Experimental Project

No Official Support

Related Projects

Cloud Modeler

Copyright © 2022 Tech Soft 3D. All Rights Reserved. Built by your friends at Tech Soft 3D

Contact Us: e-mail