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

Posted 2023-03-16

【中文标题】是否有可用于查看器版本 7 的 angular 8 自动锻造的示例。 *

【英文标题】：Is there examples available for auto forge using angular 8 for viewer version7.*

【发布时间】：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

【参考方案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?