nicolo/ifc-web-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic IFC load

Browse Source 
TODO: separate styles, use CSS library...
This commit is contained in:
Nicolò P 2024-05-28 14:39:36 +02:00
parent 8b5f93a1d5
commit 207b09cbb8
2 changed files with 69 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -17,9 +17,31 @@
} }
</script> </script>
<script src='main.js' type="module"></script> <script src='main.js' type="module"></script>
<style>
input[type="file"] {
opacity: 0;
}
label[for="load-ifc"] {
padding: 10px;
cursor: pointer;
position: absolute;
top: 0;
right: 4rem;
background-color: #ddd;
border: 1px #333 solid;
border-radius: 5px;
}
</style>
</head> </head>
<body> <body>
<div id="scene" style="min-height: 100vh;"></div> <div id="scene" style="min-height: 100vh;"></div>
<div id="ui" style="position: absolute; top: 2rem; min-width: 100vw; z-index: 5;"></div> <div id="ui" style="position: absolute; top: 2rem; min-width: 100vw; z-index: 5;">
<label for="load-ifc">Apri file IFC</label>
<input
type="file"
id="load-ifc"
name="load-ifc"
accept=".ifc" />
</div>
</body> </body>
</html> </html>

61
ui.js
View File

@ -2,6 +2,7 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as OBC from 'openbim-components'; import * as OBC from 'openbim-components';
import * as WEBIFC from 'web-ifc';
/** /**
* @namespace Actions * @namespace Actions
@ -25,16 +26,47 @@ Actions.init = function (container) {
// Starts the app and updates components at 60 fps // Starts the app and updates components at 60 fps
components.init(); components.init();
this.world = world;
this.components = components;
return {components, world}; return {components, world};
} }
/** /**
* @todo Serve web-ifc.wasm locally via AJAX
* @param {OBC.Components} components * @param {OBC.Components} components
* @param {ArrayBuffer} buffer The uploaded IFC file
*/ */
Actions.loadIfc = function (components) { Actions.loadIfc = async function (buffer) {
const fragments = components.get(OBC.FragmentsManager); const fragments = this.components.get(OBC.FragmentsManager);
// Clean memory before uploading new file
fragments.dispose();
console.log('Working...'); const fragmentIfcLoader = this.components.get(OBC.IfcLoader);
// NOTE: loads web-ifc WASM from https://unpkg.com/web-ifc@0.0.53/
await fragmentIfcLoader.setup();
/*
fragmentIfcLoader.settings.wasm = {
path: "./vendor/web-ifc/web-ifc.wasm",
absolute: false
}
*/
// Excludes IFC categories from the fragment
const excludedCats = [
WEBIFC.IFCTENDONANCHOR,
WEBIFC.IFCREINFORCINGBAR,
WEBIFC.IFCREINFORCINGELEMENT,
];
for (const cat of excludedCats) {
fragmentIfcLoader.settings.excludedCategories.add(cat);
}
fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
const model = await fragmentIfcLoader.load(buffer);
model.name = "Test";
this.world.scene.three.add(model);
return fragments; return fragments;
} }
@ -44,12 +76,13 @@ Actions.loadIfc = function (components) {
* @returns {OBC.Components} * @returns {OBC.Components}
*/ */
Actions.createScene = function (container) { Actions.createScene = function (container) {
const {components, world} = this.init(container); //const {components, world} =
this.init(container);
world.scene.setup(); this.world.scene.setup();
world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0); this.world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
return components; //return components;
} }
/** /**
* @namespace UI * @namespace UI
@ -66,14 +99,12 @@ UI.setScene = function (container) {
/** /**
* @param {string} uiContainer The UI div's id * @param {string} uiContainer The UI div's id
*/ */
UI.ifcLoader = function (uiContainer) { UI.ifcLoader = function () {
const ui = document.querySelector(`#${uiContainer}`); const loadBtn = document.querySelector(`#load-ifc`);
const loadBtn = document.createElement('button'); loadBtn.onchange = async function () {
loadBtn.textContent = 'Apri IFC'; const files = this.files;
loadBtn.style = 'padding: 10px; cursor: pointer; position: absolute; top: 0; right: 4rem'; Actions.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
loadBtn.onclick = Actions.loadIfc(this.components); }
ui.appendChild(loadBtn);
}; };
export default UI; export default UI;