Autodesk Forge Viewer in Sharepoint just shows black models

Question

For our current project, we integrated the Forge viewer into Sharepoint following this tutorial. ( https://aps.autodesk.com/blog/sharepoint-online-integration )

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

After moving the project to React, the viewer loses all color and stays black.

According to the error messages, properties are still undefined when loading the viewer. The issue didn't occur when working just with SPFX and only appeared after using React.

Thank you very much for your help!

Error Messages

Colorless Viewer

Answer 1

It looks like the (community-developed) react-forge-viewer project hasn't been updated in the last 3 years. To rule out any kind of issue in that project, I'd suggest that you replace it with your own, simple React wrapper for the viewer. Something like the following:

• Add viewer dependencies 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, for now hard-coding 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 to your app.

And if the issue still persists even with this simple React component, try using the component in a standalone React app to rule out any potential issues introduced by the Sharepoint context.