Merge pull request #1401 from xeokit/factor-out-web-ifc

[BREAKING] Modify WebIFCLoaderPlugin to expect externally-provided web-ifc API
xeokit · Mar 6, 2024 · 468992f · 468992f
2 parents e088077 + ced7bca
commit 468992f
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 252 deletions.
diff --git a/examples/buildings/web-ifc_dtx_Duplex.html b/examples/buildings/web-ifc_dtx_Duplex.html
@@ -177,7 +177,8 @@ <h3>Assets</h3>
 
 <script type="module">
 
-    import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.min.es.js";
+    import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.es.js";
+    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -203,30 +204,41 @@ <h3>Assets</h3>
         autoExpandDepth: 3 // Initially expand the root tree node
     });
 
-    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
-        //wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
-        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
-    });
+    const IfcAPI = new WebIFC.IfcAPI();
 
-    const sceneModel = ifcLoader.load({
-        id: "myModel",
-        src: "../../assets/models/ifc/Duplex.ifc",
-        loadMetadata: true, // Default
-        excludeTypes: ["IfcSpace"],
-        edges: true,
-        dtxEnabled: true
-    });
+    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");
 
-    sceneModel.on("loaded", ()=>{
-        viewer.cameraFlight.jumpTo(sceneModel);
-    });
+    IfcAPI.Init().then(() => {
+
+        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
+            WebIFC,
+            IfcAPI
+        });
+
+        const sceneModel = ifcLoader.load({
+            id: "myModel",
+            src: "../../assets/models/ifc/Duplex.ifc",
+            loadMetadata: true, // Default
+            excludeTypes: ["IfcSpace"],
+            edges: true,
+            dtxEnabled: true
+        });
+
+        sceneModel.on("loaded", () => {
+            viewer.cameraFlight.jumpTo(sceneModel);
+        });
+
+        const t0 = performance.now();
+        document.getElementById("time").innerHTML = "Loading model...";
+        sceneModel.on("loaded", function () {
+            const t1 = performance.now();
+            document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        });
+
+    }).catch((e) => {
+        console.error(`Failed to initialize WebIFC: ${e}`);
+    })
 
-    const t0 = performance.now();
-    document.getElementById("time").innerHTML = "Loading model...";
-    sceneModel.on("loaded", function () {
-        const t1 = performance.now();
-        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
-    });
 
 </script>
 </html>
diff --git a/examples/buildings/web-ifc_dtx_Duplex_types.html b/examples/buildings/web-ifc_dtx_Duplex_types.html
@@ -178,6 +178,7 @@ <h3>Assets</h3>
 <script type="module">
 
     import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.es.js";
+    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -204,29 +205,36 @@ <h3>Assets</h3>
         hierarchy: "types"
     });
 
-    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
-        //wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
-        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
-    });
+    const IfcAPI = new WebIFC.IfcAPI();
 
-    const sceneModel = ifcLoader.load({
-        id: "myModel",
-        src: "../../assets/models/ifc/Duplex.ifc",
-        loadMetadata: true, // Default
-        excludeTypes: ["IfcSpace"],
-        edges: true,
-        dtxEnabled: true
-    });
+    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");
 
-    sceneModel.on("loaded", ()=>{
-        viewer.cameraFlight.jumpTo(sceneModel);
-    });
+    IfcAPI.Init().then(() => {
+
+        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
+            WebIFC,
+            IfcAPI
+        });
+
+        const sceneModel = ifcLoader.load({
+            id: "myModel",
+            src: "../../assets/models/ifc/Duplex.ifc",
+            loadMetadata: true, // Default
+            excludeTypes: ["IfcSpace"],
+            edges: true,
+            dtxEnabled: true
+        });
+
+        sceneModel.on("loaded", () => {
+            viewer.cameraFlight.jumpTo(sceneModel);
+        });
 
-    const t0 = performance.now();
-    document.getElementById("time").innerHTML = "Loading model...";
-    sceneModel.on("loaded", function () {
-        const t1 = performance.now();
-        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        const t0 = performance.now();
+        document.getElementById("time").innerHTML = "Loading model...";
+        sceneModel.on("loaded", function () {
+            const t1 = performance.now();
+            document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        });
     });
 
 </script>

diff --git a/examples/buildings/web-ifc_dtx_MAPGroundFloor.html b/examples/buildings/web-ifc_dtx_MAPGroundFloor.html
@@ -77,6 +77,7 @@ <h3>Assets</h3>
 <script type="module">
 
     import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin, FastNavPlugin} from "../../dist/xeokit-sdk.min.es.js";
+    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -106,29 +107,36 @@ <h3>Assets</h3>
 
     new FastNavPlugin(viewer, {});
 
-    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
-        //wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
-        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
-    });
+    const IfcAPI = new WebIFC.IfcAPI();
 
-    const sceneModel = ifcLoader.load({
-        id: "myModel",
-        src: "../../assets/models/ifc/19_rue_Marc_Antoine_Petit_Ground_floor.ifc",
-        loadMetadata: false,
-        edges: true
-    });
+    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");
 
-    sceneModel.on("loaded", ()=>{
-        viewer.cameraFlight.jumpTo(sceneModel);
-    });
+    IfcAPI.Init().then(() => {
 
-    const t0 = performance.now();
-    document.getElementById("time").innerHTML = "Loading model...";
-    sceneModel.on("loaded", function () {
-        const t1 = performance.now();
-        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
-    });
+        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
+            WebIFC,
+            IfcAPI
+        });
+        const sceneModel = ifcLoader.load({
+            id: "myModel",
+            src: "../../assets/models/ifc/19_rue_Marc_Antoine_Petit_Ground_floor.ifc",
+            loadMetadata: false,
+            edges: true
+        });
 
