Basic Setup

The first thing you’ll need is a container for the viewer and a javascript/typescript script which will run the viewer code. We’ll create a simple HTML and a simple typescript file

Basic Setup HTML

<!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="speckle" style="position:absolute;inset:0" />

    <script src="src/index.ts"></script>
  </body>
</html>

Now save this HTML snippet as index.html Next we’ll create the typescript file:

Basic Setup JavaScript

import { Viewer, DefaultViewerParams, SpeckleLoader, UrlHelper } from '@speckle/viewer'
import { CameraController, SelectionExtension } from '@speckle/viewer'

async function main() {
  /** Get the HTML container */
  const container = document.getElementById('speckle')

  /** Configure the viewer params */
  const params = DefaultViewerParams
  params.showStats = true
  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 the selection extension for extra interactivity */
  viewer.createExtension(SelectionExtension)

  /** Create a loader for the speckle stream */
  const urls = await UrlHelper.getResourceUrls(
    'https://app.speckle.systems/projects/<PROJECT_ID>/models/<MODEL_ID>'
  )
  for (const url of urls) {
    const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
    /** Load the speckle data */
    await viewer.loadObject(loader, true)
  }
}

main()

Now save this typescript snippet asindex.ts You can run the live example here or below:

Basic Setup Example

Speckle Viewer

Core Concepts

API Reference

Examples

Reference