Autodesk Forge Viewer in Sharepoint zeigt nur schwarzes Modell
P粉265724930
P粉265724930 2023-09-02 20:17:59
0
1
486
<p>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)</p> <p>Dann richten wir das Projekt in React mit diesem npm-Paket ein. https://www.npmjs.com/package/react-forge-viewer. </p> <p>Nach der Migration des Projekts zu React verlor der Viewer sämtliche Farben und wurde schwarz. </p> <p>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. </p> <p>Vielen Dank für Ihre Hilfe! </p> <p>Fehlermeldung</p> <p>Farbloser Viewer</p>
P粉265724930
P粉265724930

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!