P粉8845486192023-09-03 18:40:35
看起來(由社群開發的)react-forge-viewer計畫在過去的3年裡沒有更新。為了排除該項目中的任何問題,我建議您用自己的簡單的React包裝器替換它。類似以下內容:
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
// Viewer.js import React from 'react'; import './Viewer.css'; const Autodesk = window.Autodesk; const ACCESS_TOKEN = '...'; const URN = '...'; async function initializeViewer(container) { return new Promise(function (resolve, reject) { Autodesk.Viewing.Initializer({ accessToken: ACCESS_TOKEN }, function () { const viewer = new Autodesk.Viewing.GuiViewer3D(container); viewer.start(); resolve(viewer); }); }); } async function loadModel(viewer, urn) { return new Promise(function (resolve, reject) { function onDocumentLoadSuccess(doc) { resolve(viewer.loadDocumentNode(doc, doc.getRoot().getDefaultGeometry())); } function onDocumentLoadFailure(code, message, errors) { reject({ code, message, errors }); } Autodesk.Viewing.Document.load('urn:' + urn, onDocumentLoadSuccess, onDocumentLoadFailure); }); } class Viewer extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); this.viewer = null; } componentDidMount() { if (!this.viewer) { this.viewer = initializeViewer(this.ref.current); this.viewer.then(viewer => loadModel(viewer, URN)); } } render() { return ( <div className="viewer" ref={this.ref}> </div> ); } } export { Viewer };
/* Viewer.css */ .viewer { position: relative; width: 800px; height: 600px; }
<Viewer />
元件插入到您的應用程式中。 如果即使使用這個簡單的React元件問題仍然存在,請嘗試在獨立的React應用程式中使用該元件,以排除Sharepoint環境引入的任何潛在問題。