VIM Viewer - Measure

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 VIM 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 loaded vim.
	await vim.loadAll()
  
  viewer.camera.snap().frame(vim)
	
  // Add loaded vim to a viewer 
  viewer.add(vim)

	// This starts a measure user sequence, click once to set first point then again to set second point.
	viewer.gizmos.measure.start()
}

runDemo()