網頁3D模型讀取：斷線與離線環境應對策略

dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Y2hzYzJ4YTFteTh1enl5a3BpanVlejZxZ2kzb2V4b2p4cGFlaWR0a2EybXBmandiLW1vZGVsL1RDXyVFNSU4RiVCMCVFNSU4QyU5NyVFNyU5RiVCRCVFOCVCMCVCN18lRTQlQk...

1
📦 Model
2
 │ 📂output
3
 │ ├ 📂Resource
4
 │ │ ├ 📂Coordinate
5
 │ │ │ ├ 📂08f99ae5-b8be-4f8d-881b-128675723c10
6
 │ │ │ │ └ 📂New Construction_638482380449167336
7
 │ │ │ └ 📂3D-Main 2353558
8
 │ │ │ │ ├ 📜3D-Main.svf                // 3DViewer
9
 │ │ │ │ ├ ...
10
 │ │ ├ 📂Sheet                          // 圖紙文件
11
 │ │ │ ├ 📂A-00 - B1F PLAN 16618700
12
 │ │ │ │ └ 📂pdf
13
 │ │ │ │ │ ├ 📜A-00 - B1F PLAN.pdf      // 2DViewer
14
 │ │ │ │ │ ├ 📜A-00 - B1F PLAN1.png
15
 │ │ │ │ │ ├ 📜A-00 - B1F PLAN2.png
16
 │ │ │ │ │ └ 📜A-00 - B1F PLAN4.png
17
 │ │ │ ├ ...
18
 │ │ ├ 📜AECModelData.json              // AEC Data
19
 │ │ ├ 📜model.sdb                      // Property DB
20
 │ │ ├ 📜objects_attrs.json.gz
21
 │ │ ├ 📜objects_avs.json.gz
22
 │ │ ├ 📜objects_ids.json.gz
23
 │ │ ├ 📜objects_offs.json.gz
24
 │ │ ├ 📜objects_vals.json.gz
25
 │ │ └ 📜objects_viewables.json.gz
26
 │ ├ 📜preview1.png                     // 模型縮圖
27
 │ ├ 📜preview2.png
28
 │ └ 📜preview4.png
29
 └ 📜manifest.json                      // 資源讀取入口

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.103/style.css" />
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.103/viewer3D.js"></script>

// 離線模型暫存註冊檔
document.addEventListener('DOMContentLoaded', async function () {
  try {
    const registration = await navigator.serviceWorker.register('ServiceWorker.js');
    console.log('Service worker registered', registration.scope);
  } catch (err) {
    console.error('Could not register service worker', err);
  }
});

/** 加載 ADSK 雲端模型 */
const documentId = 'urn:' + modelUrn;
Autodesk.Viewing.Document.load(documentId, _successFunction, _failureFunction)

/** 加載本地模型 */
const document = new Autodesk.Viewing.Document(manifest, manifestPath, '')

1
/** 下載本地模型檔案 */
2
async loadSVFModelDocument(type: '3D' | '2D'): Promise<void> {
3
  // 1. 本地模型 manifest.json 檔案路徑
4
  const manifestPath = "";
5

6
  // 2. fetch json 內容
7
  const resp = await fetch(manifestPath, { method: 'GET' });
8
  if (!resp.ok) throw new Error(await resp.text());
9
  const manifest = await resp.json();
10

11
  // 3. 加載本地模型
12
  const document = new Autodesk.Viewing.Document(manifest, manifestPath, '');
13

14
  const viewerConfigs = {
15
    '3D': {
16
      viewerName: this.viewerName,
17
      successHandler:
18
        (doc: Autodesk.Viewing.Document) => this.onDocumentLoadSuccess_3D(this, doc),
19
      backgroundColor: this.bgColor_3D,
20
    },
21
    '2D': {
22
      viewerName: this.drawingName,
23
      successHandler:
24
        (doc: Autodesk.Viewing.Document) => this.onDocumentLoadSuccess_2D(this, doc),
25
      backgroundColor: this.bgColor_2D,
26
    },
27
  };
28

29
  const config = viewerConfigs[type];
30
  if (!config) return;
31
  config.successHandler(document);
32
}

1
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
2

3
// 1. start(3D.svf) 優先初始化先顯示模型，可是會造成後續的設定流失
4
const startedCode = viewer.start();
5

6
// 2. 模型顯示/操作設定，使用本地模型需要手動配置
7
// 模型幾何邊緣
8
viewer.setDisplayEdges(true);
9
// 滑鼠縮放反向
10
viewer.setReverseZoomDirection(true);
11
// 背景設定
12
viewer.setLightPreset(18);

1
// 取得所有視圖模型 viewer models
2
const models = viewer_3D.getAllModels();
3

4
// 顯示所有淡化物件
5
models.map((model: any) => {
6
  viewer.showAll(model);
7
});
8

9
// 將符合樓層的物件開啟顯示
10
viewer_3D.impl.visibilityManager.setNodeOff(parseInt(dbId), false, models[1]);