Autodesk Forge Viewer in Sharepoint only shows black model-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Autodesk Forge Viewer in Sharepoint only shows black model

P粉265724930 2023-09-02 20:17:59

446

For our current project, we followed this tutorial to integrate Forge Viewer into Sharepoint. (https://aps.autodesk.com/blog/sharepoint-online-integration)

Then we set up the project in React using this npm package. https://www.npmjs.com/package/react-forge-viewer.

After migrating the project to React, the viewer lost all color and turned black.

According to the error message, the property is still undefined when the viewer is loaded. This problem did not occur when using only SPFX, only after using React.

Thank you very much for your help!

Error message

Colorless Viewer

P粉265724930

reply all (1)

P粉8845486192023-09-03 18:40:35 1 floor

Looks like the (community developed)react-forge-viewerproject has not been updated in the past 3 years. To rule out any issues in this project, I recommend replacing it with your own simple React wrapper. Something like the following:

Add the viewer dependency to your HTML:
Create a simple React wrapper that temporarily hardcodes the access token and model 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 (  
 ); } } export { Viewer };

/* Viewer.css */ .viewer { position: relative; width: 800px; height: 600px; }

Finally, insert thecomponent into your application.

If the problem persists even with this simple React component, try using the component in a standalone React application to rule out any potential issues introduced by the Sharepoint environment.