// 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 THREE.Mesh(geometry, material);
// Add custom object
viewer.addObject(mesh);
};
// Callbacks
let onPorgress = (e) => {
console.log(e);
viewer.showDialog("Loading...", "Progress:" + e.progress, "Close", null, null, true);
};
let onError = (e) => console.error(e);
// Load model
let modelConfigs = {
modelId: "5dffdeb8cb9115000420d21f",
password: "123456",
};
viewer.loadModel(modelConfigs, onPorgress, onModelLoaded, onError);
let savedViewpoint = {
"camera": {
"cameraViewPoint": {
"x": 6.004575681354089,
"y": -12.459349681696981,
"z": 31.946650634785726
},
"cameraDirection": {
"x": -0.12024930591487984,
"y": 0.45238642721360034,
"z": -0.8836778965776522
},
"cameraUpVector": {
"x": -0.22700850372467152,
"y": 0.8540221098640179,
"z": 0.468095476478994
},
"viewToWorldScale": 0,
"fieldOfView": 60
},
"clippingPlanes": [{
"normal": {
"x": -1,
"y": 0,
"z": 0
},
"constant": -8.290498536252258
},
{
"normal": {
"x": 1,
"y": 0,
"z": 0
},
"constant": -12.60828907410896
},
{
"normal": {
"x": 0,
"y": -1,
"z": 0
},
"constant": -10.40223468714916
},
{
"normal": {
"x": 0,
"y": 1,
"z": 0
},
"constant": -7.758727442173196
},
{
"normal": {
"x": 0,
"y": 0,
"z": -1
},
"constant": 14.541740692019067
},
{
"normal": {
"x": 0,
"y": 0,
"z": 1
},
"constant": -17.475563661771346
}
],
"originatingSystem": "bimU.io Web Viewer"
};
<div id="viewer" style="width:600px;height:400px;background-color:black;border:5px solid gray;"></div>
.image {
width: 60px;
height: 40px;
margin: 5px;
border: 2px solid gray;
}
External resources loaded into this fiddle: