VIM Viewer - Embedding

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. */
}

JavaScript

async function runDemo() {
	// Create a viewer
  const viewer = new VIM.Viewer()

  // Create or get a ref to some div
  const div = document.createElement('div')
  div.style.width = '400px'
  div.style.height = '400px'
  document.body.appendChild(div)

 // Reparent viewer canvas and resize
 div.appendChild(viewer.viewport.canvas)
 viewer.viewport.ResizeToParent()

 // Axes gizmo canvas needs to be manually styled for now.
 div.appendChild(viewer.gizmos.axes.canvas)
 viewer.gizmos.axes.canvas.style.right = ''
 viewer.gizmos.axes.canvas.style.left = '312px'

	// 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)
  
// Immediatetly frame camerat to the vim.
  viewer.camera.snap().frame(vim)
}

runDemo()