更新了版本

demo/index.html

@@ -192,6 +192,20 @@
             </div>
         </div>
 
+        <!-- 9. 拾取构件 (Issue Report) -->
+        <div class="control-group">
+            <h2>🔍 拾取构件 (Issue Report)</h2>
+            <div class="btn-container">
+                <button id="btn-pick-component" class="primary" onclick="startPickComponent()">拾取构件</button>
+                <button onclick="getSelectedComponentInfo()">获取选中信息</button>
+                <button class="primary" onclick="openJumpToCameraDialog()">跳转构件</button>
+            </div>
+            <div style="margin-top: 10px; font-size: 0.85rem; color: #666;">
+                <div>拾取状态: <span id="pick-status">未开始</span></div>
+                <div id="picked-component-info" style="margin-top: 4px; word-break: break-all;"></div>
+            </div>
+        </div>
+
         <!-- 5. 3D 引擎 -->
         <div class="control-group">
             <h2>🎮 3D 引擎 (Engine3D)</h2>
@@ -266,6 +280,42 @@
         </div>
     </div>
 
+    <!-- 跳转构件弹窗 -->
+    <div id="jump-camera-overlay"
+        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; justify-content:center; align-items:center;">
+        <div
+            style="background:#fff; border-radius:10px; padding:24px; width:560px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,.18);">
+            <h3 style="margin:0 0 12px; font-size:1.1rem; color:#333;">跳转到构件视角</h3>
+            <p style="margin:0 0 10px; font-size:.85rem; color:#888;">请输入相机配置 JSON（参考格式：modelJson.cameraRestorePose）：</p>
+            <textarea id="jump-camera-json" rows="12"
+                style="width:100%; padding:10px; font-size:.85rem; border:1px solid #ddd; border-radius:6px; resize:vertical; font-family:monospace;"
+                placeholder='{
+  "type": "orthographic",
+  "position": {"x": 229.68, "y": 247.98, "z": 233.79},
+  "target": {"x": -4.58, "y": 13.72, "z": -0.47},
+  "orthographicHeight": 140.56
+}'></textarea>
+            <div style="margin-top:10px; font-size:.8rem; color:#666;">
+                <details>
+                    <summary style="cursor:pointer; color:#0078d4;">查看完整示例格式</summary>
+                    <pre style="margin-top:8px; padding:10px; background:#f5f5f5; border-radius:4px; overflow-x:auto; font-size:.75rem;">{
+  "type": "orthographic",
+  "position": {"x": 229.68, "y": 247.98, "z": 233.79},
+  "rotation": {"x": -0.79, "y": 0.62, "z": 0.52},
+  "quaternion": {"x": -0.28, "y": 0.36, "z": 0.12, "w": 0.88},
+  "target": {"x": -4.58, "y": 13.72, "z": -0.47},
+  "zoom": 1,
+  "orthographicHeight": 140.56
+}</pre>
+                </details>
+            </div>
+            <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:14px;">
+                <button onclick="closeJumpToCameraDialog()" style="min-width:72px;">取消</button>
+                <button class="primary" onclick="confirmJumpToCamera()" style="min-width:72px;">确定跳转</button>
+            </div>
+        </div>
+    </div>
+
     <script>
         let engine = null;      // BimEngine (3D) 实例
         let engine2d = null;    // BimEngine2d 实例
@@ -576,6 +626,145 @@
             }
         }
 
