Question

我们想将某些伪造查看器代码库移至react-app中，并且在不将所有Autodesk.Viewer ....用法附加到带有窗口的组件中的情况下，无法弄清楚如何使用viewer3d js api。这适用于我们研究过的所有（优秀和广泛）git示例。为什么？我们在到反应登陆之间的index.html中加载viewer3d.js文件：

Failed to compile

./src/components/Viewer.js
  Line **:  'Autodesk' is not defined  no-undef

我们得到的错误（对于每个使用Autodesk名称空间的实例）：

this.viewer = new window.Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)

这有效：

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)

这不起作用：

{{1}}

Answer 1

如本user guide中所述，您需要从window显式读取任何全局变量。将其放在文件顶部，它将起作用：

const Autodesk = window.Autodesk;

并且建议将您的脚本标签拖到应用程序条目html的标头部分，以确保在React发出之前将其加载：

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
  </head>
...

Answer 2

我们通过在组件文件的第一行中放置一个global来解决此问题。基于this。

/*global Autodesk*/

但是，我确实更喜欢这种进口产品。谢谢你，布莱恩。

const Autodesk = window.Autodesk;

Answer 3

我已经准备好一个autodesk-forge-viewer键入模块，您可以在编译过程中使用它来验证类型。

以这种方式使用：

import Autodesk from 'autodesk-forge-viewer';
const autodesk: typeof Autodesk = (window as any).Autodesk;

对于某些类型为最新TypeScript的限制，该类型将为 Autodesk ，其值将为 autodesk ，因此，这是用于创建Viewer实例的代码：

const viewer: Autodesk.Viewing.Private.GuiViewer3D = new autodesk.Viewing.Private.GuiViewer3D(viewerContainer);

请注意， autodesk-forge-viewer 模块不包含Viewer实现，因此您仍然必须将viewer3D.js脚本添加到index.html。

无法使用Forge Viewer编译React应用-无法编译-Autodesk未定义undef

3 个答案: