Sharepoint中的Autodesk Forge Viewer僅顯示黑色模型
P粉265724930
P粉265724930 2023-09-02 20:17:59
0
1
528
<p>對於我們目前的項目,我們按照這個教學將Forge Viewer整合到Sharepoint中。 (https://aps.autodesk.com/blog/sharepoint-online-integration)</p> <p>然後我們使用這個npm套件在React中設定了專案。 https://www.npmjs.com/package/react-forge-viewer。 </p> <p>將專案移轉到React後,檢視器失去了所有顏色,變成了黑色。 </p> <p>根據錯誤訊息,載入檢視器時屬性仍然未定義。 僅使用SPFX時沒有出現此問題,只有在使用React後才會出現。 </p> <p>非常感謝您的幫忙! </p> <p>錯誤訊息</p> <p>無顏色的檢視器</p>
P粉265724930
P粉265724930

全部回覆(1)
P粉884548619

看起來(由社群開發的)react-forge-viewer計畫在過去的3年裡沒有更新。為了排除該項目中的任何問題,我建議您用自己的簡單的React包裝器替換它。類似以下內容:

  • 將檢視器相依性新增至您的HTML:
    • <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>
  • #建立一個簡單的React包裝器,暫時將存取權杖和模型URN硬編碼:
// 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環境引入的任何潛在問題。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板