搜索

首页  >  问答  >  正文

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粉265724930446 天前520

全部回复(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
  • 取消回复