DOCS

How to use the Label extension?

The Label extension lets you display clickable labels on points of interest, to teleport to that point while keeping the orientation of the camera.

Creating a Label

Create a new Label in the Scene Editor by right click on a point and selecting Label.

Display a Label on the canvas using the Livelink.js SDK

Include the following extensions in your code:

1
2
<script src="https://cdn.3dverse.com/legacy/sdk/latest/SDK3DVerse_ViewportDomOverlay_Ext.js"></script>
<script src="https://cdn.3dverse.com/legacy/sdk/latest/SDK3DVerse_LabelDisplay_Ext.js"></script>

Install the extensions:

1
2
await SDK3DVerse.installExtension(SDK3DVerse_ViewportDomOverlay_Ext);
await SDK3DVerse.installExtension(SDK3DVerse_LabelDisplay_Ext);

Add the CSS for the extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.SDK3DVerse-viewport {
    border: none !important;


    .label {
        position: absolute;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        border-radius: 1rem;
        font-size: 0.75rem;
        line-height: 1rem;
        color: rgba(9, 11, 12, 0.6);
        background-color: rgba(241, 241, 241, 0.7);
        transition: opacity 0.35s ease 0s, color 0.35s ease 0s, background-color 0.35s ease 0s;
        user-select: none;
        cursor: pointer;
        z-index: 1;
        pointer-events: all !important;
    }


    .label-title {
        position: absolute;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        top: -12px;
        left: -12px;
        transform-origin: left center;
        width: max-content;
        max-width: 15rem;
        min-height: 24px;
        padding: 0.25rem 0.75rem 0.25rem 1.75rem;
        font-size: 0.75rem;
        line-height: 1rem;
        border-radius: 12px;
        color: rgba(9, 11, 12, 0.8);
        background-color: rgba(241, 241, 241, 0.9);
        transition: opacity 0.25s ease 0s, transform 0.25s ease 0s;
        opacity: 0;
        pointer-events: none;
    }


    .label-container {
        &:hover {
            .label-title {
                opacity: 1;
            }


            .label {
                color: rgba(241, 241, 241, 0.9);
                background-color: red;
            }
        }
    }
}
Previous
See other users' avatar in your scene
Next
How to create a cutting plane?