Merge pull request #105 from pattern-x/feature/update-demo

Update some demo pages

public/config.json

@@ -12,6 +12,9 @@
   }, {
     "title": "Overlay 3d model with dxf",
     "url": "./demo/bim_2_overlay_with_dxf.html"
+  }, {
+    "title": "Model explode",
+    "url": "./demo/bim_3_explode.html"
   }]
 }, {
   "title": "2D drawings",

public/demo/bim_0.html

@@ -25,28 +25,18 @@
             ToolbarMenuId,
         } from "./demo/libs/gemini-viewer.esm.min.js";
 
-        const project = {
+        const filename = "rac_basic_sample_project.gltf";
-            "id": "rac_basic_sample_project",
+        const modelCfg = {
-            "name": "Rac basic sample project",
+            modelId: filename,
-            "camera": {
+            name: filename,
-                "eye": [-70, 25, 50],
+            src: `./demo/models/gltf/${filename}`,
-                "look": [-35, 0, 35],
+            edges: true,
-                "up": [0, 1, 0],
+        };
-                "far": 10000
+        const viewerCfg = {
-            },
-            "models": [{
-                "name": "Rac basic sample project",
-                "src": "./demo/models/gltf/rac_basic_sample_project.gltf",
-                "position": [0, 0, 0],
-                "rotation": [0, 0, 0],
-                "scale": [1, 1, 1],
-                "edges": true,
-                "visible": true
-            }]
-        }
-        const viewer = new BimViewer({
             containerId: "myCanvas",
-        }, project.camera);
+            language: "en",
+        }
+        const viewer = new BimViewer(viewerCfg);
         const toolbar = viewer.toolbar;
         toolbar.updateMenu(ToolbarMenuId.BimTree, { visible: false });
 
@@ -60,14 +50,6 @@
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
         viewer.setDracoDecoderPath(decoderPath);
 
-        // loadProjectModel
-        let counter = 0; // to indicate how many models are loading
-        project.models.forEach((modelCfg) => {
-            if (modelCfg.visible === false) {
-                // visible is true by default
-                return; // only load visible ones
-            }
-            counter++;
         viewer.loadModel(modelCfg, (event) => {
             console.log(`[Demo] Loading model ${modelCfg.src}`);
         }, (event) => {
@@ -75,7 +57,6 @@
         }).then(() => {
             console.log(`[Demo] Loaded model ${modelCfg.src}`);
         });
-        });
     </script>
 </body>
 

public/demo/bim_1.html

@@ -25,25 +25,14 @@
             ToolbarMenuId,
         } from "./demo/libs/gemini-viewer.esm.min.js";
 
-        const project = {
+        const filename = "Duplex.gltf";
-            id: "Duplex",
+        const modelCfg = {
-            name: "Duplex",
+            modelId: filename,
-            models: [
+            name: filename,
-                {
+            src: `./demo/models/gltf/${filename}`,
-                    name: "Duplex",
-                    src: "./demo/models/gltf/Duplex.gltf",
-                    position: [0, 0, 0],
-                    rotation: [0, 0, 0],
-                    scale: [1, 1, 1],
-                    instantiate: false,
-                    merge: false,
             edges: true,
-                    visible: true,
-                },
-            ],
         };
-        const viewer = new BimViewer(
+        const viewerCfg = {
-            {
             containerId: "myCanvas",
             language: "en",
             toolbarMenuConfig: {
@@ -52,9 +41,8 @@
                 [ToolbarMenuId.BimTree]: { visible: false },
             },
             enableContextMenu: true,
-            },
+        }
-            project.camera
+        const viewer = new BimViewer(viewerCfg);
-        );
 
         new AxisGizmoPlugin(viewer);
         new BottomBarPlugin(viewer);
@@ -66,23 +54,13 @@
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
         viewer.setDracoDecoderPath(decoderPath);
 
-        // loadProjectModel
-        let counter = 0; // to indicate how many models are loading
-        project.models.forEach((modelCfg) => {
-            if (modelCfg.visible === false) {
-                // visible is true by default
-                return; // only load visible ones
-            }
-            counter++;
         viewer.loadModel(modelCfg, (event) => {
             console.log(`[Demo] Loading model ${modelCfg.src}`);
         }, (event) => {
             console.error("[Demo] Failed to load " + modelCfg.src + ". " + event.message);
-                }
+        }).then(() => {
-            ).then(() => {
             console.log(`[Demo] Loaded model ${modelCfg.src}`);
         });
-        });
     </script>
 </body>
 

public/demo/bim_2_overlay_with_dxf.html

@@ -49,7 +49,7 @@
         }
         const viewer = new BimViewer({
             containerId: "myCanvas",
-        }, project.camera);
+        });
         const toolbar = viewer.toolbar;
         toolbar.updateMenu(ToolbarMenuId.BimTree, { visible: false });
 
@@ -68,14 +68,11 @@
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
         viewer.setDracoDecoderPath(decoderPath);
 
-        // loadProjectModel
-        let counter = 0; // to indicate how many models are loading
         project.models.forEach((modelCfg) => {
             if (modelCfg.visible === false) {
                 // visible is true by default
                 return; // only load visible ones
             }
-            counter++;
             viewer.loadModel(modelCfg, (event) => {
                 console.log(`[Demo] Loading model ${modelCfg.src}`);
             }, (event) => {