# 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,
  UrlHelper,
  CameraController,
  MeasurementsExtension
} from "@speckle/viewer";


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

  /** Configure the viewer params */
  const params = DefaultViewerParams;
  params.verbose = true;

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

  /** Add the stock camera controller extension */
  viewer.createExtension(CameraController);
  /** Add mesurements extension */
  const measurements = viewer.createExtension(MeasurementsExtension);

  const urls = await UrlHelper.getResourceUrls(
    "https://app.speckle.systems/projects/7591c56179/models/32213f5381"
  );
  for (const url of urls) {
    const loader = new SpeckleLoader(viewer.getWorldTree(), url, "");
    /** Load the speckle data */
    await viewer.loadObject(loader, true);
  }

  measurements.enabled = true;
}

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
30
31
32
33
34
35
36
37
38
39
40
41
42

You can run the example live here (opens new window) or embedded below

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, our speckle frontend (opens new window). Alternatively, you can also run the viewer-sandbox here (opens new window)

← Basic Setup Overview →