Autodesk Forge Viewer in Sharepoint zeigt nur schwarzes Modell

Question

Für unser aktuelles Projekt haben wir dieses Tutorial befolgt, um Forge Viewer in Sharepoint zu integrieren. (https://aps.autodesk.com/blog/sharepoint-online-integration)

Dann richten wir das Projekt in React mit diesem npm-Paket ein. https://www.npmjs.com/package/react-forge-viewer.

Nach der Migration des Projekts zu React verlor der Viewer sämtliche Farben und wurde schwarz.

Laut Fehlermeldung ist die Eigenschaft beim Laden des Viewers noch undefiniert. Dieses Problem trat nicht auf, wenn nur SPFX verwendet wurde, sondern erst nach der Verwendung von React.

Vielen Dank für Ihre Hilfe!

Fehlermeldung

Farbloser Viewer

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环境引入的任何潜在问题。