Create points of interests

A classic feature that we see in most use cases of our customers is the ability to move from one point of view to another, allowing the end user to navigate smoothly. Here is how to achieve this in a few minutes.

What is a Point of Interest?

In 3dverse, a Point of Interest (POI) is an entity with a Label component. It represents a predefined camera position in your 3D scene and allows users to jump between key views or areas, creating guided navigation or storytelling experiences.

A Point of Interest is an entity with a Label component.

Creating a Point of Interest

You can create POIs using labels in the 3dverse Editor:

1. Open your scene in the 3dverse Editor.
2. Position your camera where you want your POI to be.
3. Add a label at this position (two options):
   • Option 1: Right-click on the 3D view and select Label.
   • Option 2: Add an entity in the Scene Graph and attach the
     Label
     Entity Component

     Label label

     Display a label in the 3d view.

     Schema

     camera

     Default: [0,0,0,0,0,0,1]

     Camera distance from the label.

     description

     String

     Description of the label.

     speed

     Float

     Default: 15

     Travel speed in units per second.

     title

     String

     Title of the label.

     View in reference
     component.
4. Name it clearly (e.g., Entrance, Machine View, Overview).
5. Repeat for each viewpoint you want to define.

Use descriptive names — they will be used to identify each POI later in your application.

Overview of Label properties

Once created, your label will appear in the Scene Graph. Select the label to view its properties in the Components panel. A Label has four key properties:

• Title: The title of the POI.
• Description: Optional information that can be consumed later in your application.
• Camera: The final position of the camera when the user selects this POI. To update it, navigate to the desired position and click on
  Take a snapshot
  
  .
• Speed: The speed at which the camera moves to the POI. Unit: km/h, consistent with 3dverse conventions.

Select your point of interest in the scene graph to view and edit the label component’s properties in the Components panel.

Using POIs in your Application

You can now consume these POIs in your web application. Check out this React sample:

Camera Travel Sample

Shows how to implement a simple camera travel system using labels defined in the scene.

It demonstrates how to:

• Retrieve all labels (POIs) from your 3D scene.
• Add a CSS button for each POI that moves the user camera when clicked.

Enhancing the Experience

• Combine POIs with UI overlays or info panels to provide context or data about each location.
• Add smooth camera transitions or animations for a more natural navigation experience.