Skip to main content

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.
<script src="https://cdn.3dverse.com/legacy/sdk/latest/SDK3DVerse.js"></script>
  • Add an HTML Canvas to your page.
<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:
await SDK3DVerse.joinOrStartSession({
    userToken: "PUBLIC_TOKEN",
    sceneUUID: "SCENE_UUID",
    canvas: document.getElementById("display-canvas"),
    viewportProperties: {
        defaultControllerType: SDK3DVerse.controller_type.orbit,
    },
});

Putting it all together:

<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/