Update demo page, and add one more screenshot

This commit is contained in:
yanzexuan
2023-06-16 10:56:22 +08:00
parent 52d9ecdf77
commit d9140b0b1e
3 changed files with 39 additions and 39 deletions

View File

@ -73,7 +73,8 @@ viewer.goToHomeView();
- Markups
![markups.gif](public/demo/images/snapshots/markups.gif)
- Comparison
![markups.gif](public/demo/images/snapshots/dxf_compare.png)
![dxf_compare_2_viewports.gif](public/demo/images/snapshots/dxf_compare_2_viewports.gif)
![dxf_compare.gif](public/demo/images/snapshots/dxf_compare.png)
- Undo/redo
## DxfViewer limitations
@ -91,7 +92,7 @@ viewer.goToHomeView();
## Features for BimViewer
- Load and view BIM model
![load_and_view.gif](public/demo/images/snapshots/bim_view_model.png)
![bim_view_model.png](public/demo/images/snapshots/bim_view_model.png)
- Orthographic view
![bim_ortho_camera.png](public/demo/images/snapshots/bim_ortho_camera.png)
- Selection
@ -107,8 +108,8 @@ viewer.goToHomeView();
## Features for VRViewer
- Load and view a panorama
![load_and_view.gif](public/demo/images/snapshots/pano_load_and_view.gif)
![pano_load_and_view.gif](public/demo/images/snapshots/pano_load_and_view.gif)
- Switch to another panorama
![bim_ortho_camera.png](public/demo/images/snapshots/pano_switch_panos.gif)
![pano_switch_panos.gif](public/demo/images/snapshots/pano_switch_panos.gif)
- Switch between decorations
![bim_ortho_camera.png](public/demo/images/snapshots/pano_switch_decorations.gif)
![pano_switch_decorations.gif](public/demo/images/snapshots/pano_switch_decorations.gif)

View File

@ -10,8 +10,8 @@
body {
font-size: 0;
}
#viewer1,
#viewer2 {
#myCanvas1,
#myCanvas2 {
width: calc(50% - 1px);
height: 100%;
margin: 0;
@ -28,7 +28,12 @@
}
#syncCamera {
position: absolute;
text-align: center;
top: 20px;
left: calc(50% - 40px);
height: 40px;
width: 80px;
font-size: 16px;
line-height: 40px;
color: #fff;
@ -44,13 +49,12 @@
<body>
<div id="app" class="app">
<div id="viewer1" class="container"></div>
<div id="myCanvas1" class="container"></div>
<div class="split"></div>
<div id="viewer2" class="container"></div>
</div>
<div class="upload-containter">
<button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
<div id="myCanvas2" class="container"></div>
</div>
<button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
<script type="module">
import {
DxfCompareHelper,
@ -60,43 +64,43 @@
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const compareViewer = new DxfCompareHelper(
const url1 = "./demo/models/dxf/doors_and_windows.dxf";
const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
const compareHelper = new DxfCompareHelper(
{
containerId: "viewer1",
containerId: "myCanvas1",
enableAxisGizmo: true,
enableStats: true,
enableToolbar: true,
enableBottomBar: true,
enableSelection: true,
},
{
containerId: "viewer2",
enableAxisGizmo: true,
enableStats: true,
containerId: "myCanvas2",
enableAxisGizmo: false,
enableToolbar: true,
enableBottomBar: true,
enableSelection: true,
enableBottomBar: false,
enableSelection: false,
}
);
window.compareViewer = compareViewer;
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await compareViewer.setFont(fontFiles);
window.compareHelper = compareHelper;
const fontFiles = ["three/fonts/hztxt.shx", "three/fonts/simplex.shx"];
await compareHelper.setFont(fontFiles);
compareViewer.viewer1.toolbar?.updateMenus(
overrideToolbarConfig(compareViewer.viewer1)
compareHelper.viewer1.toolbar?.updateMenus(
overrideToolbarConfig(compareHelper.viewer1)
);
compareViewer.viewer2.toolbar?.updateMenus(
overrideToolbarConfig(compareViewer.viewer2)
compareHelper.viewer2.toolbar?.updateMenus(
overrideToolbarConfig(compareHelper.viewer2)
);
const syncCameraBtn = document.getElementById("syncCamera");
let enableSyncCamera = false;
syncCameraBtn.onclick = function () {
if (!enableSyncCamera) {
compareViewer.enableSyncCamera(true);
compareHelper.enableSyncCamera(true);
syncCameraBtn.innerText = "synced";
} else {
compareViewer.enableSyncCamera(false);
compareHelper.enableSyncCamera(false);
syncCameraBtn.innerText = "unsynced";
}
enableSyncCamera = !enableSyncCamera;
@ -107,17 +111,12 @@
console.log(`[Demo] Compare progress: ${progress}%`);
};
const url1 = "./demo/models/dxf/doors_and_windows.dxf";
const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
const modelConfig1 = { modelId: "doors_and_windows", name: "dxf 1", src: url1 };
const modelConfig2 = { modelId: "doors_and_windows_mopdified", name: "dxf 2", src: url2 };
compareViewer.compare(modelConfig1, modelConfig2, onProgress).then(() => {
// compare two specific dxf by default
compareHelper.compare({ src: url1, modelId: "dxf_3" }, { src: url2, modelId: "dxf_3_1" }, undefined, onProgress).then(() => {
console.log(`[Demo] Compared models: ${url1}, ${url2}`);
new DxfComparePanel(compareViewer, compareViewer.container);
new DxfComparePanel(compareHelper, compareHelper.container);
}).catch((reason) => {
console.error(
`[Demo] Failed to compare models: ${url1}, ${url2}. reason: ${reason}`
);
console.error(`[Demo] Failed to compare models: ${url1}, ${url2}. reason: ${reason}`);
});
function overrideToolbarConfig(viewer) {
@ -182,7 +181,7 @@
document.exitFullscreen();
window.removeEventListener("resize", onResize);
} else {
compareViewer.container.requestFullscreen();
compareHelper.container.requestFullscreen();
}
window.addEventListener("resize", onResize);
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB