如何为Node.js版Forge Viewer项目添加新扩展？

Here's a straightforward, step-by-step guide to integrate the ForgeFader extension into your existing project:

1. Copy the Extension Files #

First, grab the core files from the ForgeFader repository:

• Locate ForgeFader.js and ForgeFader.css in the repo.
• In your Node.js project, create a subfolder under public/extensions (e.g., public/extensions/ForgeFader) and paste both files into it. This ensures your server can serve these assets correctly without extra configuration.

2. Link the Assets in Your HTML #

Open your main viewer page (usually public/index.html) and add references to the extension's styles and script:

• In the <head> section, add the stylesheet link after any existing Forge Viewer styles:

  <link rel="stylesheet" href="/extensions/ForgeFader/ForgeFader.css">
  

• At the end of the <body> section, right before your viewer initialization script, add the script tag:

  <script src="/extensions/ForgeFader/ForgeFader.js"></script>
  

3. Load the Extension in the Viewer #

You can load the extension in one of two ways, depending on your workflow:

Option A: Load during viewer creation #

When instantiating the GuiViewer3D, include the extension in the extensions option array to load it immediately:

const viewer = new Autodesk.Viewing.GuiViewer3D(container, {
  extensions: ['Autodesk.ADN.ForgeFader']
});

Option B: Load after viewer initialization #

If you prefer to load it later (e.g., after a model finishes loading), use the loadExtension method:

// Run this after the viewer is initialized and model is loaded
viewer.loadExtension('Autodesk.ADN.ForgeFader')
  .then(() => console.log('ForgeFader extension loaded successfully!'))
  .catch(err => console.error('Failed to load ForgeFader:', err));

4. Test the Integration #

Start your Node.js server with npm start, open the viewer page, and you should see the ForgeFader controls (like the fade adjustment slider) in the viewer UI. Try adjusting the slider to confirm the extension is working as expected.

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