-    window.viewer = viewer;
+        sceneModel.on("loaded", () => {
+            viewer.cameraFlight.jumpTo(sceneModel);
+        });
+
+        const t0 = performance.now();
+        document.getElementById("time").innerHTML = "Loading model...";
+        sceneModel.on("loaded", function () {
+            const t1 = performance.now();
+            document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        });
+
+        window.viewer = viewer;
+
+    });
 </script>
 </html>
diff --git a/examples/buildings/web-ifc_vbo_Duplex.html b/examples/buildings/web-ifc_vbo_Duplex.html
@@ -178,6 +178,7 @@ <h3>Assets</h3>
 <script type="module">
 
     import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.min.es.js";
+    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -202,28 +203,35 @@ <h3>Assets</h3>
         autoExpandDepth: 3 // Initially expand the root tree node
     });
 
-    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
-        //wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
-        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
-    });
+    const IfcAPI = new WebIFC.IfcAPI();
 
-    const sceneModel = ifcLoader.load({
-        id: "myModel",
-        src: "../../assets/models/ifc/Duplex.ifc",
-        loadMetadata: true, // Default
-        excludeTypes: ["IfcSpace"],
-        edges: true
-    });
+    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");
 
-    sceneModel.on("loaded", ()=>{
-        viewer.cameraFlight.jumpTo(sceneModel);
-    });
+    IfcAPI.Init().then(() => {
+
+        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
+            WebIFC,
+            IfcAPI
+        });
+
+        const sceneModel = ifcLoader.load({
+            id: "myModel",
+            src: "../../assets/models/ifc/Duplex.ifc",
+            loadMetadata: true, // Default
+            excludeTypes: ["IfcSpace"],
+            edges: true
+        });
+
+        sceneModel.on("loaded", () => {
+            viewer.cameraFlight.jumpTo(sceneModel);
+        });
 
-    const t0 = performance.now();
-    document.getElementById("time").innerHTML = "Loading model...";
-    sceneModel.on("loaded", function () {
-        const t1 = performance.now();
-        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        const t0 = performance.now();
+        document.getElementById("time").innerHTML = "Loading model...";
+        sceneModel.on("loaded", function () {
+            const t1 = performance.now();
+            document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        });
     });
 
 </script>

diff --git a/examples/buildings/web-ifc_vbo_MAPGroundFloor.html b/examples/buildings/web-ifc_vbo_MAPGroundFloor.html
@@ -45,7 +45,7 @@ <h3>Limitations</h3>
     <p>Loading and parsing huge IFC STEP files can be slow, and can overwhelm the browser, however. To view your
         largest IFC models, we recommend instead pre-converting those to xeokit's compressed native .XKT format, then
         loading them with <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
-                               target="_other">XKTLoaderPlugin</a>.</p>
+                             target="_other">XKTLoaderPlugin</a>.</p>
     <h3>Stats</h3>
     <ul>
         <li>
@@ -76,7 +76,13 @@ <h3>Assets</h3>
 
 <script type="module">
 
-    import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin, FastNavPlugin} from "../../dist/xeokit-sdk.min.es.js";
+    import {
+        Viewer,
+        WebIFCLoaderPlugin,
+        NavCubePlugin,
+        FastNavPlugin
+    } from "../../dist/xeokit-sdk.es.js";
+    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -105,40 +111,47 @@ <h3>Assets</h3>
 
     new FastNavPlugin(viewer, {});
 
-    const ifcLoader = new WebIFCLoaderPlugin(viewer, {
-        //wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
-        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
-    });
+    const IfcAPI = new WebIFC.IfcAPI();
+
+    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");
+
+    IfcAPI.Init().then(() => {
 
-    const sceneModel = ifcLoader.load({
-        id: "myModel",
-        src: "../../assets/models/ifc/19_rue_Marc_Antoine_Petit_Ground_floor.ifc",
-        loadMetadata: false,
-        edges: true,
-        objectDefaults: { // This model has opaque windows / spaces; make them transparent
-            "IfcPlate": {
-                opacity: 0.3
-            },
-            "IfcWindow": {
-                opacity: 0.4
-            },
-            "IfcSpace": {
-                opacity: 0.4
+        const ifcLoader = new WebIFCLoaderPlugin(viewer, {
+            WebIFC,
+            IfcAPI
+        });
+
+        const sceneModel = ifcLoader.load({
+            id: "myModel",
+            src: "../../assets/models/ifc/19_rue_Marc_Antoine_Petit_Ground_floor.ifc",
+            loadMetadata: false,
+            edges: true,
+            objectDefaults: { // This model has opaque windows / spaces; make them transparent
+                "IfcPlate": {
+                    opacity: 0.3
+                },
+                "IfcWindow": {
+                    opacity: 0.4
+                },
+                "IfcSpace": {
+                    opacity: 0.4
+                }
             }
-        }
-    });
+        });
 
-    sceneModel.on("loaded", ()=>{
-        viewer.cameraFlight.jumpTo(sceneModel);
-    });
+        sceneModel.on("loaded", () => {
+            viewer.cameraFlight.jumpTo(sceneModel);
+        });
 
-    const t0 = performance.now();
-    document.getElementById("time").innerHTML = "Loading model...";
-    sceneModel.on("loaded", function () {
-        const t1 = performance.now();
-        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
-    });
+        const t0 = performance.now();
+        document.getElementById("time").innerHTML = "Loading model...";
+        sceneModel.on("loaded", function () {
+            const t1 = performance.now();
+            document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+        });
 
-    window.viewer = viewer;
+        window.viewer = viewer;
+    });
 </script>
 </html>