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
On dirait que le projetreact-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 :
// 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 ( ); } } export { Viewer };/* Viewer.css */ .viewer { position: relative; width: 800px; height: 600px; }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.