+        // --- 拾取构件功能 (Issue Report) ---
+        let isPickModeActive = false;
+        let unsubscribePickListener = null;
+
+        function startPickComponent() {
+            if (!engine) {
+                alert('请先初始化 3D 引擎！');
+                return;
+            }
+
+            isPickModeActive = true;
+            updatePickStatus('等待点击构件...');
+            document.getElementById('btn-pick-component').textContent = '取消拾取';
+            document.getElementById('btn-pick-component').onclick = stopPickComponent;
+
+            // 订阅构件点击事件
+            unsubscribePickListener = engine.on('component:selected', handleComponentPicked);
+
+            console.log('🔍 拾取模式已启动，请点击模型中的构件');
+        }
+
+        function stopPickComponent() {
+            isPickModeActive = false;
+            updatePickStatus('已取消');
+            document.getElementById('btn-pick-component').textContent = '拾取构件';
+            document.getElementById('btn-pick-component').onclick = startPickComponent;
+
+            // 取消订阅事件
+            if (unsubscribePickListener) {
+                unsubscribePickListener();
+                unsubscribePickListener = null;
+            }
+
+            console.log('🔍 拾取模式已取消');
+        }
+
+        function handleComponentPicked(payload) {
+            if (!isPickModeActive) return;
+
+            console.log('✅ 拾取到构件:', payload);
+
+            // 更新 UI 显示
+            updatePickStatus('已选中构件');
+            document.getElementById('picked-component-info').innerHTML = `
+                <strong>URL:</strong> ${payload.url}<br>
+                <strong>ID:</strong> ${payload.id}
+            `;
+
+            // 调用 getModelPosition 方法获取详细信息
+            try {
+                const result = engine.engine?.getModelPosition({
+                    url: payload.url,
+                    ids: [Number(payload.id)]
+                });
+
+                console.log('📦 getModelPosition 返回结果:', result);
+            } catch (err) {
+                console.error('❌ 调用 getModelPosition 失败:', err);
+            }
+
+            // 自动停止拾取模式（可选）
+            // stopPickComponent();
+        }
+
+        function getSelectedComponentInfo() {
+            if (!engine || !engine.engine) {
+                alert('请先初始化 3D 引擎！');
+                return;
+            }
+
+            const selected = engine.engine.getSelectedComponent();
+            if (!selected) {
+                alert('请先选中一个构件！');
+                return;
+            }
+
+            console.log('📋 当前选中的构件:', selected);
+
+            // 获取详细属性
+            engine.engine.getComponentProperties(selected.url, selected.id, (data) => {
+                console.log('📋 构件属性:', data);
+                alert(`构件属性已输出到控制台，请查看`);
+            });
+        }
+
+        function updatePickStatus(status) {
+            var el = document.getElementById('pick-status');
+            if (!el) return;
+            el.textContent = status;
+            if (status === '已选中构件') {
+                el.style.color = '#28a745';
+            } else if (status === '等待点击构件...') {
+                el.style.color = '#1565c0';
+            } else {
+                el.style.color = '#666';
+            }
+        }
+
+        // --- 跳转构件功能 (Jump to Camera) ---
+        function openJumpToCameraDialog() {
+            if (!engine || !engine.engine || !engine.engine.isInitialized()) {
+                alert('请先初始化 3D 引擎！');
+                return;
+            }
+            document.getElementById('jump-camera-overlay').style.display = 'flex';
+        }
+
+        function closeJumpToCameraDialog() {
+            document.getElementById('jump-camera-overlay').style.display = 'none';
+        }
+
+        function confirmJumpToCamera() {
+            var raw = document.getElementById('jump-camera-json').value.trim();
+            if (!raw) {
+                alert('请输入相机配置 JSON');
+                return;
+            }
+
+            var cameraData;
+            try {
+                cameraData = JSON.parse(raw);
+            } catch (e) {
+                alert('JSON 格式错误:\n' + e.message);
+                return;
+            }
+
+            console.log('[Demo] Jumping to camera:', cameraData);
+
+            var success = engine.engine.jumpToCamera(cameraData);
+
+            if (success) {
+                console.log('[Demo] Successfully jumped to camera position');
+                closeJumpToCameraDialog();
+            } else {
+                console.error('[Demo] Failed to jump to camera');
+                alert('跳转失败，请检查控制台日志');
+            }
+        }
+
         // --- 自动组合加载 ---
         function openCombineDialog() {
             if (!engine || !engine.engine || !engine.engine.isInitialized()) {