VIM Viewer - Section

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;
  touch-action: none; /* This prevents touches from being eaten up by the browser. */
}

.vim-measure {
  background-color: white;
}

.vim-measure table {
  border-collapse: collapse;
}

.vim-measure table tr {
  border: 1px solid;
  border-color: black;
}

.vim-measure-label-d,
.vim-measure-label-x,
.vim-measure-label-y,
.vim-measure-label-z {
  color: white;
  width: 10px;
  text-align: center;
  padding: 5px;
}

.vim-measure-label-d {
  background-color: black;
}
.vim-measure-label-x {
  background-color: red;
}
.vim-measure-label-y {
  background-color: green;
}
.vim-measure-label-z {
  background-color: blue;
}

.vim-measure-value-d,
.vim-measure-value-x,
.vim-measure-value-y,
.vim-measure-value-z {
  text-align: center;
  padding: 5px;
}

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 vim to viewer
  viewer.add(vim)

	// Frame Camera
	viewer.camera.snap().frame(vim)

	// Enable interactive section box
	viewer.gizmos.section.clip = true
  viewer.gizmos.section.interactive = true
  viewer.gizmos.section.visible = true

	// Get two object from the revit ids.
  const vimObjects = [
    ...vim.getObjectsFromElementId(183470),
    ...vim.getObjectsFromElementId(201739),
  ]
	// Select found objects
  viewer.selection.select(vimObjects)
  
	// Update the section box to fit selection.
  const bbox = viewer.selection.getBoundingBox()
  viewer.gizmos.section.fitBox(bbox)
  viewer.selection.clear()
}

runDemo()