VIM Viewer Coloring

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 new 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)`)
	)
  
  // Add vim to viewer
  viewer.add(vim)
  
  // Load all geometry from vim
  await vim.loadAll()
  
	// Frame camera to loaded vim
  viewer.camera.snap().frame(vim)

  // get all bim objects with geometry
  const all = [...vim.getObjects()].filter((o) => o.hasMesh)

  // get objects center
  const pos = all.map((o) => o.getCenter())

  // compute position ranges to create appropriate colors
  const minX = Math.min(...pos.map((p) => p.x))
  const minY = Math.min(...pos.map((p) => p.y))
  const minZ = Math.min(...pos.map((p) => p.z))
  const maxX = Math.max(...pos.map((p) => p.x))
  const maxY = Math.max(...pos.map((p) => p.y))
  const maxZ = Math.max(...pos.map((p) => p.z))

  // assign a color to each object based on it's location.
  for (let i = 0; i < all.length; i++) {
    all[i].color = new VIM.THREE.Color(
      (pos[i].x - minX) / (maxX - minX),
      (pos[i].y - minY) / (maxY - minY),
      (pos[i].z - minZ) / (maxZ - minZ)
    )
  }
}

runDemo()