bc-model-viewer 1.7.18 → 1.7.19

package/examples/ChangeStyleDemo.html

@@ -60,6 +60,15 @@
 
         import { Viewer } from '../../index.ts'
 
+        // 尝试导入样式配置，如果失败则使用空对象
+        let styles = null;
+        try {
+            const styleModule = await import('../../src/options/style.ts');
+            styles = styleModule.default;
+        } catch (error) {
+            console.warn('无法导入样式配置，将从 viewer 中获取:', error);
+        }
+
         const container = document.getElementById('container')
 
         // 实例化 Viewer 对象 
@@ -78,11 +87,73 @@
         // 获取样式管理器实例
         const { styleManager } = viewer;
 
+        /**
+         * 更新页面上的参数输入框
+         * @param {Object} styleConfig 样式配置对象
+         */
+        function updateInputsFromStyle(styleConfig) {
+            if (!styleConfig) return;
+
+            const { background, edge } = styleConfig;
+
+            // 更新背景颜色输入框
+            if (background) {
+                // 更新纯色背景
+                const solidColorInput = document.getElementById('solidColor');
+                if (solidColorInput && background.color) {
+                    solidColorInput.value = background.color;
+                }
+
+                // 更新渐变背景
+                const topColorInput = document.getElementById('topColor');
+                const middleColorInput = document.getElementById('middleColor');
+                const bottomColorInput = document.getElementById('bottomColor');
+
+                if (topColorInput && background.color) {
+                    topColorInput.value = background.color;
+                }
+                if (middleColorInput && background.middleColor) {
+                    middleColorInput.value = background.middleColor;
+                } else if (middleColorInput && background.color) {
+                    // 如果没有中间色，使用基础色
+                    middleColorInput.value = background.color;
+                }
+                if (bottomColorInput && background.gradientColor) {
+                    bottomColorInput.value = background.gradientColor;
+                } else if (bottomColorInput && background.color) {
+                    // 如果没有渐变色，使用基础色
+                    bottomColorInput.value = background.color;
+                }
+            }
+
+            // 更新边缘颜色输入框
+            if (edge && edge.color) {
+                const edgeColorInput = document.getElementById('edgeColor');
+                if (edgeColorInput) {
+                    edgeColorInput.value = edge.color;
+                }
+            }
+        }
+
         // 切换到预设样式
         function changeToPresetStyle(styleIndex) {
             console.log(`切换到预设样式 ${styleIndex}`);
+
+            // 优先使用导入的原始样式配置（更准确），如果不存在则使用回调中的 style
+            let styleConfig = null;
+            if (styles && styles[styleIndex]) {
+                styleConfig = styles[styleIndex];
+            }
+
+            // 切换样式
             styleManager.changeStyle(styleIndex, (style) => {
                 console.log('样式应用成功:', style);
+
+                // 如果原始样式配置不存在，使用合并后的样式配置
+                const configToUse = styleConfig || style;
+
+                // 更新页面上的输入框
+                updateInputsFromStyle(configToUse);
             });
         }
 
@@ -125,23 +196,23 @@
         window.setSolidBackground = setSolidBackground;
         window.setGradientBackground = setGradientBackground;
         window.setEdgeColor = setEdgeColor;
-        
+
         // 边线控制方法
         function toggleEdgeVisibility() {
             console.log('切换边线显隐状态');
             styleManager.toggleEdgeVisibility();
         }
-        
+
         function showEdge() {
             console.log('显示边线');
             styleManager.showEdge();
         }
-        
+
         function hideEdge() {
             console.log('隐藏边线');
             styleManager.hideEdge();
         }
-        
+
         // 暴露边线控制方法到全局
         window.toggleEdgeVisibility = toggleEdgeVisibility;
         window.showEdge = showEdge;

package/examples/ExplosionDiagram.html

@@ -14,10 +14,22 @@
   <div class="demo">
     <h2>💥 模型爆炸图演示</h2>
     <p>通过调整爆炸强度来分离和展示模型的不同部件，便于查看内部结构。</p>
+    
+    <!-- 预设强度按钮 -->
+    <div class="control-group">
+      <label>预设强度：</label>
+      <button onclick="viewer.explosion.setPreset('small')">小爆炸 (25%)</button>
+      <button onclick="viewer.explosion.setPreset('medium')">中等 (50%)</button>
+      <button onclick="viewer.explosion.setPreset('large')">大爆炸 (75%)</button>
+      <button onclick="viewer.explosion.setPreset('max')">最大 (100%)</button>
+    </div>
+
+    <!-- 基础控制 -->
     <div class="control-group">
-      <button onclick="viewer.explosion.applyExplosion(10)">爆炸</button>
       <button onclick="viewer.explosion.resetExplosion()" id="resetBtn" class="secondary">复位</button>
     </div>
