VIM Viewer Sample

by mavimaec

HTML

<html>

  <body>
    <script src="https://unpkg.com/three@0.143.0"></script>
    <script src="https://unpkg.com/vim-webgl-viewer@latest"></script>
  </body>

</html>

CSS

/* Makes full screen and remove scrollbars */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, #d8d8e6, #8a8a8a);
  touch-action: none; /* This prevents touches from being eaten up by the browser. */
}

canvas {
  display: block;
}

JavaScript

class VIMThreeLoader extends THREE.Loader {

	constructor(manager) {
  	super(manager);
  }
  
  load(url, onLoad, onProgress, onError) {
    try {
      const innerVimLoader = new VIM.Loader();
      const vimLoadRequest = innerVimLoader.createRequest(url, {
        rotation: new THREE.Vector3(270, 0, 0)
      });

      vimLoadRequest.onProgress.sub((progress) => {
        if (onProgress) {
          onProgress(progress)
        } else {
        	console.log(`Loading : ${progress.loaded}`); 
        }
      });

      vimLoadRequest.send().then(vim => {
        const group = new THREE.Group();
        for(const mesh of vim.scene.meshes)
        {
          group.add(mesh.mesh);
        }
        onLoad(group);
      });
      
    } catch (e) {
      if (onError) {
        onError(e);
      } else {
        console.error(e);
      }
    }
  }
}

let camera, scene, renderer;

function init() {

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // Create camera.
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(-75, 75, -75);
  camera.lookAt(0, 0, 0);
  
  // Create scene.
  scene = new THREE.Scene();
  
  const vimThreeLoader = new VIMThreeLoader();
  vimThreeLoader.load(
  	"https://vim.azureedge.net/samples/residence.vim",
    grp => scene.add(grp));
    
  var light = new THREE.DirectionalLight(0xffffff);
  light.position.set(-20, 50, -50);
  scene.add(light);
  
  // Add listener for window resize.
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
 ...