如何使用 Forge Viewer 查看本地存儲的 SVF 文件？

Question

我目前正在處理一個項目，我想使用 Forge Viewer 在瀏覽器中顯示本地存儲的 SVF 文件。 我已經嘗試了不同的方法，但它們似乎都不起作用，而且每次都會遇到不同的異常。

這是我嘗試使用 React 和 Typescript 來做到這一點的方法。

這是我加載查看器組件的 App.tsx：

<div className="col-sm-8 fill">
    <ForgeViewer />
 </div>

這是我的查看器組件：

import React from 'react';
import {useEffect} from 'react'
import {initializeViewer} from './viewer-helper';

const ForgeViewer: React.FC = () => {

  useEffect(() => {
    initializeViewer()
  }, [])

  return (
    <div>
      <div id="forgeviewer"></div>
    </div>
  );

}

export default ForgeViewer

這是我為查看器組件編寫的幫助程序：

const options : Autodesk.Viewing.InitializerOptions = {
    doc: './models/small-revit-sample-house/Resource/3D_View/_3D_/_3D_.svf',
    env: "Local",
}

export const initializeViewer = () => {
    let container: HTMLElement | null;
    let viewer: Autodesk.Viewing.GuiViewer3D;
    container = document.getElementById('forgeviewer');
    
    if(container !== null){
      viewer = new Autodesk.Viewing.GuiViewer3D(container);
    }

    Autodesk.Viewing.Initializer(options, function () {
        //viewer.loadDocumentNode(options.doc, "/public/manifest.json");
        //viewer.loadModel(options.doc, onDocumentLoadSuccess, onDocumentLoadFailure);
        //Autodesk.Viewing.Document.load(modelURL, onDocumentLoadSuccess, onDocumentLoadFailure);
        viewer.start(options.doc);
        //loadViewer(modelURL);
    });
}

如您所見，我已經嘗試了不同的方法，但似乎都沒有奏效。

1：使用viewer.start函數我得到->“處理SVF時出錯：未找到中央目錄記錄的結尾”

2：使用viewer.loadDocumentNode我得到->“未處理的拒絕（TypeError）：e.getViewableUrn不是一個函數”

3：使用viewer.loadModel我得到->“未捕獲（承諾）TypeError：te未定義”順便說一句。 函數 onDocumentLoadSuccess 是一個不會被調用的空函數。

如果我能繼續使用這些工作方式並了解更多正在發生的事情，我會非常高興。 :)

Answer 1

您可以使用start方法或loadModel方法從自定義位置加載SVF ：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css" type="text/css"> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script> <style> html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; } #preview { height: 100%; } </style> <title>Autodesk Forge: Local SVF</title> </head> <body> <div id="preview"></div> <script> const MODEL_URL = 'https://petrbroz.s3-us-west-1.amazonaws.com/svf-samples/sports-car/0.svf'; Autodesk.Viewing.Initializer({ env: 'Local' }, async function () { const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview')); viewer.start(MODEL_URL); // viewer.loadModel(MODEL_URL); }); </script> </body> </html>

您收到的錯誤可能與 React 包裝器有關。

Answer 2

我讓它工作。 我是這樣做的：模型文件夾現在位於公共文件夾內（不利於安全，但對我的項目無關緊要）。 你可以像這樣加載 svf 文件：

Autodesk.Viewing.Initializer(options, function () {

      viewer.start( "./models/path/file.svf");

    });

如何使用 Forge Viewer 查看本地存儲的 SVF 文件？

問題描述

2 個解決方案

解決方案1
0 2020-11-16 09:38:11

解決方案2
0 2020-11-16 13:18:43

如何使用 Forge Viewer 查看本地存儲的 SVF 文件？

問題描述

2 個解決方案

解決方案1 0 2020-11-16 09:38:11

解決方案2 0 2020-11-16 13:18:43

解決方案1
0 2020-11-16 09:38:11

解決方案2
0 2020-11-16 13:18:43