ByoungSooPark/gemini-viewer-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update gemini-viewer to v0.2.49

Browse Source
This commit is contained in:
yanzexuan
2023-07-15 00:28:57 +08:00
parent 1cf6fbf7c8
commit bc514664db
24 changed files with 203 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/config.json
View File

@ -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",

14
public/demo/bim_0.html
View File

@ -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/";

18
public/demo/bim_1.html
View File

@ -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/";

14
public/demo/bim_2_overlay_with_dxf.html
View File

@ -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"];

16
public/demo/dxf_0.html
View File

@ -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}%`);

16
public/demo/dxf_1.html
View File

@ -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}%`);

21
public/demo/dxf_10.html → public/demo/dxf_10_upload_files_to_compre.html
View File

@ -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)
);

16
public/demo/dxf_2.html
View File

@ -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}%`);

14
public/demo/dxf_3.html → public/demo/dxf_3_compare_with_1_viewport.html
View File

@ -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}%`);

10
public/demo/dxf_5.html → public/demo/dxf_5_markups.html
View File

@ -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}%`);

28
public/demo/dxf_6.html → public/demo/dxf_6_hotpoints.html
View File

@ -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>

12
public/demo/dxf_7.html → public/demo/dxf_7_building1_2.html
View File

@ -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}%`);

17
public/demo/dxf_8.html → public/demo/dxf_8_compare_with_2_viewports.html
View File

@ -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)
);

22
public/demo/dxf_9.html → public/demo/dxf_9_screenshot.html
View File

@ -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",
];

18
public/demo/empty_dxf_project.html
View File

@ -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));

23
public/demo/empty_model_project.html
View File

@ -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/";

1
public/demo/empty_vr_project.html
View File

@ -69,7 +69,6 @@
const config = {
containerId: "myCanvas",
enableAxisGizmo: true,
enableBottomBar: true,
}
const vrViewer = new VRViewer(config);

2
public/demo/vr_0.html
View File

@ -182,8 +182,6 @@
const config = {
containerId: "myCanvas",
enableAxisGizmo: true,
enableBottomBar: true,
}
const viewer = new VRViewer(config);
viewer.onHotpointClicked = (hotpoint) => {

2
public/demo/vr_1.html
View File

@ -45,8 +45,6 @@
}];
const config = {
containerId: "myCanvas",
enableAxisGizmo: false,
enableBottomBar: false,
}
const viewer = new VRViewer(config);
viewer.setViewpoints(viewpoints);

2
public/demo/vr_2.html
View File

@ -45,8 +45,6 @@
}];
const config = {
containerId: "myCanvas",
enableAxisGizmo: false,
enableBottomBar: false,
}
const viewer = new VRViewer(config);
viewer.setViewpoints(viewpoints);

2
public/demo/vr_3.html
View File

@ -66,8 +66,6 @@
}];
const config = {
containerId: "myCanvas",
enableAxisGizmo: false,
enableBottomBar: false,
}
const viewer = new VRViewer(config);
viewer.setViewpoints(viewpoints);

2
public/demo/vr_4.html
View File

@ -115,8 +115,6 @@
});
const config = {
containerId: "myCanvas",
enableAxisGizmo: true,
enableBottomBar: true,
}
const viewer = new VRViewer(config);
viewer.onHotpointClicked = (hotpoint) => {

4
public/demo/vr_5.html
View File

@ -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);

2
public/demo/vr_album_0.html
View File

@ -245,8 +245,6 @@
const config = {
containerId: "myCanvas",
enableAxisGizmo: true,
enableBottomBar: true,
}
const viewer = new VRViewer(config);
viewer.onHotpointClicked = (hotpoint) => {