root
/
web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<html>

<head>
  <link rel="icon" href="/geminiRender/favicon.ico"/>
  <link rel="stylesheet" type="text/css" href="/geminiRender/global.css"/>
  <link rel="stylesheet" href="/geminiRender/layerManager/layerManager.css">
  <link rel="stylesheet" href="/geminiRender/settings/SettingsPanel.css">
  <style>
    .upload-btn {
      margin-top: 2em;
    }

    .upload-btn button {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }

    .upload-btn label {
      color: #353535;
      background: gray;
      border: 0;
      border-radius: 3px;
      /*transition: ease 0.2s background-color;*/
      font-size: 1rem;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      padding: 0.625rem 1.25rem;
    }

    .upload-btn label:hover {
      background: #DDD;
    }

    .upload-btn svg {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      fill: currentColor;
      margin-top: -0.25em;
      margin-right: 0.25em;
    }

    .model-layout-switch-bar {
      display: none !important;
    }

    .toolbar {
      display: none !important;
    }

    .axesRenderer {
      display: none !important;
    }
  </style>
</head>

<body>
<div id="app">
  <div id="myCanvas" class="container"></div>
</div>
<div style="position: absolute; top: 10px; opacity: 0.6; width: 100%;text-align: center;">
  <!--  <div class="upload-btn" id="uploadBtn">-->
  <!--    <button id="uploadModelFile" type="button">点此上传本地模型文件</button>-->
  <!--    <label for="uploadModelFile" title="">-->
  <!--      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">-->
  <!--        <path-->
  <!--          d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>-->
  <!--      </svg>-->
  <!--      <span>Upload dxf</span>-->
  <!--    </label>-->
  <!--    <div style="margin-top: 1em;">-->
  <!--      <input id="fileUrlInput" style="display: inline-block; width: 20em; height: 2em;">-->
  <!--      <button-->
  <!--        style="width: 8em; height: 2em; color: #fff; overflow: auto; z-index: 1; opacity: 1; background: #000;"-->
  <!--        id="loadDxf">加载DXF-->
  <!--      </button>-->
  <!--    </div>-->
  <!--  </div>-->
</div>
<script type="module">
  import {DxfViewer, LocalDxfUploader, ToolbarMenuId} from "/geminiRender/libs/gemini-viewer.esm.min.js";
  import DxfSettingsPanel from '/geminiRender/settings/DxfSettingsPanel.js';
  import LayerManager from '/geminiRender/layerManager/LayerManager.js';

  const config = {
    containerId: "myCanvas",
    enableAxisGizmo: true,
    enableToolbar: true,
    enableBottomBar: true,
    enableSpinner: true,
    enableProgressBar: true,
    enableLayoutBar: true,
    toolbarMenuConfig: {
      [ToolbarMenuId.Settings]: {
        onActive: () => {
          console.log("[Toolbar]", "Activate Settings");
          if (!window.dxfSettingsPanel) {
            window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer);
          }
          window.dxfSettingsPanel.show();
        },
        onDeactive: () => {
          console.log("[Toolbar]", "Deactivate Settings");
          if (!window.dxfSettingsPanel) {
            window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer);
          }
          window.dxfSettingsPanel.hide();
        },
      },
      [ToolbarMenuId.Layers]: {
        onActive: () => {
          console.log("[Toolbar]", "Activate Layers");
          if (!window.layerManager) {
            window.layerManager = new LayerManager(window.viewer);
          }
          window.layerManager.show();
        },
        onDeactive: () => {
          console.log("[Toolbar]", "Deactivate Layers");
          if (!window.layerManager) {
            window.layerManager = new LayerManager(window.viewer);
          }
          window.layerManager.hide();
        },
      },
    },
  };
  const viewer = new DxfViewer(config);
  // const fontFiles = ["three/fonts/Microsoft_YaHei_Regular.typeface.json"];
  const fontFiles = ["/geminiRender/three/fonts/hztxt.shx", "/geminiRender/three/fonts/simplex.shx"];
  await viewer.setFont(fontFiles);
  window.viewer = viewer;

  const modelUploader = new LocalDxfUploader(viewer);
  modelUploader.onSuccess = () => {
    !viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
  }
  // document.getElementById("uploadModelFile").onclick = function () {
  //   modelUploader.openFileBrowserToUpload();
  // }
  // document.getElementById("loadDxf").onclick = function () {
  //   const url = document.getElementById("fileUrlInput").value;
  //   if (url) {
  //     viewer.loadModelAsync({src: url, merge: true}).then(() => {
  //       console.log(`[Demo] Loaded model ${url}`);
  //       !viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
  //     })
  //   }
  // }

  // as a demo page, add dxfSettingsPanel to window!
  window.dxfSettingsPanel = new DxfSettingsPanel(viewer);

  function getUrlParams(url) {
    const urlSearchParams = new URLSearchParams(url)
    const result = Object.fromEntries(urlSearchParams.entries())
    return result
  }

  window.onload = () => {

    debugger
    const path = getUrlParams(window.location.search)['path']
    console.log('path', path)

  }
  (function render() {
    const path = getUrlParams(window.location.search)['path']
    console.log('path', path)
    viewer.loadModelAsync({src: path, merge: true}).then(() => {
      console.log(`[Demo] Loaded model ${path}`);
      !viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
    })
  }())

</script>
</body>

</html>