Understanding 2D labels

In developing a Twinfinity App, the integration of interactive elements like labels can significantly enhance user experience and data representation. This article delves into a playground example that demonstrates how to dynamically place and update 2D labels in your model.

A 2D label is rendered on top of the Twinfinity canvas, almost like the camera is showing the scene through a glass pane. 2D labels are ideal for displaying data from the model on top of the model giving the user a possibility to consume data from the model in an easy to get an over view format.

Code Overview

Key Functionalities

1. Initializing the Environment: The script sets up a 3D scene, enabling a grid and disabling the skybox for clarity. It also prevents scrolling outside the canvas area for a streamlined user experience.

2. Loading and Filtering Data: It begins by loading property sets and filtering out specific types of spaces (LOA and ROOM) based on the Swedish BIP standard.

3. Creating a Coordinate Tracker: A central feature is the implementation of a CoordinateTracker to update label positions in real-time, a vital component for interactive 3D environments.

4. Adapting to Screen Scaling: The code accommodates hardware scaling, ensuring that labels are correctly positioned on screens with different resolutions, like 4K displays.

5. Interactive Labeling: It dynamically creates and positions labels for each space, using the center of geometry for placement.

Practical Applications

The ability to dynamically place and update labels based on user interaction and camera movement makes it a potent tool for interactive 3D visualizations and showing data from the model in a spatial context allowing the user to quickly get an overview of selected data points in the context of the 3D model.