是否有可用于查看器版本 7 的 angular 8 自动锻造的示例。 *答案

【问题标题】：Is there examples available for auto forge using angular 8 for viewer version7.*是否有可用于查看器版本 7 的 angular 8 自动锻造的示例。 *
【发布时间】：2020-06-09 04:56:42
【问题描述】：

我无法在查看器中加载基于 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 中 - 对于startedCode，我得到0 - 尝试使用未填充的 Base64 和 Base64

【问题讨论】：

标签： angular typescript autodesk-forge forge

【解决方案1】：

您可以先查看 Autodesk github 上的一些 projects。那里有一个打字稿示例。您也可以按照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 中

祝你好运！

【讨论】：

谢谢。我已经更新了我的问题，你能指出我做错了什么吗？
似乎是一个范围界定问题。它可能发生在 OnDocumentLoadSucces 它在 initviewer 内，并且 () 应该在它之外。尝试使用Autodesk.Viewing.Document.load(documentId, (x) => onDocumentLoadSuccess(x), onDocumentLoadFailure); 获得正确的范围

【解决方案2】：

我们确实有一些示例，您可以在我的其他答案中找到它们：How to integrate model derivative api (node.js) with angular 4?

【讨论】：