在 Forge Viewer 中第二次后不加载扩展

Question

我使用 Reactjs 开发 Forge Viewer。

当我在 Forge Viewer 中显示绘图时，第二次后扩展没有加载。

未加载的扩展程序。

Autodesk.ViewCubeUi.
Autodesk.BimWalk.
Autodesk.Measure.
Autodesk.Section.
Autodesk.LayerManager.

在当前的实现中，每次绘图文件更改时都会重新加载查看器脚本。

我用参考实现了这个脚本。

https://github.com/outer-labs/react-forge-viewer

我该如何解决？

错误日志（这是一个 ViewCubeUi 错误，但其他扩展也是如此。）

Uncaught (in promise) Error: Extension not found: Autodesk.ViewCubeUi. Has it been registered(3)?
    at VM26450 viewer3D.min.js:19
(anonymous) @ viewer3D.min.js?v=v7.18:19
Promise.then (async)
loadExtension @ viewer3D.min.js?v=v7.18:19
(anonymous) @ viewer3D.min.js?v=v7.18:24
setTimeout (async)
T.createUI @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
setTimeout (async)
(anonymous) @ viewer3D.min.js?v=v7.18:24
p @ viewer3D.min.js?v=v7.18:19
(anonymous) @ viewer3D.min.js?v=v7.18:24
l @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
forEach.e.<computed> @ viewer3D.min.js?v=v7.18:24
x @ viewer3D.min.js?v=v7.18:24
a @ viewer3D.min.js?v=v7.18:24
Promise.then (async)
x @ viewer3D.min.js?v=v7.18:24
a @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
i @ viewer3D.min.js?v=v7.18:19

代码

查看器脚本加载如下。 <ForgeViewer /> 组件显示绘图并处理查看器事件。

const version = "7.18"
const cssUrl = `https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v${version}`
const scriptUrl = `https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v${version}`

import React, {useState, useEffect} from 'react'

interface ScriptLoaderProps {
  url: string
  onLoad?: () => void
  onError?: () => void
}

const ScriptLoader: React.FC<ScriptLoaderProps> = ({url, onLoad, onError, children}) => {
  const [ready, setReady] = useState(false)
  useEffect(() => {
    const script = document.createElement('script')
    script.src = url
    script.async = true
    script.onload = () => {
      setReady(true)
      if(onLoad) onLoad()
    }
    if(onError) script.onerror = onError
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [url])
  if(ready) return <>{children}</>
  return <></>
}

const Viewer = () => {
  return(
    <>
      <link rel="stylesheet" type="text/css" href={cssUrl} />
      <ScriptLoader url={scriptUrl}>
        <ForgeViewer />
      </ScriptLoader>
    </>
  )
}

Chrome 81.0.4044.138（正式版）（64 位）
查看器版本：7.18

Answer 1

尽量不要重新加载 Viewer 脚本，否则您可能运行陷入奇怪的冲突（或者更准确地说，根据我们的工程部门，这是一个深层的竞争条件）加载扩展和其他一些依赖项...

这个问题从早期的 v7 版本开始就存在...

想出自己的查看器组件并查看示例实际上非常简单 here - 在处理多个组件和重新加载时，只需使用状态控制机制（redux 等）来检查库是否正在加载 loaded/being 以避免冲突...

或者您可以自定义此组件（我们不完全支持，因为它是第 3 方）以在尝试加载脚本之前检查 window.Autodesk 是否已经可用...

在 Forge Viewer 中第二次后不加载扩展

Extensions do not load after the second time in Forge Viewer

javascript

typescript

reactjs

autodesk-forge

代码