DOCS

Livelink.js

The Livelink.js SDK offers a JavaScript interface to interact with cloud-renderd 3D scene from a client application. Behind the scenes, it opens a WebSocket connection with the rendering engine and allows you to:

  • stream rendered frames to an HTML Canvas.
  • send commands to the rendering engine.
  • listen to events from the rendering engine.

Setup

  • Import the library in a script tag.
1
    <script src="https://cdn.3dverse.com/legacy/sdk/latest/SDK3DVerse.js"></script>
  • Add an HTML Canvas to your page.
1
2
3
4
5
6
7
8
<div class="canvas-container">
      <canvas
        id="display-canvas"
        oncontextmenu="event.preventDefault()"
        style="width: 100vw; height: 100vh;"
        tabindex="1"
      ></canvas>
    </div>
  • Get a Public Token and the UUID of the scene to from the 3dverse Console.
  • Join or start a session:
1
2
3
4
5
6
7
8
await SDK3DVerse.joinOrStartSession({
    userToken: "PUBLIC_TOKEN",
    sceneUUID: "SCENE_UUID",
    canvas: document.getElementById("display-canvas"),
    viewportProperties: {
       defaultControllerType: SDK3DVerse.controller_type.orbit,
    },
});

Putting it all together:

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
<html>
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width,initial-scale=1.0" name="viewport" />
  </head>
 
  <body>
    <div class="canvas-container">
      <!-- CANVAS -->
      <canvas
        id="display-canvas"
        oncontextmenu="event.preventDefault()"
        style="width: 100vw; height: 100vh;"
        tabindex="1"
      ></canvas>
    </div>
	
    <!-- LIVELINK SDK -->
    <script src="https://cdn.3dverse.com/legacy/sdk/latest/SDK3DVerse.js"></script>
 
    <!-- APP ENTRYPOINT -->
    <script type="module">
        async function InitApp() {
            await SDK3DVerse.joinOrStartSession({
                userToken: "PUBLIC_TOKEN",
                sceneUUID: "SCENE_UUID",
                canvas: document.getElementById("display-canvas"),
                viewportProperties: {
                    defaultControllerType: SDK3DVerse.controller_type.orbit,
                },
	          });
        }
        window.addEventListener("load", InitApp);
    </script>
  </body>
</html>

Code samples

Explore code samples on Github:

Reference Documentation

https://docs.3dverse.com/sdk/

Previous
Animation Sequence
Next
Asset API