Autodesk Forge Viewer dalam Sharepoint hanya menunjukkan model hitam

Question

Untuk projek semasa kami, kami mengikuti tutorial ini untuk menyepadukan Forge Viewer ke Sharepoint. (https://aps.autodesk.com/blog/sharepoint-online-integration)

Kemudian kami menyediakan projek dalam React menggunakan pakej npm ini. https://www.npmjs.com/package/react-forge-viewer.

Selepas memindahkan projek ke React, penonton kehilangan semua warna dan bertukar menjadi hitam.

Menurut mesej ralat, sifat itu masih tidak ditentukan apabila pemapar dimuatkan. Masalah ini tidak berlaku apabila hanya menggunakan SPFX, hanya selepas menggunakan React.

Terima kasih banyak atas bantuan anda!

Mesej ralat

Pemerhati Tanpa Warna

Answer 1

Nampaknya projek (komuniti maju) react-forge-viewer tidak dikemas kini dalam tempoh 3 tahun yang lalu. Untuk menolak sebarang isu dalam projek ini, saya syorkan anda menggantikannya dengan pembalut React ringkas anda sendiri. Sesuatu seperti:

• Tambahkan pergantungan penonton pada HTML anda:
  • <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>
• Buat pembungkus React ringkas yang mengekodkan token akses dan model URN buat sementara waktu:

// 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;
}

• Akhir sekali, masukkan komponen <Viewer /> ke dalam aplikasi anda.

Jika masalah berterusan walaupun dengan komponen React yang ringkas ini, cuba gunakan komponen tersebut dalam aplikasi React kendiri untuk menolak sebarang isu yang berpotensi yang diperkenalkan oleh persekitaran Sharepoint.