bimU.io Viewer API Demo

Create 3D zone based on floor element

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bimu.io.viewer@latest/dist/bimU.io.Viewer.umd.js"></script>
<div id="viewer" style="width:600px;height:400px;background-color:black;border:5px solid gray;"></div>

CSS

.image {
  width: 60px;
  height: 40px;
  margin: 5px;
  border: 2px solid gray;
}

JavaScript

// Initialize viewer component
let viewerConfigs = {
  domElementId: "viewer",
  showUI: true
};
let viewer = new bimU.Viewer(viewerConfigs);
viewer.initialize();

// Model loaded event
let onModelLoaded = (e) => {
  console.log(e);
  viewer.closeDialog();
  // Find all floor elements on 6F
  let propertyFilter1 = new bimU.PropertyFilter("Element", "Category", "Floors");
  let propertyFilter2 = new bimU.PropertyFilter("Constraints", "Level", "6F");
  // Return element index and floor area
  let propertySelector1 = new bimU.PropertySelector(null, "eIdx");
  let propertySelector2 = new bimU.PropertySelector("Dimensions", "Area");
  // Send query to BIM database
  viewer.getElementDataByProperty([propertyFilter1, propertyFilter2], [propertySelector1, propertySelector2], 1000, (data) => {
    // Iterate over floor elements and create extrusions
    data.forEach(element => createExtrusion(element.eIdx, element.Area));
    // Create section box around 6F
    viewer.setViewpoint(savedViewpoint);
  }, onError);
}

let createExtrusion = (elementIndex, area) => {
  // Get buffer geometry
  let geometry = viewer.getGeometry(elementIndex);
  // Calculate elevation
  geometry.computeBoundingBox();
  let centroid = new THREE.Vector3();
  geometry.boundingBox.getCenter(centroid);
  let elevation = centroid.z;
  // Elevate top surface
  let positions = geometry.attributes.position.array;
  let numberOfVertices = positions.length / 3;
  for (let i=0; i<numberOfVertices; i++) {
    let z = positions[i * 3 + 2];
    if (z > elevation) {
      // Move up by an arbitrary number
      positions[i * 3 + 2] = z + 1.5;
    }
  }
  // Get rid of unit suffix
  let parsedArea = Number(area.substring(0, area.length-3));
  // Determine color based on floor size
  let color = parsedArea < 10 ? 0x00ff00 : parsedArea > 20 ? 0xff0000 : 0xffff00;
  // Create mesh
  let material = new THREE.MeshBasicMaterial({
    color: color,
    opacity: 0.55,
    transparent: true
  });
  let mesh = new...