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

Merge pull request #96 from pattern-x/feature/update-example-pages

Browse Source 
Update demo page, and add one more screenshot
This commit is contained in:
pattern-x
2023-06-16 10:59:48 +08:00
committed by GitHub
parent 464c3d39d8 d9140b0b1e
commit 44692a4158
3 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -73,7 +73,8 @@ viewer.goToHomeView();
- Markups - Markups
![markups.gif](public/demo/images/snapshots/markups.gif) ![markups.gif](public/demo/images/snapshots/markups.gif)
- Comparison - 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 - Undo/redo
## DxfViewer limitations ## DxfViewer limitations
@ -91,7 +92,7 @@ viewer.goToHomeView();
## Features for BimViewer ## Features for BimViewer
- Load and view BIM model - 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 - Orthographic view
![bim_ortho_camera.png](public/demo/images/snapshots/bim_ortho_camera.png) ![bim_ortho_camera.png](public/demo/images/snapshots/bim_ortho_camera.png)
- Selection - Selection
@ -107,8 +108,8 @@ viewer.goToHomeView();
## Features for VRViewer ## Features for VRViewer
- Load and view a panorama - 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 - 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 - 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)

65
public/demo/dxf_8.html
View File

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

BIN
public/demo/images/snapshots/dxf_compare_2_viewports.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB