11

examples/app-global.js

@@ -93,8 +93,7 @@ const getAutoLoadModelList = async () => {
 
 //获取放置区域
 const getPlacementZone = async (sku) => {
-    //pergolaSku 是需要在加载棚子的时取其引用，传进来的sku则是配件的sku，根据配件的sku来判断放置区域
-    const kernel = getKernel();
+     const kernel = getKernel();
     let division_include = []
     // 同时包含10和13
     const only10_13 = /(?=.*10)(?=.*13)/.test(pergolaSku)
@@ -104,8 +103,6 @@ const getPlacementZone = async (sku) => {
     const only10_12 = /(?=.*10)(?=.*12)/.test(pergolaSku)
     // 同时包含10和20
     const only10_20 = /(?=.*10)(?=.*20)/.test(pergolaSku)
-    // 只包含13 无13 无12 无20
-    const only13 = /(?=.*13)(?!.*10)(?!.*12)(?!.*20)/.test(pergolaSku)
 
     // 1. 只要字符串里包含 10，就返回 true
     const has10 = /10/.test(sku);
@@ -147,21 +144,15 @@ const getPlacementZone = async (sku) => {
         }
     }
 
-    //棚子同时包10和20的并且含配件是13 
+    //棚子同时包10和20的并且含配件是13
     if (only10_20 && has13) {
 
         if (pergolaSku === "SPF111S1020PILLAR4PCS") {
             division_include.push('前', '后')
         }
     }
-    //棚子只包13的并且含配件是13
-    if (pergolaSku === "SPF111SEM13" && has13) {
-        division_include.push('前', '后')
-    }
-    if (pergolaSku === "SPF111SEM13" && has10) {
-        division_include.push('左', '右')
-    }
 
+    console.log('[放置区域] 本次配件的方向:', division_include);
 
     const response = await fetch(getApiUrl(`/api/product-configs/by-sku/${sku}`));
     const result = await response.json();
@@ -170,20 +161,27 @@ const getPlacementZone = async (sku) => {
         const { enable_placement_zone, wall_divisions } = result.data;
         // const {position_x, position_y, position_z} = data;
         if (enable_placement_zone && wall_divisions != undefined) {
-            console.log(wall_divisions);
+            console.log('[放置区域] 当前配件的墙面配置:', wall_divisions);
 
+     
             const filteredDivisions = wall_divisions.filter(item => division_include.includes(item.name))
-            console.log(filteredDivisions);
-            // 只清除旧的放置区域网格，不清除模型
-            kernel.dropZone.clearZones();
+            console.log('[放置区域] 当前显示的墙面:', filteredDivisions);
+
+            // 不需要手动 clearZones，updateDivisions 会自动处理增量更新
             const divisions = filteredDivisions.map(wall => ({
                 name: wall.name,
                 divisions: wall.divisions
             }))
 
-            kernel.dropZone.updateDivisions(divisions);
-            // 显示放置区域
-            kernel.dropZone.show();
+            const zones = kernel.dropZone.updateDivisions(divisions);
+
+            // 隐藏所有，然后只显示当前需要的墙面
+            kernel.dropZone.hide();
+            // 从生成的 zones 中提取完整的墙面名称
+            const wallNamesToShow = new Set(zones.map(zone => zone.wallName));
+            wallNamesToShow.forEach(wallName => {
+                kernel.dropZone.showWall(wallName);
+            });
         }
     }
 }

examples/demo-global.html

@@ -585,7 +585,7 @@
             </div>
         </div>
     </div>
-       <script src="https://sdk.zguiy.com/zt/assets/index.global.js?v=1234"></script>
+       <script src="./index.global.js?v=1234"></script>
     <!-- <script src="./index.global.js?v=1234"></script> -->
     <script src="./app-global.js"></script>
     <script>

index.js

@@ -178,26 +178,25 @@ export const getPlacementZone = async (sku) => {
         if (enable_placement_zone && wall_divisions != undefined) {
             console.log('[放置区域] 当前配件的墙面配置:', wall_divisions);
 
-            // 将当前配件的墙面配置缓存起来（用于拖拽时查找）
-            wall_divisions.forEach(wall => {
-                wall_divisions_cache.set(wall.name, wall);
-            });
-            console.log('[放置区域] 已缓存的所有墙面配置:', Array.from(wall_divisions_cache.keys()));
-
-            // 只使用当前配件的墙面配置，不累积显示
+     
             const filteredDivisions = wall_divisions.filter(item => division_include.includes(item.name))
             console.log('[放置区域] 当前显示的墙面:', filteredDivisions);
 
-            // 只清除旧的放置区域网格，不清除模型
-            kernel.dropZone.clearZones();
+            // 不需要手动 clearZones，updateDivisions 会自动处理增量更新
             const divisions = filteredDivisions.map(wall => ({
                 name: wall.name,
                 divisions: wall.divisions
             }))
 
-            kernel.dropZone.updateDivisions(divisions);
-            // 显示放置区域
-            kernel.dropZone.show();
+            const zones = kernel.dropZone.updateDivisions(divisions);
+
+            // 隐藏所有，然后只显示当前需要的墙面
+            kernel.dropZone.hide();
+            // 从生成的 zones 中提取完整的墙面名称
+            const wallNamesToShow = new Set(zones.map(zone => zone.wallName));
+            wallNamesToShow.forEach(wallName => {
+                kernel.dropZone.showWall(wallName);
+            });
         }
     }
 }
