bc-model-viewer 1.7.23 → 1.7.45

package/examples/ScenePageDemo.html

@@ -83,6 +83,17 @@
     <a href="index.html" class="back-button">返回示例列表</a>
     <div class="control-panel">
         <h2>🎭 场景页面管理器演示</h2>
+        
+        <!-- 属性查看工具控制 -->
+        <div class="control-group">
+            <h3>🔍 属性查看工具</h3>
+            <button id="activatePropertyViewer" class="btn">激活属性查看</button>
+            <button id="deactivatePropertyViewer" class="btn" disabled>停用属性查看</button>
+            <div style="font-size: 12px; color: #666; margin-top: 5px;">
+                工具状态: <span id="propertyViewerStatus">未激活</span>
+            </div>
+        </div>
+
         <div class="scene-buttons" id="modelScenesContainer">
             <!-- 模型中的场景按钮将在这里动态生成 -->
         </div>
@@ -111,7 +122,7 @@
 
     <script type="module">
         // 导入必要的组件
-        import { Viewer } from '../../index.ts';
+        import { Viewer, PropertyViewerTool } from '../../index.ts';
 
         // 获取容器元素
         const container = document.getElementById('container');
@@ -125,22 +136,84 @@
             },
         });
 
+        // 属性查看工具实例
+        let propertyViewerTool = null;
+
+        // 属性查看工具控制函数
+        function setupPropertyViewerTool() {
+            const activateBtn = document.getElementById('activatePropertyViewer');
+            const deactivateBtn = document.getElementById('deactivatePropertyViewer');
+            const statusSpan = document.getElementById('propertyViewerStatus');
+
+            // 激活属性查看工具
+            activateBtn.addEventListener('click', () => {
+                if (!propertyViewerTool) {
+                    propertyViewerTool = new PropertyViewerTool(viewer);
+                }
+                // 激活属性查看工具
+                propertyViewerTool.activate();
+
+                // 更新按钮状态
+                activateBtn.disabled = true;
+                deactivateBtn.disabled = false;
+                statusSpan.textContent = '已激活';
+                statusSpan.style.color = '#4CAF50';
+
+                console.log('属性查看工具已激活');
+            });
+
+            // 停用属性查看工具
+            deactivateBtn.addEventListener('click', () => {
+                if (propertyViewerTool) {
+                    propertyViewerTool.deactivate();
+
+                    // 更新按钮状态
+                    activateBtn.disabled = false;
+                    deactivateBtn.disabled = true;
+                    statusSpan.textContent = '未激活';
+                    statusSpan.style.color = '#666';
+
+                    console.log('属性查看工具已停用');
+                }
+            });
+        }
+
+        // 初始化属性查看工具
+        setupPropertyViewerTool();
+
         // 加载测试模型 - 请根据实际情况修改模型路径
         try {
             // 尝试加载默认模型，如果失败会显示错误信息
-            // await viewer.loadZipAsync('../../../assets/dgz/49F酒店室内.dgz');
-            await viewer.loadZipAsync('../../../assets/dgz/地下室管综2.dgz');
-            console.log('模型加载成功');
+            await viewer.loadZipAsync('../../../assets/p1.dgz');
+            // await viewer.loadZipAsync('../../../assets/dgz/地下室管综2.dgz');
 
             // 模型加载完成后，检查是否有内置场景
             console.log('模型中的场景:', viewer.scenePageManager.pages);
-            console.log('场景数量:', viewer.scenePageManager.pages.length);
 
             // 设置场景页面事件监听
             setupScenePageEvents();
 
             // 自动加载模型中的场景
             loadAndDisplayModelScenes();
+
+            // 为模型对象添加一些测试用的用户数据
+            setTimeout(() => {
+                if (viewer.scene && viewer.scene.children.length > 0) {
+                    viewer.scene.children.forEach((child, index) => {
+                        // 添加一些测试用的用户数据
+                        if (!child.userData) {
+                            child.userData = {
+                                material: 'Steel',
+                                weight: '15kg',
+                                manufacturer: 'Test Corp',
+                                partNumber: `PN-${index + 1000}`,
+                                description: '这是一个测试对象的描述信息'
+                            };
+                        }
+                    });
+                }
+            }, 100);
+
         } catch (error) {
             // console.error('模型加载失败，请检查路径是否正确:', error);
             // alert('模型加载失败，请确保模型文件路径正确');
@@ -155,7 +228,6 @@
 
             // 监听页面切换开始事件
             scenePageManager.addEventListener('pageChangeStart', (event) => {
-                console.log('PAGE_CHANGE_START', `开始切换到场景: ${event.page.name}`);
             });
 
             // 监听页面切换进度事件
@@ -165,20 +237,16 @@
                     'cameraPositioned': '相机位置设置完成'
                 };
                 const stageDesc = stageDescriptions[event.stage] || event.stage;
-                console.log('PAGE_CHANGE_PROGRESS', `进度: ${stageDesc}`);
             });
 
             // 监听页面切换完成事件
             scenePageManager.addEventListener('pageChangeComplete', (event) => {
-                console.log('PAGE_CHANGE_COMPLETE', `成功切换到场景: ${event.page?.name || '未知'}`);
             });
 
             // 监听页面切换错误事件
             scenePageManager.addEventListener('pageChangeError', (event) => {
-                console.log('PAGE_CHANGE_ERROR', `切换失败: ${event.error.message || '未知错误'}`);
             });
 
-            console.log('已设置场景页面管理器事件监听器');
         }
 
         // 加载并显示模型中的场景
@@ -219,8 +287,6 @@
 
             // 显示第一个场景的详细信息
             displaySceneDetails(modelScenes[0]);
-
-            console.log('已加载并显示模型中的所有场景');
         }
 
         // 显示场景详细信息
@@ -272,13 +338,10 @@
         }
         // 暴露viewer和辅助函数到全局以便调试
         window.viewer = viewer;
+        window.propertyViewerTool = propertyViewerTool;
         window.getModelScenes = getModelScenes;
         window.getSceneByName = getSceneByName;
         window.loadAndDisplayModelScenes = loadAndDisplayModelScenes;
-
-        console.log('场景页面管理器演示已加载');
-        console.log('可用场景:', viewer.scenePageManager.getAllSceneNames());
-        console.log('模型中的场景详情:', viewer.scenePageManager.pages);
     </script>
 </body>
 

package/examples/index.html

@@ -443,6 +443,17 @@
           </div>
           <a href="SelectionZoomTool.html" class="link-button">查看示例 →</a>
         </div>
+
+        <div class="example-card" data-name="属性查看" data-desc="对象属性">
+          <h3><span class="icon">🔍</span>属性查看工具</h3>
+          <div class="description">点击模型对象查看其属性信息，包括基本属性（位置、旋转、缩放等）和用户自定义数据。支持实时属性显示。</div>
+          <div class="tags">
+            <span class="tag tag-tool">查看工具</span>
+            <span class="tag tag-feature">属性查看</span>
+            <span class="tag tag-feature">用户数据</span>
+          </div>
+          <a href="PropertyViewerDemo.html" class="link-button">查看示例 →</a>
+        </div>
       </div>
     </section>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bc-model-viewer",
-  "version": "1.7.23",
+  "version": "1.7.45",
   "main": "./dist/bc-model-viewer.min.js",
   "module": "./dist/bc-model-viewer.min.js",
   "description": "A model viewer",