在Autodesk Forge中实现模型属性数据表遇LoggerExtension错误求助

一、修复"Extension not found: LoggerExtension"错误 #

LoggerExtension并非Forge Viewer原生扩展，是教程中自定义的扩展组件，按以下步骤排查：

1. 确保扩展代码存在
   在项目public/js/extensions/目录下创建LoggerExtension.js，写入基础扩展代码：

   class LoggerExtension extends Autodesk.Viewing.Extension {
       constructor(viewer, options) {
           super(viewer, options);
       }
   
       load() {
           console.log('LoggerExtension 已加载');
           // 可在此添加日志监听逻辑，比如监听选择事件
           this.viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
               console.log('选中元素:', event.dbIdArray);
           });
           return true;
       }
   
       unload() {
           console.log('LoggerExtension 已卸载');
           this.viewer.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT);
           return true;
       }
   
       static get ExtensionId() {
           return 'LoggerExtension';
       }
   }
   
   Autodesk.Viewing.theExtensionManager.registerExtension(LoggerExtension.ExtensionId, LoggerExtension);
   

2. 正确引入扩展模块
   在index.html中按顺序引入扩展和Viewer逻辑，确保扩展先注册再被调用：

   <script type="module">
       // 先加载自定义扩展
       import './js/extensions/LoggerExtension.js';
       // 再加载Viewer初始化代码
       import './js/ForgeViewer.js';
   </script>
   

3. 初始化Viewer时加载扩展
   在ForgeViewer.js的Viewer初始化完成后，显式加载扩展：

   function initializeViewer(container, urn) {
       const options = {
           env: 'AutodeskProduction',
           getAccessToken: getForgeToken
       };
   
       Autodesk.Viewing.Initializer(options, () => {
           const viewer = new Autodesk.Viewing.GuiViewer3D(container);
           viewer.start();
           loadModel(viewer, urn);
   
           // 加载LoggerExtension
           viewer.loadExtension('LoggerExtension').catch(err => {
               console.error('LoggerExtension加载失败:', err);
           });
       });
   }
   

二、实现模型属性数据表功能 #

创建自定义扩展PropertyGridExtension来展示模型属性，步骤如下：

1. 创建属性扩展代码
   在public/js/extensions/PropertyGridExtension.js中写入：

   class PropertyGridExtension extends Autodesk.Viewing.Extension {
       constructor(viewer, options) {
           super(viewer, options);
           this.tableContainer = options.tableContainer; // 传入表格容器ID
       }
   
       load() {
           // 监听模型加载完成事件
           this.viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {
               this.renderPropertyTable();
           });
           // 监听元素选择事件，更新选中元素属性
           this.viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
               if (event.dbIdArray.length > 0) {
                   this.renderSelectedElementProperties(event.dbIdArray[0]);
               }
           });
           return true;
       }
   
       unload() {
           this.viewer.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT);
           this.viewer.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT);
           return true;
       }
   
       // 渲染全模型属性概览表格
       renderPropertyTable() {
           const model = this.viewer.model;
           const propDb = model.getPropertyDb();
           const table = document.createElement('table');
           table.border = '1';
           // 创建表头
           const headerRow = table.insertRow();
           ['元素ID', '元素名称', '属性名称', '属性值'].forEach(text => {
               const th = document.createElement('th');
               th.textContent = text;
               headerRow.appendChild(th);
           });
   
           // 遍历模型元素
           propDb.enumObjects((dbId) => {
               const name = model.getObjectTree().getNodeName(dbId);
               // 获取元素属性
               propDb.enumProperties(dbId, (prop) => {
                   if (prop.displayName && prop.displayValue) {
                       const row = table.insertRow();
                       row.insertCell().textContent = dbId;
                       row.insertCell().textContent = name;
                       row.insertCell().textContent = prop.displayName;
                       row.insertCell().textContent = prop.displayValue;
                   }
               });
           });
   
           // 清空容器并添加表格
           const container = document.getElementById(this.tableContainer);
           container.innerHTML = '';
           container.appendChild(table);
       }
   
       // 渲染选中元素的详细属性
       renderSelectedElementProperties(dbId) {
           const model = this.viewer.model;
           const propDb = model.getPropertyDb();
           const name = model.getObjectTree().getNodeName(dbId);
           const table = document.createElement('table');
           table.border = '1';
           const headerRow = table.insertRow();
           ['属性名称', '属性值'].forEach(text => {
               const th = document.createElement('th');
               th.textContent = text;
               headerRow.appendChild(th);
           });
   
           propDb.enumProperties(dbId, (prop) => {
               if (prop.displayName && prop.displayValue) {
                   const row = table.insertRow();
                   row.insertCell().textContent = prop.displayName;
                   row.insertCell().textContent = prop.displayValue;
               }
           });
   
           const container = document.getElementById(this.tableContainer);
           container.innerHTML = `<h3>元素ID: ${dbId} | 名称: ${name}</h3>`;
           container.appendChild(table);
       }
   
       static get ExtensionId() {
           return 'PropertyGridExtension';
       }
   }
   
   Autodesk.Viewing.theExtensionManager.registerExtension(PropertyGridExtension.ExtensionId, PropertyGridExtension);
   

2. 引入并加载属性扩展
   在index.html中添加属性扩展的引入：

   <script type="module">
       import './js/extensions/LoggerExtension.js';
       import './js/extensions/PropertyGridExtension.js';
       import './js/ForgeViewer.js';
   </script>
   

   在页面中添加表格容器：

   <div id="property-grid" style="margin-top:20px; padding:10px;"></div>
   

   在ForgeViewer.js中加载属性扩展时传入容器ID：

   viewer.loadExtension('PropertyGridExtension', { tableContainer: 'property-grid' }).catch(err => {
       console.error('PropertyGridExtension加载失败:', err);
   });
   

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