搜尋

首頁  >  問答  >  主體

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

<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粉265724930P粉265724930438 天前511

全部回覆(1)我來回復

  • P粉884548619

    P粉8845486192023-09-03 18:40:35

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

    回覆
    0
  • 取消回覆