Vertex Viewer: Loading a Model

by Dan Schultz

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>3D viewer with Vertex</title>
  
  <link rel="stylesheet" href="https://unpkg.com/@vertexvis/[email protected]/dist/viewer/viewer.css"/>
  <script type="module" src="https://unpkg.com/@vertexvis/[email protected]/dist/viewer/viewer.esm.js"></script> 
  <script nomodule src="https://unpkg.com/@vertexvis/[email protected]/dist/viewer.js"></script> 
  
  <style>
    html, body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    .viewer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <vertex-viewer
    id="viewer"
    class="viewer"
    credentials-api-key="exAge7ePgzoj_FqpNi-IUQNw93XQt3q6P4FUET2ZLDk="
  >
    <vertex-viewer-toolbar class="viewer-toolbar" data-viewer="viewer"></vertex-viewer-toolbar>
  </vertex-viewer>

</body>
</html>

JavaScript

window.addEventListener("DOMContentLoaded", () => {
	main();
})

async function main() {
	const viewer = document.querySelector('#viewer');
  
  // Different approaches for loading a model
  loadModelByFileId(viewer, '2c2410ee-6ab9-45ee-a80b-255f2e20160e');
  //loadModelByExternalFileId(viewer, 'external-file-id');
  //loadModelBySceneStateId(viewer, 'scene-state-uuid');
}

/**
 * Loads a scene by a Vertex file ID. You can retrieve the file ID
 * from the Vertex app, by opening a file and copy/pasting the ID
 * from the URL, e.g. https://app.vertexvis.com/file/2c2410ee-6ab9-45ee-a80b-255f2e20160e
 */
async function loadModelByFileId(viewer, fileId) {
	const newScene = await viewer.newScene();
  newScene
    .from(`urn:vertexvis:eedc:file:${fileId}`)
    .execute()
    .then(scene => viewer.load(scene));
}

/**
 * Loads a scene by an external ID. An external ID can be assigned by
 * you when uploading a file through our API. This is useful if you 
 * prefer your app to manage the IDs of files to load in the viewer.
 */
async function loadModelByExternalFileId(viewer, externalId) {
	const newScene = await viewer.newScene();
  newScene
  	.from(`urn:vertexvis:eedc:file?externalId=${externalId}`)
    .execute()
    .then(scene => viewer.load(scene));
}

/**
 * Loads a model by scene state. This approach can be used to load
 * a snapshot. The easiest way at the moment to get a snapshot's 
 * scene state ID is by using the browser's dev tools to inspect the 
 * network response for the  `GET /model_snapshot_versions` API call.
 */
async function loadModelBySceneStateId(viewer, sceneStateId) {
	const newScene = await viewer.newScene();
  newScene
  	.from(`urn:vertexvis:eedc:scenestate:${sceneStateId}`)
   	.execute()
    .then(scene => viewer.load(scene));
}