+
+    <!-- 滑块控制 -->
     <div class="control-group">
       <label for="intensity">爆炸强度: <span id="intensityValue">0</span></label>
       <input type="range" id="intensity" step="0.1" min="0" value="0" title="爆炸强度">
@@ -37,21 +49,11 @@
         cache: {
           enabled: false
         }
-      },
-      style: {
-        type: 1,
-        axes: {
-          // display: true,
-        }
       }
     })
 
     // 加载测试模型
-    // await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
-    // await viewer.loadZipAsync('../../assets/dgz/机电综合.dgz')
     await viewer.loadZipAsync('../../assets/new.dgz')
-    // await viewer.loadZipAsync('../../assets/new2.dgz')
-    // await viewer.loadZipAsync('../../assets/new3.dgz')
 
     viewer.initExplosion()
 
@@ -66,10 +68,30 @@
     intensity.addEventListener('input', (e) => {
       const value = parseFloat(e.target.value);
       intensityValue.textContent = value.toFixed(1);
-      viewer.setEdgeVisible(false)
       viewer.explosion.applyExplosion(value);
     });
 
+    // 更新滑块值（当使用预设时）
+    const updateSlider = () => {
+      const currentIntensity = viewer.explosion.getCurrentIntensity();
+      intensity.value = currentIntensity;
+      intensityValue.textContent = currentIntensity.toFixed(1);
+    };
+
+    // 重写预设方法以更新滑块
+    const originalSetPreset = viewer.explosion.setPreset.bind(viewer.explosion);
+    viewer.explosion.setPreset = function(presetName) {
+      originalSetPreset(presetName);
+      updateSlider();
+    };
+
+    // 重写复位方法以更新滑块
+    const originalReset = viewer.explosion.resetExplosion.bind(viewer.explosion);
+    viewer.explosion.resetExplosion = function() {
+      originalReset();
+      updateSlider();
+    };
+
     window.v = viewer
     window.viewer = viewer
   </script>

package/examples/ModelClipperTool.html

@@ -6,6 +6,122 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>模型剖切工具演示 - Bc-model-viewer</title>
   <link rel="stylesheet" href="common-styles.css">
