Autodesk Forge Viewer dans Sharepoint affiche uniquement le modèle noir

Question

Pour notre projet actuel, nous avons suivi ce tutoriel pour intégrer Forge Viewer dans Sharepoint. (https://aps.autodesk.com/blog/sharepoint-online-integration)

Ensuite, nous avons configuré le projet dans React à l'aide de ce package npm. https://www.npmjs.com/package/react-forge-viewer.

Après la migration du projet vers React, le visualiseur a perdu toute couleur et est devenu noir.

Selon le message d'erreur, la propriété n'est toujours pas définie au chargement de la visionneuse. Ce problème ne s'est pas produit lors de l'utilisation uniquement de SPFX, mais uniquement après avoir utilisé React.

Merci beaucoup pour votre aide !

Message d'erreur

Visionneuse incolore

Answer 1

On dirait que le projet react-forge-viewer (développé par la communauté) n'a pas été mis à jour au cours des 3 dernières années. Pour exclure tout problème dans ce projet, je recommande de le remplacer par votre propre wrapper React simple. Quelque chose comme :

• Ajoutez une dépendance de visionneuse à votre 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>
• Créez un simple wrapper React qui code temporairement en dur le jeton d'accès et l'URN du modèle :

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

• Enfin, insérez le composant <Viewer /> dans votre application.

Si le problème persiste même avec ce simple composant React, essayez d'utiliser le composant dans une application React autonome pour exclure tout problème potentiel introduit par l'environnement Sharepoint.