Quick Start: Your First 3D Real-Time Scene in 5 Minutes

This guide provides a rapid, step-by-step walkthrough to get your first real time 3D scene up and running with real-time data visualization in Twinnoverse.

Goal: Create a simple 3D scene, add an asset, link an asset custom UI to a data-source, and see live data updates.

Prerequisites: Twinnoverse application installed and you are successfully authenticated.

If you haven’t done so, please refer to “Welcome to Twinnoverse“, For installation and authentication instructions.

Step 1: Create a Datasource #

Datasources are the channels through which Twinnoverse receives external data. In this step, you’ll set up a new data stream.

1. From the Dashboard, navigate to the Datasources tab.
2. Click the “Create New Datasource” button.
3. Enter a Name (e.g., MyFirstData).
4. Click “Confirm”.
5. IMPORTANT: The generated API Key and Ingestion URL are essential for sending data to this datasource.

Step 2: Upload a 3D Asset #

Bring your own 3D models into Twinnoverse to represent your physical assets. Here, you’ll add a model that will later display your data (You can download the 3d model used in this demo from Here)

1. From the Dashboard, navigate to the Assets tab.
2. Click the “Upload New Asset” button.
3. Click “Select File” and choose a 3D model file from your computer , Or use the demo model (e.g., .glb).
4. Provide an Asset Name.
5. Click “Confirm Upload“.

To learn more about supported formats and asset preparation, see Asset Management.

Step 3: Configure Your Asset with a Widget #

Widgets are visual components that display data directly on your 3D assets. You’ll add a simple widget to show a single data point.

1. In the Assets tab, find the asset card you just uploaded and click on it. This opens the Asset Editor.
2. On either the Left or Right panel, click the “+ Add Widget” button.
3. From the Widget Library, select “Single Data Widget“.
4. In the Widget Settings panel:
   • For Datasource, select MyFirstData (or whatever you named your datasource in the Step 1) from the dropdown.
   • For Data Key, type value (this is the specific key within your JSON data that this widget will monitor).
   • For Title, type: Total Production (this will be the label displayed on the widget).
   • Click “Save“.

For a comprehensive guide on widgets and their configurations, visit The Widget System.

Step 4: Create and Build a Scene #

Scenes are your 3D canvases where you arrange and interact with your assets. Here, you’ll create a new scene and place your asset within it.

1. From the Dashboard, navigate to the Scenes tab.
2. Click the “Create New Scene” button.
3. Enter a Scene Name (e.g., MyFirstScene).
4. Click “Confirm”.
5. Find your new scene card in the list and click on edit button. This will open the Scene Editor.
6. In the Scene Editor, Click on the build icon in the bottom panel and then select your uploaded asset from the available assets(located on the right side of the screen).
7. Click on the grid within the 3D view to place your asset.
8. Click the “Save” button to save your scene layout.

Step 5: View Your Scene #

Experience your 3D Scene! This step takes you to the live view of your configured scene.

1. From the Dashboard, navigate back to the Scenes tab.
2. Find  MyFirstScene  and click on the card.
3. You should now see your 3D asset in the space, Click on the 3D assets to display the assigned widget with the “Total Production” Title. It will likely display “—” or a default value, as no real-time data has been sent yet.

To learn more about scene manipulation, refer to the Scene page. To explore navigation and discover additional features for building your environments.

Step 6: Send Data to Your Datasource #

This is where you push live data to your Twinnoverse datasource, which will then be reflected in your 3D scene.

1. Open an API client like Postman, Thunder client or Bruno.
2. Create a new POST request.
3. Set the URL to the Ingestion URL you noted in Step 1.
4. Go to the Headers section and add:
   • Key(or name): X-API-Key and in the Value: YOUR_API_KEY (Replace YOUR_API_KEY with the API Key from Step 1).
5. Go to the Body section, select JSON.
6. Enter the following JSON payload, matching the Data Key you set for your widget(You can copy this from the datasource json body):

{
    "Your json key": 42.7
}

• Click “Send” in your API client, the Response Tab should retuern a response of success

Refer to the Developer & API section for detailed documentation and other methods of sending your data.

Step 7: Observe Real-time Updates #

Switch back to your Twinnoverse Scene Viewer. You should immediately see the “Production” widget on your 3D asset update to `42.7`!

Congratulations! #

Congratulations! You’ve successfully created and visualized your first real-time 3D scene in Twinnoverse. Experiment with different values and watch your digital replica come alive!