VIM Viewer - Custom Inputs

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

JavaScript

async function load(){
  // Create a new viewer. 
  const viewer = new VIM.Viewer()
  
	// Get default behaviour
	const base = new VIM.DefaultInputScheme(viewer)

	// Create a wrapper with our custom logic
	// You should see logs on click and on hover
  const customScheme = {
    onIdleAction(hit) {
      console.log('onIdleAction')
      base.onIdleAction(hit)
    },
    onKeyAction(key) {
      console.log('onKeyAction')
      return base.onKeyAction(key)
    },
    onMainAction(hit) {
      console.log('onMainAction')
      base.onMainAction(hit)
    },
  }

	// Replace viewer inputs with our new scheme
  viewer.inputs.scheme = customScheme

  // 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)
    }
  )

  // 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)
}
// Need function because you can't have top level async
load()