![](/img/trans.png)
[英]How to load extensions for the Forge Viewer (without a viewerApp)
[英]Extensions do not load after the second time in Forge Viewer
我使用 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>
</>
)
}
盡量不要重新加載 Viewer 腳本,否則您可能會遇到奇怪的沖突(或者更准確地說,根據我們的工程,這是一個深層的賽車條件)加載擴展和一些其他依賴項......
從早期的 v7 版本開始就存在此問題...
想出自己的查看器組件並在此處查看示例實際上非常簡單 - 在處理多個組件並重新加載時,只需使用 state 控制機制(redux 等)來檢查庫是否已加載/正在加載以避免沖突。 ..
或者您可以自定義此組件(我們不完全支持,因為它是第 3 方)以在嘗試加載腳本之前檢查window.Autodesk
是否已經可用...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.