+  <style>
+    .clipper-controls {
+      margin-top: 20px;
+    }
+
+    .plane-control {
+      margin-bottom: 15px;
+      padding: 12px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .plane-control-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .plane-control-label {
+      font-weight: 500;
+      color: #fff;
+      font-size: 14px;
+    }
+
+    .plane-control-value {
+      color: #4CAF50;
+      font-size: 13px;
+      font-weight: 600;
+      min-width: 50px;
+      text-align: right;
+    }
+
+    .plane-control-slider {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: rgba(255, 255, 255, 0.2);
+      outline: none;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .plane-control-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #4CAF50;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: background 0.2s;
+    }
+
+    .plane-control-slider::-webkit-slider-thumb:hover {
+      background: #45a049;
+    }
+
+    .plane-control-slider::-moz-range-thumb {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #4CAF50;
+      cursor: pointer;
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: background 0.2s;
+    }
+
+    .plane-control-slider::-moz-range-thumb:hover {
+      background: #45a049;
+    }
+
+    .plane-control-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .plane-control-actions button {
+      flex: 1;
+      padding: 6px 12px;
+      font-size: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .plane-control-actions button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .plane-control-actions button.danger {
+      background: rgba(244, 67, 54, 0.2);
+      border-color: rgba(244, 67, 54, 0.4);
+    }
+
+    .plane-control-actions button.danger:hover {
+      background: rgba(244, 67, 54, 0.3);
+    }
+
+    .no-planes-message {
+      padding: 20px;
+      text-align: center;
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 6px;
+      border: 1px dashed rgba(255, 255, 255, 0.2);
+    }
+  </style>
 </head>
 
 <body>
@@ -14,18 +130,26 @@
   <div class="demo">
     <h2>✂️ 模型剖切工具演示</h2>
     <p>对模型进行切片查看。支持多个剖切面，可以从不同角度查看模型内部结构。</p>
+
     <div class="control-group">
-      <button onclick="viewer.clipper.activate()">激活工具</button>
-      <button onclick="viewer.clipper.deactivate()">停用工具</button>
+      <button onclick="activateClipper()">激活工具</button>
+      <button onclick="deactivateClipper()">停用工具</button>
     </div>
+
     <div class="control-group">
-      <button onclick="viewer.clipper.clear()" class="danger">移除所有剖切面</button>
+      <button onclick="clearAllPlanes()" class="danger">移除所有剖切面</button>
+    </div>
+
+    <div class="clipper-controls" id="clipperControls">
+      <div class="no-planes-message">
+        点击模型表面创建剖切平面，然后使用拖动条调整剖切位置
+      </div>
     </div>
   </div>
 
   <script type="module">
 
-    import { Viewer, HUDLabelTool, ModelClipperTool } from '../../index.ts'
+    import { Viewer, ModelClipperTool } from '../../index.ts'
 
     const container = document.getElementById('container')
 
@@ -51,9 +175,153 @@
     await viewer.loadZipAsync('./dgz/样板间.dgz')
     // await viewer.loadZipAsync('../../../assets/dgz/机电综合.dgz')
 
-    viewer.clipper.activate()
+    // 更新剖切控制UI
+    function updateClipperControls() {
+      const controlsContainer = document.getElementById('clipperControls');
+      const clipper = viewer.clipper;
+
+      if (!clipper || clipper.clippingPlanes.length === 0) {
+        controlsContainer.innerHTML = `
+          <div class="no-planes-message">
+            点击模型表面创建剖切平面，然后使用拖动条调整剖切位置
+          </div>
+        `;
+        return;
+      }
+
+      let html = '';
+      clipper.clippingPlanes.forEach((plane, index) => {
+        const position = clipper.getPlanePositionByIndex(index);
+        const percentage = Math.round(position * 100);
+
+        html += `
+          <div class="plane-control" data-index="${index}">
+            <div class="plane-control-header">
+              <span class="plane-control-label">剖切面 #${index + 1}</span>
+              <span class="plane-control-value">${percentage}%</span>
+            </div>
+            <input 
+              type="range" 
+              class="plane-control-slider" 
+              min="0" 
+              max="1" 
+              step="0.01" 
+              value="${position}"
+              data-index="${index}"
+              oninput="updatePlanePosition(${index}, this.value)"
+            />
+            <div class="plane-control-actions">
+              <button onclick="resetPlanePosition(${index})">重置</button>
+              <button onclick="removePlane(${index})" class="danger">删除</button>
+            </div>
+          </div>
+        `;
+      });
+
+      controlsContainer.innerHTML = html;
+    }
+
+    // 更新剖切平面位置
+    function updatePlanePosition(index, value) {
+      const clipper = viewer.clipper;
+      if (!clipper) return;
+
+      clipper.setPlanePositionByIndex(index, parseFloat(value));
+
+      // 更新显示的值
+      const control = document.querySelector(`.plane-control[data-index="${index}"]`);
+      if (control) {
+        const valueDisplay = control.querySelector('.plane-control-value');
+        if (valueDisplay) {
+          const percentage = Math.round(parseFloat(value) * 100);
+          valueDisplay.textContent = `${percentage}%`;
+        }
+      }
+    }
+
+    // 重置剖切平面位置到中间
+    function resetPlanePosition(index) {
+      updatePlanePosition(index, 0.5);
+      const slider = document.querySelector(`.plane-control-slider[data-index="${index}"]`);
+      if (slider) {
+        slider.value = 0.5;
+      }
+    }
+
+    // 删除剖切平面
+    function removePlane(index) {
+      const clipper = viewer.clipper;
+      if (!clipper) return;
+
+      clipper.removeByIndex(index);
+      updateClipperControls();
+    }
+
+    // 激活工具
+    function activateClipper() {
+      viewer.clipper.activate();
+      updateClipperControls();
+    }
+
+    // 停用工具
+    function deactivateClipper() {
+      viewer.clipper.deactivate();
+    }
+
+    // 清除所有剖切面
+    function clearAllPlanes() {
+      viewer.clipper.clear();
+      updateClipperControls();
+    }
+
+    // 监听鼠标抬起事件，当创建新平面时更新UI
+    let lastPlaneCount = 0;
+    function checkPlaneChanges() {
+      const clipper = viewer.clipper;
+      if (!clipper) return;
+
+      if (clipper.clippingPlanes.length !== lastPlaneCount) {
+        lastPlaneCount = clipper.clippingPlanes.length;
+        updateClipperControls();
+      }
+    }
+
+    // 使用 requestAnimationFrame 监听变化（比 setInterval 更高效）
+    function startMonitoring() {
+      function monitor() {
+        checkPlaneChanges();
+        requestAnimationFrame(monitor);
+      }
+      monitor();
+    }
+
+    // 监听工具事件
+    viewer.clipper.addEventListener('activate', () => {
+      lastPlaneCount = viewer.clipper.clippingPlanes.length;
+      updateClipperControls();
+    });
+
+    viewer.clipper.addEventListener('deactivate', () => {
+      // 停用时可以停止监听
+    });
+
+    // 初始激活工具
+    viewer.clipper.activate();
+
+    // 开始监听变化
+    startMonitoring();
+
+    // 暴露函数到全局
+    window.viewer = viewer;
+    window.updatePlanePosition = updatePlanePosition;
+    window.resetPlanePosition = resetPlanePosition;
+    window.removePlane = removePlane;
+    window.activateClipper = activateClipper;
+    window.deactivateClipper = deactivateClipper;
+    window.clearAllPlanes = clearAllPlanes;
 
-    window.viewer = viewer
+    // 初始更新一次
+    updateClipperControls();
   </script>
 
 </body>