是否有使用 angular 8 for viewer version7.* 進行自動鍛造的示例

Question

我無法在查看器中加載基於 urn 的文檔。 發布工作 svf 時有什么問題嗎，這是我的

 {
    "input": {
        "urn": "{{Urn}}",
        "compressedUrn": false
    },
    "output": {
        "destination": {
            "region": "us"
        },
        "formats": [
        {
            "type": "svf",
            "views": ["3d", "2d"]
        }]
    }
}

我嘗試以多種方式實現查看器，但最終總是出現此錯誤。 我是否以正確的方式加載文檔。？

無法讀取未定義的屬性“查看器”

 export class ForgeAutodeskComponent { private viewer: Autodesk.Viewing.Viewer3D; async ngOnInit() { this.initViewer(); } private async initViewer() { var options = { env: 'AutodeskProduction', api: 'derivativeV2', getAccessToken: this.getAccessToken }; Autodesk.Viewing.Initializer(options, () => { let htmlDiv = document.getElementById('forgeViewer') let config3d = { } this.viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, config3d); console.log(this.viewer); var startedCode = this.viewer.start(); if (startedCode > 0) { console.error('Failed to create a Viewer: WebGL not supported.'); return; } let documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c2Fuei0yNC0wNS9kc3AtMS5ydnWQF0P='; Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); function onDocumentLoadSuccess(viewerDocument) { var defaultModel = viewerDocument.getRoot().getDefaultGeometry(); console.log(this.viewer); this.viewer.loadDocumentNode(viewerDocument, defaultModel); } function onDocumentLoadFailure() { } }); } private getAccessToken(onSuccess: any) { const access_token = ; // Access Token const expires_in = 86399; onSuccess(access_token, expires_in); } }

我將需要查看器，因為我將對其進行一些屬性更改。 - 我已將腳本文件放在 index.html 中 - 我的開始代碼為 0 - 嘗試使用未填充的 Base64 和 Base64

Answer 1

您可以首先查看 Autodesk github 上的一些項目。 那里有一個打字稿示例。 您也可以按照learnforge教程開始。 如果您對 Angular 和 typescript 有一定的了解，您應該可以調整教程的普通 Javascript 以適應 Angular 組件。

這是一些幫助您入門的代碼。

組件.ts

export class GenericViewerComponent implements OnInit {
  private viewer: Autodesk.Viewing.Viewer3D;
  async ngOnInit() {
    this.initViewer();

  }
  private async initViewer() {

    var options = {
      env: 'AutodeskProduction',
      api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
      getAccessToken: null // get your 2 legged access token here instead of null (folow the turial)
    };

    Autodesk.Viewing.Initializer(options, () => {

      let htmlDiv = document.getElementById('forgeViewer')
      let config3d = {

      }

      this.viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, config3d);

      var startedCode = this.viewer.start();
      if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
      }
      console.log('Initialization complete, loading a model next...');

    });
  }
}

組件.html

<div id="forgeViewer"></div>

還要確保包括

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

在你的 index.html

祝你好運 ！

Answer 2

我們確實有一些示例，您可以在我的其他答案中找到它們： 如何將模型衍生 API (node.js) 與 angular 4 集成？