Speckle Docs

# Basic Setup

The first thing you'll need is a container for the viewer and a javascript (opens new window)/typescript (opens new window) script which will run the viewer code.

We'll create a simple HTML and a simple typescript file

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div id="renderer" style="width:100%;height:100%;left:0px;top:0px;position:absolute" </div>

    <script src="src/index.ts"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Now save this HTML snippet as index.html

Next we'll create the typescript file:

import { Viewer, DefaultViewerParams, SpeckleLoader } from "@speckle/viewer";
import { CameraController } from "@speckle/viewer";

async function main() {
  /** Get the HTML container */
  const container = document.getElementById("renderer");

  /** Create Viewer instance */
  const viewer = new Viewer(container, DefaultViewerParams);
  /** Initialise the viewer */
  await viewer.init();

  /** Add the stock camera controller extension */
  viewer.createExtension(CameraController);

  /** Create a loader for the speckle stream */
  const loader = new SpeckleLoader(
    viewer.getWorldTree(),
    "https://latest.speckle.dev/streams/92b620fb17/objects/801360a35cd00c13ac81522851a13341",
    ""
  );
  /** Load the speckle data */
  await viewer.loadObject(loader, 1, true);
}

/** Call our function, which we named 'main' */
main();
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

Now save this typescript snippet asindex.ts

The result:

← Advanced Setup →