Update demo page, and add one more screenshot
This commit is contained in:
11
README.md
11
README.md
@ -73,7 +73,8 @@ viewer.goToHomeView();
|
||||
- Markups
|
||||

|
||||
- Comparison
|
||||

|
||||

|
||||

|
||||
- Undo/redo
|
||||
|
||||
## DxfViewer limitations
|
||||
@ -91,7 +92,7 @@ viewer.goToHomeView();
|
||||
|
||||
## Features for BimViewer
|
||||
- Load and view BIM model
|
||||

|
||||

|
||||
- Orthographic view
|
||||

|
||||
- Selection
|
||||
@ -107,8 +108,8 @@ viewer.goToHomeView();
|
||||
|
||||
## Features for VRViewer
|
||||
- Load and view a panorama
|
||||

|
||||

|
||||
- Switch to another panorama
|
||||

|
||||

|
||||
- Switch between decorations
|
||||

|
||||

|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
BIN
public/demo/images/snapshots/dxf_compare_2_viewports.gif
Normal file
BIN
public/demo/images/snapshots/dxf_compare_2_viewports.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Reference in New Issue
Block a user