Autodesk Forge Viewer in Sharepoint only shows black model

Question

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

Answer 1

Looks like the (community developed) react-forge-viewer project 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:
  • <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>
• 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 (
            <div className="viewer" ref={this.ref}>
            </div>
        );
    }
}

export { Viewer };

/* Viewer.css */

.viewer {
    position: relative;
    width: 800px;
    height: 600px;
}

• Finally, insert the <Viewer /> component 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.