VIM Viewer Sample

by simon_vimaec

HTML

<script src="https://unpkg.com/vim-webgl-viewer@2.0.2"></script>

CSS

/* Makes full screen and remove scrollbars */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, #d8d8e6, #8a8a8a);
  touch-action: none; /* This prevents touches from being eaten up by the browser. */
}

JavaScript

async function runDemo() {

	// Create a new viewer. 
  const viewer = new VIM.Viewer()

	// Open the vim file
	const vim = await VIM.open(
  	'https://vim02.azureedge.net/samples/residence.v1.2.75.vim',
    {
  		rotation: new VIM.THREE.Vector3(270, 0, 0)
  	},
    (p) => console.log(`Downloading Vim (${(p.loaded / 1000).toFixed(0)} kb)`)
  )
  
  // Load all geometry from vim file.
	await vim.loadAll()

	// Add loaded vim to the viewer.
  viewer.add(vim)

	// Immediately frame loaded vim.
	viewer.camera.snap().frame(vim)
  
  // a short delay for presentational purposes
  await delay() 

  // Select two walls (Revit elements 183470 and 201739)
  const vimObjects = [
    ...vim.getObjectsFromElementId(183470),
    ...vim.getObjectsFromElementId(201739),
  ]
  viewer.selection.select(vimObjects)
  
  // a short delay for presentational purposes
  await delay()

	// Update the section box to match selected objects
  const bbox = viewer.selection.getBoundingBox().expandByScalar(-1)
  viewer.renderer.section.fitBox(bbox)
  viewer.renderer.section.active = true

  // a short delay for presentational purposes
	await delay()

	// Frame new bounding box with a 1 seconds lerp.
	viewer.camera.lerp(1).frame(bbox)
}

async function delay() {
  return new Promise(resolve => setTimeout(resolve, 1000));
}

runDemo()