// 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();
// Create section box around kitchen
viewer.setViewpoint(savedViewpoint);
// Add tags
placeTag(2264, "A", "Kitchen Stove", true);
placeTag(2263, "B", "Kitchen Sink", true, {
backgroundColor: {
r: 13,
g: 71,
b: 161,
a: 1
}
});
placeTag(2260, "C", "Dishwasher", false);
placeTag(2261, "D", "Fridge", false);
}
// Place tag based on bounding box
let placeTag = (elementIndex, text, description, isAbove, options) => {
let geometry = viewer.getGeometry(elementIndex);
geometry.computeBoundingBox();
let centroid = new THREE.Vector3();
geometry.boundingBox.getCenter(centroid);
let max = geometry.boundingBox.max;
let min = geometry.boundingBox.min;
let location = isAbove ? new THREE.Vector3(centroid.x, centroid.y, max.z + 0.25) : new THREE.Vector3(min.x - 0.25, centroid.y, centroid.z);
viewer.addTag(text, location, options, () => {
viewer.showDialog("Information", `You clicked <strong>${description}</strong>`, "Close", null, null, true);
});
}
// 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": 8.20120215494602,
"y": -2.061526839179251,
"z": 17.293298244585234
},
"cameraDirection": {
"x": 0.8947962734542944,
"y": -0.1951692465412887,
"z": -0.4015577096966431
},
"cameraUpVector": {
"x": 0.39233360129025074,
"y": -0.08557417551712654,
"z": 0.9158337216892521
},
"viewToWorldScale": 0,
"fieldOfView": 60
},
"clippingPlanes": [{
"normal": {
"x": -1,
"y": 0,
"z": 0
},
"constant": 10.46457574376622
},
{
"normal": {
"x": 1,
"y": 0,
"z": 0
},
"constant": -11.618502956354744
},
{
"normal": {
"x": 0,
"y": -1,
"z": 0
},
"constant": -4.18506522704463
},
{
"normal": {
"x": 0,
"y": 1,
"z": 0
},
"constant": 1.1940020120402584
},
{
"normal": {
"x": 0,
"y": 0,
"z": -1
},
"constant": 15.31659789550772
},
{
"normal": {
"x": 0,
"y": 0,
"z": 1
},
"constant": -17.333731004469435
}
],
"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: