Sharepoint中的Autodesk Forge Viewer僅顯示黑色模型

Question

對於我們目前的項目，我們按照這個教學將Forge Viewer整合到Sharepoint中。 (https://aps.autodesk.com/blog/sharepoint-online-integration)

然後我們使用這個npm套件在React中設定了專案。 https://www.npmjs.com/package/react-forge-viewer。

將專案移轉到React後，檢視器失去了所有顏色，變成了黑色。

根據錯誤訊息，載入檢視器時屬性仍然未定義。 僅使用SPFX時沒有出現此問題，只有在使用React後才會出現。

非常感謝您的幫忙！

錯誤訊息

無顏色的檢視器

Answer 1

看起來（由社群開發的）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環境引入的任何潛在問題。