Developers
<!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>
index.html
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/7591c56179/models/32213f5381" ); for (const url of urls) { const loader = new SpeckleLoader(viewer.getWorldTree(), url, ""); /** Load the speckle data */ await viewer.loadObject(loader, true); } } main();
index.ts
Basic Setup Example