Speckle Docs

# Advanced Setup

The viewer can be extended with functionality via extensions. The package already contains a few stock extensions that offer typical functionality.

Using our previous basic example, we can add the measurement tool for example

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);
  /** Add the measurement tool */
  viewer.createExtension(MeasurementsExtension);

  /** 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
28
29

Adding more extensions is easy, and all you need to do is call the viewer's createExtension function with the extension type you want to add.

Here is the complete list of available stock extensions:

Extension Description
CameraController Provides basic camera orbit controls
SelectionExtension Selection/hover effect, focus on objects
SectionTool Adds a customisable section box
SectionOutlines Adds outlines to sectioned objects
MeasurementsExtension Provides measurement functionality
FilteringExtension Filtering functionality
DiffExtension Diffing functionality

All the available stock extensions are designed to work together, in order to offer the complete set of viewer functionality. To see all of them in action, you can checkout our viewer-sandbox (opens new window) project, or our speckle frontend (opens new window)

← Overview →