Embedding 3D Scenes
Azure Digital Twins 3D Scenes Studio is built entirely with React components from Cardboard, and developers can leverage these components in their applications to embed 3D experiences they have built in ADT 3D Scenes Studio.
There are a couple prerequisites to embedding the 3D Scene viewer...
Azure Digital Twins does not support CORS, so you will need to have a proxy server running as part of your app. The Storybook middleware in the repo is the proxy code that we use to access the ADT APIs. You must use this proxy on your backend. It's pretty straightforward, and should drop right into your server side node app code.
We are working on supporting CORS on the ADT APIs, stay tuned for more, but until then you will need to use the proxy.
Your storage container will also need to support CORS requests for your app URL, since that is how we load the 3D files. If you've used the hosted ADT 3D Scenes Studio experience, you've configured CORS for your storage container already, you just need to add a request URL for your site.
To get tokens to access the ADT API and Azure Storage, you'll need to configure an App Registration in Azure Active Directory. This article describes how to create an App Registration that can access Azure Digital Twins. You'll also need to add API permissions for Azure Storage, like so...
The Cardboard npm package can be installed in your application via npm install @microsoft/iot-cardboard-js@beta.
The package is currently in beta, and not snapped to a proper semantic version because we are not currently committing to maintaining backwards compatibility across beta releases. This means that the props that you are using in your embedded component may change if you upgrade the package to a new beta release. As we update the package, we will do our best to update the example accordingly, so stay tuned to this wiki page and the example referenced below.
Now that you've set up CORS and created an App Registration, you should be able to leverage the ADT3DViewer control exactly as it is done in this example.
That's it! Assuming you've set everything up correctly, you should see a viewer like this, showing the scene ID specified in the props for the component.
Please let us know if you are hitting issues working with embedding the component by filing an Issue, and we'd be happy to help debug what you're seeing, and improve the content!