@@ -231,9 +230,7 @@ export const showWallFromCache = (wallName) => {
     if (wallConfig) {
         console.log(`[放置区域] 从缓存恢复墙面 ${wallName}:`, wallConfig);
 
-        // 清除旧的放置区域网格
-        kernel.dropZone.clearZones();
-
+        // 不需要手动 clearZones，updateDivisions 会自动处理增量更新
         // 重新生成该墙面的放置区域
         kernel.dropZone.updateDivisions([wallConfig]);
 
@@ -370,6 +367,8 @@ export const executeEvent2 = async (result, sku) => {
         kernel.model.removeAll();
         // 清除所有 SKU 映射
         clearAllSkuMappings();
+        // 只清除放置区域的网格和数据，不删除模型（模型已经在 removeAll 中删除了）
+        kernel.dropZone.clearZones();
     }
 
     // 先处理所有 change_model 事件

src/babylonjs/AppDropZone.ts

@@ -35,10 +35,8 @@ export class AppDropZone {
   // 存储原始墙面配置（用于 updateDivisions 时恢复完整墙面列表）
   private originalWalls: WallConfig[] = [];
 
-  // 存储所有墙面的区域数据（持久化，不会被覆盖）
-  private allWallZonesData: Map<string, PlacementZoneInfo[]> = new Map();
-  // 当前激活显示的墙面名称集合（用于控制显示）
-  private activeWallNames: Set<string> = new Set();
+  // 备份数据，用于点击空白处时回退
+  private backupConfig: DropZoneConfig | null = null;
 
   constructor(scene: Scene) {
     this.scene = scene;
@@ -105,13 +103,23 @@ export class AppDropZone {
       return [];
     }
 
+    // 每次 updateDivisions 都备份当前配置（深拷贝，保留 Vector3 对象）
+    this.backupConfig = {
+      ...this.dropZoneConfig,
+      walls: this.dropZoneConfig.walls.map(wall => ({
+        ...wall,
+        startPoint: wall.startPoint.clone(),
+        endPoint: wall.endPoint.clone()
+      }))
+    };
+
     // 将数组转换为对象映射
     const divisionsMap: Record<string, number> = {};
     divisions.forEach(item => {
       divisionsMap[item.name] = item.divisions;
     });
 
-  
+
     // 匹配墙面名称（精确匹配）
     const matchWallName = (wallName: string): number | null => {
       // 提取墙面名称的最后部分（最后一个下划线之后）
@@ -126,8 +134,8 @@ export class AppDropZone {
       return null;
     };
 
-    // 更新配置中的墙面分割数，从原始配置中恢复墙面列表
-    this.dropZoneConfig.walls = this.originalWalls
+    // 从原始配置中筛选出本次要更新的墙面
+    const newWalls = this.originalWalls
       .map(wall => {
         const newDivisions = matchWallName(wall.name);
 
@@ -136,24 +144,35 @@ export class AppDropZone {
           return null;
         }
 
-
         return {
           ...wall,
           divisions: newDivisions
         };
       })
-      .filter(wall => wall !== null) as typeof this.dropZoneConfig.walls; // 过滤掉未配置的墙面
+      .filter(wall => wall !== null) as WallConfig[];
+
+    // 合并到现有配置中（保留其他墙面，更新/添加本次传入的墙面）
+    // 先过滤掉 divisions 为 0 或未设置的墙面（避免初始状态污染）
+    const existingWallsMap = new Map(
+      this.dropZoneConfig.walls
+        .filter(w => w.divisions && w.divisions > 0)  // 只保留有效的墙面配置
+        .map(w => [w.name, w])
+    );
+    newWalls.forEach(wall => {
+      existingWallsMap.set(wall.name, wall);
+    });
+    this.dropZoneConfig.walls = Array.from(existingWallsMap.values());
 
     // 更新 wallDivisionsMap（重要：用于后续的自动排列和拖拽检查）
     this.dropZoneConfig.walls.forEach(wall => {
       this.wallDivisionsMap.set(wall.name, wall.divisions);
     });
 
-    // 清除旧的放置区域网格（不清除模型）
-    this.clearZones();
-
-    // 重新生成放置区域
-    const zones = this.generateDropZones();
+    // 只生成本次传入的墙面（不生成所有墙面）
+    const zones = this.placementWall.generatePlacementAreas({
+      ...this.dropZoneConfig,
+      walls: newWalls  // 只传入本次要更新的墙面
+    });
 
     // 显示放置区域
     this.show();
@@ -221,6 +240,8 @@ export class AppDropZone {
     // 记录新模型
     this.zoneModelMap.set(zoneKey, modelId);
 
+    // 成功放置模型，确认当前配置（清除备份）
+    this.confirmConfig();
 
     // 检查该墙面是否已满，如果满了则自动排列
     this.checkAndAutoArrange(wallName);
@@ -462,8 +483,8 @@ export class AppDropZone {
    */
   show(): void {
     // this.placementWall.show();
-    // // 禁用所有已放置模型的拾取
-    // this.setModelsPickable(false);
+    // 禁用所有已放置模型的拾取
+    this.setModelsPickable(false);
   }
 
   /**
@@ -478,13 +499,41 @@ export class AppDropZone {
 
   /**
    * 隐藏所有放置区域
+   * @param shouldRollback 是否回退到备份配置（点击空白处时为true）
    */
-  hide(): void {
+  hide(shouldRollback: boolean = false): void {
+    // 如果需要回退且有备份数据，则恢复配置
+    if (shouldRollback && this.backupConfig) {
+      this.dropZoneConfig = this.backupConfig;
+      this.backupConfig = null;
+
+      // 同步 wallDivisionsMap
+      if (this.dropZoneConfig) {
+        this.dropZoneConfig.walls.forEach(wall => {
+          this.wallDivisionsMap.set(wall.name, wall.divisions);
+        });
+      }
+
+      // 重新生成放置区域，使 placementZones 与回退后的配置一致
+      this.placementWall.generatePlacementAreas({
+        ...this.dropZoneConfig,
+        walls: this.dropZoneConfig.walls
+      });
+    }
+
     this.placementWall.hide();
     // 恢复所有已放置模型的拾取
     this.setModelsPickable(true);
   }
 
+  /**
+   * 确认当前配置（清除备份）
+   * 当成功放置配件后调用，表示接受当前的配置修改
+   */
+  confirmConfig(): void {
+    this.backupConfig = null;
+  }
+
   /**
    * 设置所有已放置模型的可拾取状态
    * @param pickable 是否可拾取
@@ -506,6 +555,12 @@ export class AppDropZone {
    * 清除所有放置区域（只清除网格，不清除模型）
    */
   clearZones(): void {
+    // 清除映射（不删除模型，只清空记录）
+    this.zoneModelMap.clear();
+    this.wallDivisionsMap.clear();
+    this.wallModelDivisionsMap.clear();
+
+    // 清除放置区域的 mesh
     this.placementWall.clearAll();
   }
 

src/babylonjs/AppPlacementWall.ts

@@ -39,7 +39,7 @@ export interface PlacementZoneInfo {
 
 export class AppPlacementWall {
   private scene: Scene;
-  private placementZones: PlacementZoneInfo[] = [];
+  private placementZones: Map<string, PlacementZoneInfo[]> = new Map();
   private borderLines: Mesh[] = [];
   private onZoneClickCallback?: (zoneInfo: PlacementZoneInfo) => void;
 
@@ -60,21 +60,31 @@ export class AppPlacementWall {
       borderColor = '#ffffff'
     } = config;
 
-    // 清除之前的放置区域
-    this.clearAll();
-
+    // 不再清除所有区域，只清除和更新本次传入的墙面
     const material = this.createMaterial(color, alpha);
+    const allZones: PlacementZoneInfo[] = [];
 
     walls.forEach(wall => {
+      // 先清除该墙面的旧数据（dispose 旧 mesh）
+      const oldZones = this.placementZones.get(wall.name);
+      if (oldZones) {
+        oldZones.forEach(zone => zone.mesh.dispose());
+      }
+
+      // 清除该墙面的旧边框
+      this.clearWallBorders(wall.name);
+
+      // 生成新的区域
       const zones = this.generateWallZones(wall, material, thickness);
-      this.placementZones.push(...zones);
+      this.placementZones.set(wall.name, zones);
+      allZones.push(...zones);
 
       if (showBorder) {
         this.createWallBorder(wall, borderColor);
       }
     });
 
-    return this.placementZones;
+    return allZones;
   }
 
   /**
@@ -302,23 +312,26 @@ export class AppPlacementWall {
    * 获取所有放置区域
    */
   getPlacementZones(): PlacementZoneInfo[] {
-    return this.placementZones;
+    const allZones: PlacementZoneInfo[] = [];
+    this.placementZones.forEach(zones => {
+      allZones.push(...zones);
+    });
+    return allZones;
   }
 
   /**
    * 根据墙面名称获取放置区域
    */
   getZonesByWall(wallName: string): PlacementZoneInfo[] {
-    return this.placementZones.filter(zone => zone.wallName === wallName);
+    return this.placementZones.get(wallName) || [];
   }
 
   /**
    * 根据索引获取特定放置区域
    */
   getZone(wallName: string, index: number): PlacementZoneInfo | undefined {
-    return this.placementZones.find(
-      zone => zone.wallName === wallName && zone.index === index
-    );
+    const zones = this.placementZones.get(wallName);
+    return zones?.find(zone => zone.index === index);
   }
 
   /**
@@ -331,32 +344,30 @@ export class AppPlacementWall {
   /**
    * 显示所有放置区域
    */
-  // show(): void {
-  //   this.placementZones.forEach(zone => {
-  //     zone.mesh.isVisible = true;
-  //   });
-  //   this.borderLines.forEach(line => {
-  //     line.isVisible = true;
-  //   });
-  // }
+  show(): void {
+    this.placementZones.forEach(zones => {
+      zones.forEach(zone => {
+        zone.mesh.isVisible = true;
+      });
+    });
+    this.borderLines.forEach(line => {
+      line.isVisible = true;
+    });
+  }
 
   /**
    * 只显示指定墙面的放置区域
    * @param wallName 墙面名称
    */
   showWall(wallName: string): void {
-
-    // 先隐藏所有
-    this.hide();
-
-  
-    console.log(this.placementZones, wallName);
+    // 不隐藏其他墙面，只显示指定墙面
     // 只显示指定墙面的区域
-    this.placementZones.forEach(zone => {
-      if (zone.wallName === wallName) {
+    const zones = this.placementZones.get(wallName);
+    if (zones) {
+      zones.forEach(zone => {
         zone.mesh.isVisible = true;
-      }
-    });
+      });
+    }
 
     // 显示该墙面的边框（根据名称过滤）
     this.borderLines.forEach(line => {
@@ -371,22 +382,41 @@ export class AppPlacementWall {
    * 隐藏所有放置区域
    */
   hide(): void {
-    this.placementZones.forEach(zone => {
-      zone.mesh.isVisible = false;
+    this.placementZones.forEach(zones => {
+      zones.forEach(zone => {
+        zone.mesh.isVisible = false;
+      });
     });
     this.borderLines.forEach(line => {
       line.isVisible = false;
     });
   }
 
+  /**
+   * 清除指定墙面的边框
+   */
+  private clearWallBorders(wallName: string): void {
+    const linesToRemove: Mesh[] = [];
+    this.borderLines.forEach(line => {
+      if (line.name.includes(`_${wallName}_`)) {
+        line.dispose();
+        linesToRemove.push(line);
+      }
+    });
+    // 从数组中移除已清除的边框
+    this.borderLines = this.borderLines.filter(line => !linesToRemove.includes(line));
+  }
+
   /**
    * 清除所有放置区域
    */
   clearAll(): void {
-    this.placementZones.forEach(zone => {
-      zone.mesh.dispose();
+    this.placementZones.forEach(zones => {
+      zones.forEach(zone => {
+        zone.mesh.dispose();
+      });
     });
-    this.placementZones = [];
+    this.placementZones.clear();
 
     this.borderLines.forEach(line => {
       line.dispose();

src/babylonjs/AppRay.ts

@@ -88,10 +88,10 @@ class AppRay extends Monobehiver {
         this.newPoint.set(pointerEvent.clientX, 0, pointerEvent.clientY);
         const distance = Vector3.Distance(this.oldPoint, this.newPoint);
 
-        // 如果是长按后松手，隐藏分割区域
+        // 如果是长按后松手，隐藏分割区域，并回退配置
         if (this.isLongPress) {
           console.log('[长按] 松手，隐藏分割区域');
-          this.mainApp.appDropZone.hide();
+          this.mainApp.appDropZone.hide(true);
         }
 
         // 只有在没有移动且不是长按的情况下才处理单击
@@ -249,8 +249,8 @@ class AppRay extends Monobehiver {
       this.mainApp.appPositionGizmo.detach();
       this.mainApp.appDomTo3D.hideAll();
 
-      // 隐藏放置区域
-      this.mainApp.appDropZone?.hide();
+      // 隐藏放置区域，并回退到备份配置
+      this.mainApp.appDropZone?.hide(true);
     }
   }
 

src/kernel/Adapter.ts

@@ -385,6 +385,12 @@ export class KernelAdapter {
     hide: (): void => {
       this.mainApp.appDropZone.hide();
     },
+    /**
+     * 只显示指定墙面的放置区域
+     */
+    showWall: (wallName: string): void => {
+      this.mainApp.appDropZone.showWall(wallName);
+    },
     /**
      * 清除所有放置区域（只清除网格，不清除模型）
      */