diff --git a/public/config.json b/public/config.json
index 89cf80c..8551966 100644
--- a/public/config.json
+++ b/public/config.json
@@ -29,25 +29,25 @@
     "url": "./demo/dxf_2.html"
   }, {
     "title": "Drawing comparison with 1 viewport",
-    "url": "./demo/dxf_3.html"
+    "url": "./demo/dxf_3_compare_with_1_viewport.html"
   }, {
     "title": "Drawing comparison with 2 viewports",
-    "url": "./demo/dxf_8.html"
+    "url": "./demo/dxf_8_compare_with_2_viewports.html"
   }, {
     "title": "Upload files and compare with 2 viewports",
-    "url": "./demo/dxf_10.html"
+    "url": "./demo/dxf_10_upload_files_to_compre.html"
   }, {
     "title": "Markups",
-    "url": "./demo/dxf_5.html"
+    "url": "./demo/dxf_5_markups.html"
   }, {
     "title": "Take screenshot via markup",
-    "url": "./demo/dxf_9.html"
+    "url": "./demo/dxf_9_screenshot.html"
   }, {
     "title": "Hotpoints",
-    "url": "./demo/dxf_6.html"
+    "url": "./demo/dxf_6_hotpoints.html"
   }, {
     "title": "Building 1&2",
-    "url": "./demo/dxf_7.html"
+    "url": "./demo/dxf_7_building1_2.html"
   }]
 }, {
   "title": "Panoramas",
diff --git a/public/demo/bim_0.html b/public/demo/bim_0.html
index 5ac42e0..5868c3f 100644
--- a/public/demo/bim_0.html
+++ b/public/demo/bim_0.html
@@ -16,7 +16,14 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { BimViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BimViewer,
+            MeasurementPlugin,
+            NavCubePlugin,
+            SectionPlugin,
+            ToolbarMenuId,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
 
         const project = {
             "id": "rac_basic_sample_project",
@@ -43,6 +50,11 @@
         const toolbar = viewer.toolbar;
         toolbar.updateMenu(ToolbarMenuId.BimTree, { visible: false });
 
+        new AxisGizmoPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new NavCubePlugin(viewer);
+        new SectionPlugin(viewer);
+
         // draco decoder path is needed to load draco encoded models.
         // gemini-viewer js sdk user maintains draco decoder code somewhere, and provides the path here.
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
diff --git a/public/demo/bim_1.html b/public/demo/bim_1.html
index 2912b42..c05b95c 100644
--- a/public/demo/bim_1.html
+++ b/public/demo/bim_1.html
@@ -16,7 +16,14 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { BimViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BimViewer,
+            BottomBarPlugin,
+            GroundShadowPlugin,
+            NavCubePlugin,
+            ToolbarMenuId,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
 
         const project = {
             id: "Duplex",
@@ -39,18 +46,21 @@
             {
                 containerId: "myCanvas",
                 language: "en",
-                enableAxisGizmo: true,
                 toolbarMenuConfig: {
                     [ToolbarMenuId.Measure]: { visible: false },
                     [ToolbarMenuId.Fullscreen]: { visible: false },
                     [ToolbarMenuId.BimTree]: { visible: false },
                 },
-                enableBottomBar: true,
-                enableNavCube: true,
                 enableContextMenu: true,
             },
             project.camera
         );
+
+        new AxisGizmoPlugin(viewer);
+        new BottomBarPlugin(viewer);
+        new GroundShadowPlugin(viewer);
+        new NavCubePlugin(viewer);
+
         // draco decoder path is needed to load draco encoded models.
         // gemini-viewer js sdk user maintains draco decoder code somewhere, and provides the path here.
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
diff --git a/public/demo/bim_2_overlay_with_dxf.html b/public/demo/bim_2_overlay_with_dxf.html
index 051023c..0355041 100644
--- a/public/demo/bim_2_overlay_with_dxf.html
+++ b/public/demo/bim_2_overlay_with_dxf.html
@@ -16,7 +16,14 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { BimViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BimViewer,
+            MeasurementPlugin,
+            NavCubePlugin,
+            SectionPlugin,
+            ToolbarMenuId,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
 
         const project = {
             "id": "building1",
@@ -46,6 +53,11 @@
         const toolbar = viewer.toolbar;
         toolbar.updateMenu(ToolbarMenuId.BimTree, { visible: false });
 
+        new AxisGizmoPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new NavCubePlugin(viewer);
+        new SectionPlugin(viewer);
+
         // font file is needed for loading dxf
         // const fontFiles = ["./demo/three/fonts/Microsoft_YaHei_Regular.typeface.json"];
         const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
diff --git a/public/demo/dxf_0.html b/public/demo/dxf_0.html
index a3e9312..6f7cb19 100644
--- a/public/demo/dxf_0.html
+++ b/public/demo/dxf_0.html
@@ -19,7 +19,15 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { DxfViewer, ViewerEvent,ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BottomBarPlugin,
+            DxfViewer,
+            MeasurementPlugin,
+            StatsPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from './demo/layerManager/LayerManager.js';
 
@@ -32,7 +40,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableToolbar: true,
             enableSpinner: true,
             enableProgressBar: true,
@@ -77,6 +84,11 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+        new BottomBarPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new StatsPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_1.html b/public/demo/dxf_1.html
index eed3200..c980e07 100644
--- a/public/demo/dxf_1.html
+++ b/public/demo/dxf_1.html
@@ -19,7 +19,15 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { DxfViewer,ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BottomBarPlugin,
+            DxfViewer,
+            MeasurementPlugin,
+            StatsPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from "./demo/layerManager/LayerManager.js";
 
@@ -32,7 +40,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableToolbar: true,
             enableSpinner: true,
             enableProgressBar: true,
@@ -77,6 +84,11 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer);
+        new BottomBarPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new StatsPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_10.html b/public/demo/dxf_10_upload_files_to_compre.html
similarity index 94%
rename from public/demo/dxf_10.html
rename to public/demo/dxf_10_upload_files_to_compre.html
index 276d760..09c252b 100644
--- a/public/demo/dxf_10.html
+++ b/public/demo/dxf_10_upload_files_to_compre.html
@@ -73,8 +73,14 @@
     </div>
     <script type="module">
       import {
-        DxfCompareHelper,
-        ToolbarMenuId,
+          AxisGizmoPlugin,
+          BottomBarPlugin,
+          DxfCompareHelper,
+          DxfViewer,
+          MeasurementPlugin,
+          StatsPlugin,
+          ToolbarMenuId,
+          ViewerEvent,
       } from "./demo/libs/gemini-viewer.esm.min.js";
       import DxfComparePanel from "./demo/compare/dxfComparePanel.js";
       import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
@@ -83,18 +89,12 @@
       const compareHelper = new DxfCompareHelper(
         {
           containerId: "myCanvas1",
-          enableAxisGizmo: true,
-          enableStats: true,
           enableToolbar: true,
-          enableBottomBar: true,
           enableSelection: true,
         },
         {
           containerId: "myCanvas2",
-          enableAxisGizmo: true,
-          enableStats: true,
           enableToolbar: true,
-          enableBottomBar: true,
           enableSelection: true,
         }
       );
@@ -102,6 +102,11 @@
       const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
       await compareHelper.setFont(fontFiles);
 
+    new AxisGizmoPlugin(compareHelper.viewer, { ignoreZAxis: true });
+    new MeasurementPlugin(compareHelper.viewer);
+    new AxisGizmoPlugin(compareHelper.viewer2, { ignoreZAxis: true });
+    new MeasurementPlugin(compareHelper.viewer2);
+
       compareHelper.viewer.toolbar.updateMenus(
         overrideToolbarConfig(compareHelper.viewer1)
       );
diff --git a/public/demo/dxf_2.html b/public/demo/dxf_2.html
index 888b21f..f61226f 100644
--- a/public/demo/dxf_2.html
+++ b/public/demo/dxf_2.html
@@ -19,7 +19,15 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { DxfViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BottomBarPlugin,
+            DxfViewer,
+            MeasurementPlugin,
+            StatsPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from "./demo/layerManager/LayerManager.js";
 
@@ -32,7 +40,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableToolbar: true,
             enableSpinner: true,
             enableProgressBar: true,
@@ -77,6 +84,11 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer);
+        new BottomBarPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new StatsPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_3.html b/public/demo/dxf_3_compare_with_1_viewport.html
similarity index 90%
rename from public/demo/dxf_3.html
rename to public/demo/dxf_3_compare_with_1_viewport.html
index 84c554e..0a9af5f 100644
--- a/public/demo/dxf_3.html
+++ b/public/demo/dxf_3_compare_with_1_viewport.html
@@ -20,7 +20,14 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { BaseDxfCompareHelper, DxfViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BaseDxfCompareHelper,
+            DxfViewer,
+            MeasurementPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfComparePanel from "./demo/compare/dxfComparePanel.js"
         import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
         import LayerManager from "./demo/layerManager/LayerManager.js";
@@ -29,7 +36,6 @@
         const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableToolbar: true,
             enableSpinner: true,
             enableProgressBar: true,
@@ -75,6 +81,10 @@
         await compareHelper.setFont(fontFiles);
         window.compareHelper = compareHelper;
 
+        const viewer = compareHelper.viewer;
+        new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+        new MeasurementPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_5.html b/public/demo/dxf_5_markups.html
similarity index 97%
rename from public/demo/dxf_5.html
rename to public/demo/dxf_5_markups.html
index 82ba497..b80116b 100644
--- a/public/demo/dxf_5.html
+++ b/public/demo/dxf_5_markups.html
@@ -80,7 +80,12 @@
         </div>
     </div>
     <script type="module">
-        import { DxfViewer, ViewerEvent, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            DxfViewer,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from './demo/layerManager/LayerManager.js';
 
@@ -93,7 +98,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableSpinner: true,
             enableProgressBar: true,
             enableLayoutBar: true,
@@ -137,6 +141,8 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_6.html b/public/demo/dxf_6_hotpoints.html
similarity index 93%
rename from public/demo/dxf_6.html
rename to public/demo/dxf_6_hotpoints.html
index f3a07ee..e4c9da0 100644
--- a/public/demo/dxf_6.html
+++ b/public/demo/dxf_6_hotpoints.html
@@ -94,7 +94,13 @@
         </div>
     </div>
     <script type="module">
-        import { DxfViewer, ViewerEvent, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            DxfViewer,
+            HotpointPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from './demo/layerManager/LayerManager.js';
 
@@ -107,7 +113,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableSpinner: true,
             enableProgressBar: true,
             enableLayoutBar: true,
@@ -151,6 +156,9 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+        const hotpointPlugin = new HotpointPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
@@ -225,18 +233,18 @@
                     hotpointsPerLayout[layoutName] = [];
                 }
                 hotpointsPerLayout[layoutName].push(hotpoint);
-                viewer.addHotpoint(hotpoint);
+                hotpointPlugin.add(hotpoint);
                 hotpointCount++;
             }
         };
 
         // manages hotpoints for different layouts
         viewer.addEventListener(ViewerEvent.LayoutChanged, () => {
-            viewer.clearHotpoints();
+            hotpointPlugin.clear();
             const layoutName = viewer.getActiveLayoutName();
             const hotpoints = hotpointsPerLayout[layoutName];
             if (hotpoints) {
-                hotpoints.forEach((h) => viewer.addHotpoint(h));
+                hotpoints.forEach((h) => hotpointPlugin.add(h));
             }
         });
 
@@ -277,15 +285,7 @@
             console.log(`Moving hotpoint '${hotpoint.hotpointId}' from (${n2s(hotpoint.anchorPosition[0])}, ${n2s(hotpoint.anchorPosition[1])}) to (${n2s(location.x)}, ${n2s(location.y)})`);
             hotpoint.anchorPosition[0] = location.x;
             hotpoint.anchorPosition[1] = location.y;
-            // update object position in three.js
-            // DxfViewer desn't have api to update hotpoint position yet, so, we'll hack it
-            const objects = viewer.hotpointRoot?.children || [];
-            let object = objects.find((o) => o.userData.hotpoint?.hotpointId === hotpoint.hotpointId);
-            if (object) {
-                object.position.set(location.x, location.y, 0);
-                object.updateWorldMatrix(false, false);
-                viewer.enableRender();
-            }
+            hotpointPlugin.move(hotpoint.hotpointId, location);
         };
         window.addEventListener("pointerdown", onPointerDown);
     </script>
diff --git a/public/demo/dxf_7.html b/public/demo/dxf_7_building1_2.html
similarity index 91%
rename from public/demo/dxf_7.html
rename to public/demo/dxf_7_building1_2.html
index b2b011d..c44c024 100644
--- a/public/demo/dxf_7.html
+++ b/public/demo/dxf_7_building1_2.html
@@ -19,7 +19,13 @@
         <div id="myCanvas" class="container"></div>
     </div>
     <script type="module">
-        import { DxfViewer, ViewerEvent, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            DxfViewer,
+            MeasurementPlugin,
+            ToolbarMenuId,
+            ViewerEvent,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
         import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
         import LayerManager from './demo/layerManager/LayerManager.js';
 
@@ -32,7 +38,6 @@
         };
         const viewerCfg = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableToolbar: true,
             enableSpinner: true,
             enableProgressBar: true,
@@ -77,6 +82,9 @@
         await viewer.setFont(fontFiles);
         window.viewer = viewer;
 
+        new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+        new MeasurementPlugin(viewer);
+
         const onProgress = (event) => {
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
diff --git a/public/demo/dxf_8.html b/public/demo/dxf_8_compare_with_2_viewports.html
similarity index 93%
rename from public/demo/dxf_8.html
rename to public/demo/dxf_8_compare_with_2_viewports.html
index 8dc42bc..efbc059 100644
--- a/public/demo/dxf_8.html
+++ b/public/demo/dxf_8_compare_with_2_viewports.html
@@ -57,8 +57,12 @@
 
     <script type="module">
       import {
-        DxfCompareHelper,
-        ToolbarMenuId,
+          AxisGizmoPlugin,
+          DxfCompareHelper,
+          DxfViewer,
+          MeasurementPlugin,
+          ToolbarMenuId,
+          ViewerEvent,
       } from "./demo/libs/gemini-viewer.esm.min.js";
       import DxfComparePanel from "./demo/compare/dxfComparePanel.js";
       import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
@@ -69,16 +73,12 @@
       const compareHelper = new DxfCompareHelper(
         {
           containerId: "myCanvas1",
-          enableAxisGizmo: true,
           enableToolbar: true,
-          enableBottomBar: true,
           enableSelection: true,
         },
         {
           containerId: "myCanvas2",
-          enableAxisGizmo: false,
           enableToolbar: true,
-          enableBottomBar: false,
           enableSelection: false,
         }
       );
@@ -86,6 +86,11 @@
       const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
       await compareHelper.setFont(fontFiles);
 
+      new AxisGizmoPlugin(compareHelper.viewer, { ignoreZAxis: true });
+      new MeasurementPlugin(compareHelper.viewer);
+      new AxisGizmoPlugin(compareHelper.viewer2, { ignoreZAxis: true });
+      new MeasurementPlugin(compareHelper.viewer2);
+
       compareHelper.viewer.toolbar?.updateMenus(
         overrideToolbarConfig(compareHelper.viewer1)
       );
diff --git a/public/demo/dxf_9.html b/public/demo/dxf_9_screenshot.html
similarity index 95%
rename from public/demo/dxf_9.html
rename to public/demo/dxf_9_screenshot.html
index eb0c047..2f04763 100644
--- a/public/demo/dxf_9.html
+++ b/public/demo/dxf_9_screenshot.html
@@ -33,11 +33,13 @@
     </div>
     <script type="module">
       import {
-        DxfViewer,
-        ViewerEvent,
-        MenuTypeEnums,
-        ToolbarMenuId,
-        ScreenshotMode,
+          AxisGizmoPlugin,
+          DxfViewer,
+          MeasurementPlugin,
+          MenuTypeEnums,
+          ScreenshotMode,
+          ToolbarMenuId,
+          ViewerEvent,
       } from "./demo/libs/gemini-viewer.esm.min.js";
       import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
       import LayerManager from "./demo/layerManager/LayerManager.js";
@@ -51,14 +53,10 @@
       };
       const config = {
         containerId: "myCanvas",
-        enableAxisGizmo: true,
-        enableStats: true,
         enableToolbar: true,
         enableSpinner: true,
         enableProgressBar: true,
-        enableBottomBar: true,
         enableLayoutBar: true,
-        enableSelection: true,
         toolbarMenuConfig: {
           [ToolbarMenuId.Settings]: {
             onActive: () => {
@@ -95,7 +93,11 @@
         },
       };
       const viewer = new DxfViewer(config);
-      const fontFiles = [
+
+      new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
+      new MeasurementPlugin(viewer);
+
+    const fontFiles = [
         "./demo/three/fonts/hztxt.shx",
         "./demo/three/fonts/simplex.shx",
       ];
diff --git a/public/demo/empty_dxf_project.html b/public/demo/empty_dxf_project.html
index 21642d6..ca960e3 100644
--- a/public/demo/empty_dxf_project.html
+++ b/public/demo/empty_dxf_project.html
@@ -75,15 +75,22 @@
     </div>
 </div>
 <script type="module">
-    import { DxfViewer, LocalDxfUploader, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
+    import {
+        AxisGizmoPlugin,
+        BottomBarPlugin,
+        DxfViewer,
+        LocalDxfUploader,
+        MeasurementPlugin,
+        StatsPlugin,
+        ToolbarMenuId,
+        ViewerEvent,
+    } from "./demo/libs/gemini-viewer.esm.min.js";
     import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
     import LayerManager from './demo/layerManager/LayerManager.js';
 
     const config = {
         containerId: "myCanvas",
-        enableAxisGizmo: true,
         enableToolbar: true,
-        enableBottomBar: true,
         enableSpinner: true,
         enableProgressBar: true,
         enableLayoutBar: true,
@@ -128,6 +135,11 @@
     await viewer.setFont(fontFiles);
     window.viewer = viewer;
 
+    new AxisGizmoPlugin(viewer);
+    new BottomBarPlugin(viewer);
+    new MeasurementPlugin(viewer);
+    new StatsPlugin(viewer);
+
     const modelUploader = new LocalDxfUploader(viewer);
     modelUploader.onSuccess = () => {
         !viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
diff --git a/public/demo/empty_model_project.html b/public/demo/empty_model_project.html
index 622b838..5a67c1e 100644
--- a/public/demo/empty_model_project.html
+++ b/public/demo/empty_model_project.html
@@ -66,7 +66,17 @@
         </div>
     </div>
     <script type="module">
-        import { BimViewer, ToolbarMenuId, LocalModelUploader } from "./demo/libs/gemini-viewer.esm.min.js";
+        import {
+            AxisGizmoPlugin,
+            BimViewer,
+            BottomBarPlugin,
+            GroundShadowPlugin,
+            LocalModelUploader,
+            MeasurementPlugin,
+            NavCubePlugin,
+            SectionPlugin,
+            ToolbarMenuId,
+        } from "./demo/libs/gemini-viewer.esm.min.js";
 
         const project = {
             id: "empty_project",
@@ -85,16 +95,21 @@
         const viewer = new BimViewer(
             {
                 containerId: "myCanvas",
-                enableAxisGizmo: true,
                 toolbarMenuConfig: {
                     [ToolbarMenuId.BimTree]: { visible: false },
                 },
-                enableBottomBar: true,
-                enableNavCube: true,
                 enableContextMenu: true,
             },
             project.camera
         );
+
+        new AxisGizmoPlugin(viewer);
+        new BottomBarPlugin(viewer);
+        new GroundShadowPlugin(viewer);
+        new MeasurementPlugin(viewer);
+        new NavCubePlugin(viewer);
+        new SectionPlugin(viewer);
+
         // draco decoder path is needed to load draco encoded models.
         // gemini-viewer js sdk user maintains draco decoder code somewhere, and provides the path here.
         const decoderPath = "./demo/three/js/libs/draco/gltf/";
diff --git a/public/demo/empty_vr_project.html b/public/demo/empty_vr_project.html
index 649922f..e3ec52e 100644
--- a/public/demo/empty_vr_project.html
+++ b/public/demo/empty_vr_project.html
@@ -69,7 +69,6 @@
 
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
             enableBottomBar: true,
         }
         const vrViewer = new VRViewer(config);
diff --git a/public/demo/vr_0.html b/public/demo/vr_0.html
index 1fe728b..103fd30 100644
--- a/public/demo/vr_0.html
+++ b/public/demo/vr_0.html
@@ -182,8 +182,6 @@
 
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
-            enableBottomBar: true,
         }
         const viewer = new VRViewer(config);
         viewer.onHotpointClicked = (hotpoint) => {
diff --git a/public/demo/vr_1.html b/public/demo/vr_1.html
index 8b510dc..00f19d2 100644
--- a/public/demo/vr_1.html
+++ b/public/demo/vr_1.html
@@ -45,8 +45,6 @@
         }];
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: false,
-            enableBottomBar: false,
         }
         const viewer = new VRViewer(config);
         viewer.setViewpoints(viewpoints);
diff --git a/public/demo/vr_2.html b/public/demo/vr_2.html
index b76a4c8..f8df603 100644
--- a/public/demo/vr_2.html
+++ b/public/demo/vr_2.html
@@ -45,8 +45,6 @@
         }];
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: false,
-            enableBottomBar: false,
         }
         const viewer = new VRViewer(config);
         viewer.setViewpoints(viewpoints);
diff --git a/public/demo/vr_3.html b/public/demo/vr_3.html
index 71a4d09..2c7b6e3 100644
--- a/public/demo/vr_3.html
+++ b/public/demo/vr_3.html
@@ -66,8 +66,6 @@
         }];
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: false,
-            enableBottomBar: false,
         }
         const viewer = new VRViewer(config);
         viewer.setViewpoints(viewpoints);
diff --git a/public/demo/vr_4.html b/public/demo/vr_4.html
index c5973c6..cf3113f 100644
--- a/public/demo/vr_4.html
+++ b/public/demo/vr_4.html
@@ -115,8 +115,6 @@
         });
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
-            enableBottomBar: true,
         }
         const viewer = new VRViewer(config);
         viewer.onHotpointClicked = (hotpoint) => {
diff --git a/public/demo/vr_5.html b/public/demo/vr_5.html
index f4ba636..7994096 100644
--- a/public/demo/vr_5.html
+++ b/public/demo/vr_5.html
@@ -144,13 +144,9 @@
 
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
-            enableBottomBar: true,
         }
         const config2 = {
             containerId: "myCanvas2",
-            enableAxisGizmo: true,
-            enableBottomBar: true,
         }
         const viewer = new VRViewer(config);
         const viewer2 = new VRViewer(config2);
diff --git a/public/demo/vr_album_0.html b/public/demo/vr_album_0.html
index 20690dc..b3c2bfb 100644
--- a/public/demo/vr_album_0.html
+++ b/public/demo/vr_album_0.html
@@ -245,8 +245,6 @@
 
         const config = {
             containerId: "myCanvas",
-            enableAxisGizmo: true,
-            enableBottomBar: true,
         }
         const viewer = new VRViewer(config);
         viewer.onHotpointClicked = (hotpoint) => {