Integrating Azure Digital Twin with React for 3D Scenes

Question

Hi, I am thinking of using azure digital twin for a new project. While reading the documentation I got confused about one thing, and that is its implementation with react for a 3d Scene.

Wanted to ask if to demonstrate the 3d scene in react js do we have to replicate the 3d model in react using three.js or r3f or is there any way to directly use what azure explorer for digital twin.
If there is any other way please suggest for the same.

Answer 1

Hello @Sidharth Yadav,

welcome to this moderated Azure community forum.

Azure Digital Twins is a runtime where twins of physical devices can be updated with property changes while multiple twins have certain relationships.

when twins change (properties are updated), events are fired that can be forwarded to an EventHub so you can react on it.

Azure Digital Twins also comes with a 3D scenes visualization where you can upload 3d models an related parts of that 3D model to certain twins. When a property changes, you can eg. update the legend, a warning icon or the outline (color) of that 3D model part.

Check out this blog post for an impression on how this works.

The 3D experience of the 3D scenes studio environment is just offering that.

If you want to have a more elaborate 3D experience (like having the 3D model actually change from position of form like turning a robot arm and opening and closing the claw), you need to build this yourself.

That custom solution should listen to changes published via the eventhub experience.

It is advertised the 3D Scene is an embeddable viewer component too so you could embed this into your own website but I have never seen a working example of this.

---

If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.