From b62a8fe5799fb89c7ee977d8db7459ffbacdc51f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Wed, 29 May 2024 17:34:59 +0200 Subject: [PATCH] Some refactoring; add @thatopen/components-front --- bim.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++ main.js | 2 +- package.json | 1 + ui.js | 91 ++++------------------------------------------------ yarn.lock | 34 +++++++++++++++++++- 5 files changed, 125 insertions(+), 87 deletions(-) create mode 100644 bim.js diff --git a/bim.js b/bim.js new file mode 100644 index 0000000..9c1f6ec --- /dev/null +++ b/bim.js @@ -0,0 +1,84 @@ +import * as THREE from 'three'; +import * as OBC from 'openbim-components'; +import * as WEBIFC from 'web-ifc'; + +/** + * @namespace BIM + */ +const BIM = {}; + +/** + * + * @param {HTMLElement} container The scene container element + * @returns {object} {components, world} + */ +BIM.init = function (container) { + const components = new OBC.Components(); + const worlds = components.get(OBC.Worlds); + + const world = worlds.create(); + + world.scene = new OBC.SimpleScene(components); + world.renderer = new OBC.SimpleRenderer(components, container); + world.camera = new OBC.SimpleCamera(components); + + // Starts the app and updates components at 60 fps + components.init(); + this.world = world; + this.components = components; +} +/** + * @param {HTMLElement} container The scene container element + * @returns {OBC.Components} + */ +BIM.createScene = function (container) { + this.init(container); + this.world.scene.setup(); + // Add a grid to the scene + const grids = this.components.get(OBC.Grids); + const grid = grids.create(this.world); + // (zoom_level, position) + this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0); +} +/** + * @todo Serve web-ifc.wasm locally via AJAX + * @param {OBC.Components} components + * @param {ArrayBuffer} buffer The uploaded IFC file + */ +BIM.loadIfc = async function (buffer) { + const fragments = this.components.get(OBC.FragmentsManager); + // Clean memory before uploading new file + fragments.dispose(); + + 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/", + 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); + + // Useful? + this.fragments = fragments; + + return model; +} + +export default BIM; \ No newline at end of file diff --git a/main.js b/main.js index c4c4644..96cb885 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('#scene'); UI.setScene(container); - UI.ifcLoader('ui'); + UI.ifcLoader(); // Creates a cube with three.js /* diff --git a/package.json b/package.json index 830d562..03ec295 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "dependencies": { "@thatopen/components": "^2.0.1", + "@thatopen/components-front": "^2.0.2", "@thatopen/fragments": "^2.0.0", "lit": "^3.1.3", "three": "^0.164.1", diff --git a/ui.js b/ui.js index 5aea55a..22ca43a 100644 --- a/ui.js +++ b/ui.js @@ -1,105 +1,26 @@ 'use strict'; -import * as THREE from 'three'; -import * as OBC from 'openbim-components'; -import * as WEBIFC from 'web-ifc'; - -/** - * @namespace Actions - */ -const Actions = {}; - -/** - * - * @param {HTMLElement} container The scene container element - * @returns {object} {components, world} - */ -Actions.init = function (container) { - const components = new OBC.Components(); - const worlds = components.get(OBC.Worlds); - - const world = worlds.create(); - - world.scene = new OBC.SimpleScene(components); - world.renderer = new OBC.SimpleRenderer(components, container); - world.camera = new OBC.SimpleCamera(components); - - // Starts the app and updates components at 60 fps - components.init(); - this.world = world; - this.components = components; -} -/** - * @param {HTMLElement} container The scene container element - * @returns {OBC.Components} - */ -Actions.createScene = function (container) { - this.init(container); - this.world.scene.setup(); - // Add a grid to the scene - const grids = this.components.get(OBC.Grids); - const grid = grids.create(this.world); - // (zoom_level, position) - this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0); -} -/** - * @todo Serve web-ifc.wasm locally via AJAX - * @param {OBC.Components} components - * @param {ArrayBuffer} buffer The uploaded IFC file - */ -Actions.loadIfc = async function (buffer) { - const fragments = this.components.get(OBC.FragmentsManager); - // Clean memory before uploading new file - fragments.dispose(); - - 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/", - 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; -} +import BIM from './bim.js'; /** * @namespace UI */ const UI = {}; - /** * * @param {HTMLElement} container The scene container element */ UI.setScene = function (container) { - Actions.createScene(container); + BIM.createScene(container); } /** - * @param {string} uiContainer The UI div's id + * @param {string} btnId The loading button's id */ -UI.ifcLoader = function () { - const loadBtn = document.querySelector(`#load-ifc`); +UI.ifcLoader = function (btnId = 'load-ifc') { + const loadBtn = document.querySelector(`#${btnId}`); loadBtn.onchange = async function () { const files = this.files; - Actions.loadIfc(new Uint8Array(await files[0].arrayBuffer())); + BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer())); } }; diff --git a/yarn.lock b/yarn.lock index 8522075..002f283 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14,7 +14,19 @@ dependencies: "@lit-labs/ssr-dom-shim" "^1.2.0" -"@thatopen/components@^2.0.1": +"@thatopen/components-front@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@thatopen/components-front/-/components-front-2.0.2.tgz#c1f41b37b5f992615ee3e0ec851a6faad6db192e" + integrity sha512-O3zVhMchlY0hI6VGmeeawCKS7pISEvkzDWyGNYlejPbjf7kPi0l1adsxwQDW4wVBl53rpBqjsBtBAC+s421F6g== + dependencies: + "@thatopen/components" "2.0.1" + camera-controls "2.7.3" + dexie "^4.0.4" + earcut "^2.2.4" + n8ao "1.5.1" + postprocessing "6.34.2" + +"@thatopen/components@2.0.1", "@thatopen/components@^2.0.1": version "2.0.1" resolved "https://registry.yarnpkg.com/@thatopen/components/-/components-2.0.1.tgz#b172057612263ee819ec546071b6d4b153685377" integrity sha512-Nz+vRM24HucIQ3Sl1gD1r3nsNIg9JG19p0bAC6Gz/lhYEg8tjLXRFrKRIu7agiNpJlRGw0jfSm1xBxmmzmFfOw== @@ -40,6 +52,16 @@ camera-controls@2.7.3: resolved "https://registry.yarnpkg.com/camera-controls/-/camera-controls-2.7.3.tgz#99e0449f68d203bf5f98f6c4ac0021c10b5c13a8" integrity sha512-L4mxjBd3u8qiOLozdWrH2P8ZybSsDXBF7iyNyqNEFJhPUkovmuARWR8JTc1B/qlclOIg6FvZZA/0uAZMMim0mw== +dexie@^4.0.4: + version "4.0.7" + resolved "https://registry.yarnpkg.com/dexie/-/dexie-4.0.7.tgz#c92e5032245fc075de58c636238a82ee3ff9fedb" + integrity sha512-M+Lo6rk4pekIfrc2T0o2tvVJwL6EAAM/B78DNfb8aaxFVoI1f8/rz5KTxuAnApkwqTSuxx7T5t0RKH7qprapGg== + +earcut@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a" + integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ== + flatbuffers@23.3.3: version "23.3.3" resolved "https://registry.yarnpkg.com/flatbuffers/-/flatbuffers-23.3.3.tgz#23654ba7a98d4b866a977ae668fe4f8969f34a66" @@ -70,6 +92,16 @@ lit@^3.1.3: lit-element "^4.0.4" lit-html "^3.1.2" +n8ao@1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/n8ao/-/n8ao-1.5.1.tgz#e48960352e9c358955d7da072a341bbc64961bb5" + integrity sha512-Dn5o6ecmLC1xZm2mby2qdGYgwKcNsC9oKv85TQBKFbDJVzUHGXV2oys14rDl6nhwjH+zZU3YcLJkMcY7qe+jTg== + +postprocessing@6.34.2: + version "6.34.2" + resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.34.2.tgz#49258c2e9549828f1351bf0084623cbc92007f81" + integrity sha512-EQWCbeRdlfIO4WMkQCYW0rfFYaSvrU9hKxZKyhtuY0RrTM2eTNVpSyj7cUKEYG7pD1qjh8Nkj1qhxj1GdIBuXw== + three-mesh-bvh@0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.7.0.tgz#8327c3483060bb7fe3e0151d7863d338095527d4"