// Initialize viewer component
let viewerConfigs = {
domElementId: "viewer",
showUI: true
};
let viewer = new bimU.Viewer(viewerConfigs);
viewer.initialize();
// Add custom buttons
viewer.addCustomButton("button1", "flare", "#e91e63", "Highlight 3rd Floor", () => hightlightFloor("3F"));
viewer.addCustomButton("button2", "flare", "#e91e63", "Highlight 5th Floor", () => hightlightFloor("5F"));
// Button callback
let hightlightFloor = (floorName) => {
// Filter out exterior wall elements on a particular floor
let propertyFilter1 = new bimU.PropertyFilter("Element", "Category", "Walls");
let propertyFilter2 = new bimU.PropertyFilter("Constraints", "Base Constraint", floorName);
// Return element index for highlighting
let propertySelector = new bimU.PropertySelector(null, "eIdx");
// Send query to BIM database
viewer.getElementDataByProperty([propertyFilter1, propertyFilter2], [propertySelector], 1000, (data) => {
// Change element color by element index
let elementIndexArray = data.map(element => Number(element.eIdx));
viewer.setColor(elementIndexArray, new THREE.Color(0xff0000));
}, onError);
}
// Callbacks
let onPorgress = (e) => {
console.log(e);
viewer.showDialog("Loading...", "Progress:" + e.progress, "Close", null, null, true);
};
let onLoaded = (e) => {
console.log(e);
viewer.closeDialog();
};
let onError = (e) => console.error(e);
// Load model
let modelConfigs = {
modelId: "5dffdeb8cb9115000420d21f",
password: "123456",
};
viewer.loadModel(modelConfigs, onPorgress, onLoaded, onError);
<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: