VIMReact - Custom Camera

by simon_vimaec

HTML

<script>  
  window.process = { env: { NODE_ENV: 'development' } };
</script>
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/vim-webgl-component@0.3.8"></script>
<link rel="stylesheet" href="https://unpkg.com/vim-webgl-component@0.3.7/dist/style.css">

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

// create a component and setup callback
VIMReact.createVimComponent(async (cmp) => {
  // Open a new vim file
  const vim = await cmp.loader.open(
    'https://vim02.azureedge.net/samples/residence.v1.2.75.vim',
    {
      rotation: new VIMReact.THREE.Vector3(270, 0, 0),

			// Tell the loader not to frame the model
			autoFrame: false
    }
  )

	// Frame the model our own way using viewer api.
  cmp.viewer.camera.snap().frame(vim, new VIMReact.THREE.Vector3(0,0,1))
  cmp.viewer.camera.snap().setDistance(200)
  
	// Add an orbit camera animation
  const animation = () => {
    cmp.viewer.camera.snap().orbit(new VIMReact.THREE.Vector2(0, 1))
    setTimeout(() => animation(), 20)
  }
  animation()

})