Autodesk Forge Viewer集成SharePoint后React环境下模型变黑求助

Here are targeted fixes based on common issues when migrating from SPFX to React with react-forge-viewer:

1. Wait for the Container to Mount Before Initializing the Viewer #

React’s async rendering means your viewer container might not exist in the DOM when you try to initialize the viewer. Use useRef and useEffect to guarantee the container is ready:

import React, { useRef, useEffect } from 'react';
import ForgeViewer from 'react-forge-viewer';

const ModelViewer = () => {
  const viewerRef = useRef(null);
  let viewerInstance = null;

  useEffect(() => {
    if (viewerRef.current) {
      viewerInstance = new ForgeViewer({
        container: viewerRef.current,
        options: {
          env: 'AutodeskProduction',
          accessToken: 'YOUR_VALID_TOKEN', // Fetch this securely from your backend
          api: 'derivativeV2' // Ensure this matches your model endpoint
        },
        onViewerInitialized: (viewer) => {
          viewer.loadDocumentNode('YOUR_BASE64_URN').then(() => {
            console.log('Model loaded successfully');
          }).catch(err => console.error('Load error:', err));
        },
        onError: (err) => console.error('Viewer error:', err)
      });
    }

    // Cleanup viewer when component unmounts
    return () => viewerInstance?.destroy();
  }, []);

  return <div ref={viewerRef} style={{ width: '100%', height: '80vh' }} />;
};

export default ModelViewer;

2. Include the Official Forge Viewer CSS #

SPFX automatically loads required viewer assets, but React doesn’t. Add this CSS to your public/index.html to fix missing shaders and styling (which causes black models):

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">

Stick to a specific version (e.g., 7.69.0) instead of 7.* to avoid unexpected breaking changes.

3. Disable React Strict Mode (Temporary Test) #

Strict Mode triggers double renders, which can conflict with the viewer’s initialization lifecycle. Remove <React.StrictMode> from your index.js to see if this resolves the undefined property error:

// Before
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// After
ReactDOM.render(<App />, document.getElementById('root'));

If this fixes it, you can keep strict mode off or adjust your initialization logic to handle double mounts.

4. Validate Your URN & Access Token #

• Ensure your model URN is properly base64-encoded (strip any trailing = characters).
• Confirm your access token has the viewables:read scope. Test it with a simple API call:

  curl -H "Authorization: Bearer YOUR_TOKEN" https://developer.api.autodesk.com/modelderivative/v2/designdata/YOUR_URN/manifest
  

  If this returns a valid manifest, your token and URN are correct.

5. Update Dependencies #

Outdated versions of react-forge-viewer can have compatibility issues. Update to the latest version:

npm update react-forge-viewer

6. Debug Initialization Flow #

Add logs to the viewer callbacks to pinpoint where things go wrong:

• Check if onViewerInitialized fires before trying to load the model.
• Verify the viewer instance has the impl property (common source of undefined errors).

The black model issue is almost always due to missing CSS assets, while the undefined property error comes from initializing the viewer before the container is ready or conflicting with React’s rendering cycle. Following these steps should resolve both problems.

内容的提问来源于stack exchange，提问作者flokess