181 lines
5.3 KiB
HTML
181 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>xeokit-bim-viewer</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
touch-action: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.heading {
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.project-selector {
|
|
margin: 20px 0;
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.model-selector {
|
|
margin: 20px 0;
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.viewer {
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
let bimViewerComponent = null;
|
|
let select = null;
|
|
let modelSelect = null;
|
|
let projectModels = new Map();
|
|
let isProgrammaticModelChange = false;
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
select = document.getElementById('projectSelector');
|
|
modelSelect = document.getElementById('modelSelector');
|
|
bimViewerComponent = document.querySelector("xeokit-bim-viewer");
|
|
|
|
try {
|
|
const response = await fetch('./app/data/projects/index.json');
|
|
const projectsData = await response.json();
|
|
|
|
if (projectsData.projects) {
|
|
projectsData.projects.forEach(project => {
|
|
const option = document.createElement('option');
|
|
option.value = project.id;
|
|
option.textContent = project.name;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
await Promise.all(projectsData.projects.map(async (project) => {
|
|
try {
|
|
const projectResponse = await fetch(`./app/data/projects/${project.id}/index.json`);
|
|
const projectData = await projectResponse.json();
|
|
projectModels.set(project.id, projectData.models || []);
|
|
} catch (error) {
|
|
console.error(`Error loading models for project ${project.id}:`, error);
|
|
projectModels.set(project.id, []);
|
|
}
|
|
}));
|
|
|
|
if (select.value) {
|
|
const initialProjectId = select.value;
|
|
const initialModels = projectModels.get(initialProjectId) || [];
|
|
|
|
initialModels.forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.textContent = model.name;
|
|
modelSelect.appendChild(option);
|
|
});
|
|
|
|
if (initialModels.length > 0) {
|
|
const firstModel = initialModels[0];
|
|
modelSelect.value = firstModel.id;
|
|
bimViewerComponent.setAttribute('projectId', initialProjectId);
|
|
setTimeout(() => {
|
|
bimViewerComponent.setAttribute('modelId', firstModel.id);
|
|
}, 500);
|
|
}
|
|
modelSelect.disabled = false;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading projects data:', error);
|
|
}
|
|
|
|
select.addEventListener('change', onProjectChange);
|
|
modelSelect.addEventListener('change', onModelChange);
|
|
});
|
|
|
|
async function onProjectChange() {
|
|
const newProjectId = select.value;
|
|
modelSelect.disabled = true;
|
|
modelSelect.innerHTML = '';
|
|
|
|
isProgrammaticModelChange = true;
|
|
bimViewerComponent.setAttribute('projectId', newProjectId);
|
|
|
|
const models = projectModels.get(newProjectId) || [];
|
|
|
|
models.forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.textContent = model.name;
|
|
modelSelect.appendChild(option);
|
|
});
|
|
|
|
if (models.length > 0) {
|
|
const firstModel = models[0];
|
|
modelSelect.value = firstModel.id;
|
|
bimViewerComponent.setAttribute('modelId', firstModel.id);
|
|
}
|
|
|
|
modelSelect.disabled = false;
|
|
setTimeout(() => {
|
|
isProgrammaticModelChange = false;
|
|
}, 0);
|
|
}
|
|
|
|
function onModelChange() {
|
|
if (isProgrammaticModelChange) return;
|
|
|
|
const selectedModelId = modelSelect.value;
|
|
if (selectedModelId) {
|
|
bimViewerComponent.setAttribute('modelId', selectedModelId);
|
|
} else {
|
|
bimViewerComponent.removeAttribute('modelId');
|
|
}
|
|
}
|
|
|
|
function onObjectSelected(event) {
|
|
console.log(`name: ${event.detail.name}, id: ${event.detail.id}`);
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import { BimViewerWebComponent } from "./dist/xeokit-bim-viewer.es.js";
|
|
|
|
BimViewerWebComponent.register();
|
|
</script>
|
|
|
|
<h1 class="heading">My BIM Viewer</h1>
|
|
<div class="container">
|
|
<select id="projectSelector" class="project-selector">
|
|
</select>
|
|
<select id="modelSelector" class="model-selector" disabled>
|
|
</select>
|
|
<xeokit-bim-viewer
|
|
class="viewer"
|
|
dataDir="./app/data/"
|
|
tab="models"
|
|
configs="showSpaces:true"
|
|
onobjectselected="onObjectSelected(event)"
|
|
>
|
|
</xeokit-bim-viewer>
|
|
</div>
|
|
</body>
|
|
</html>
|