1

index.html

@@ -507,12 +507,13 @@
                 const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${currentText}`);
                 const result = await response.json();
                 if (result.code === 200) {
-                    const { divisions, enable_placement_zone } = result.data;
+                    console.log(result.data);
+                    sku = currentText;
+                    const { placement_zone, enable_placement_zone } = result.data;
                     // const {position_x, position_y, position_z} = data;
-                    if (enable_placement_zone) {
-                        sku = currentText;
-                        await placementWall(divisions);
-                        //await initPlacementZoneConfig(divisions);
+                    if (enable_placement_zone && placement_zone != undefined) {
+                        //  await initPlacementZoneConfig(placement_zone);
+                        await placementWall();
                     }
                 }
 
@@ -795,8 +796,8 @@
         });
 
         // 初始化放置区域配置数据（只需设置一次）
-        const initPlacementZoneConfig = (divisions) => {
-
+        const initPlacementZoneConfig = (placement_zone) => {
+            const { alpha, border_color, color, show_border, thickness, walls } = placement_zone
             // 只清除旧的放置区域网格，不清除模型
             kernel.dropZone.clearZones();
             // 调整 baseY 来控制整体高度（正数向上，负数向下）
@@ -807,64 +808,32 @@
             const wallOffset = -0.07;  // 修改这个值来调整墙面偏移
 
             kernel.dropZone.setData({
-                walls: [
-                    {
-                        name: 'front',
-                        startPoint: [-1.82, baseY, -1.37],
-                        endPoint: [1.87, baseY, -1.37],
-                        height: height,
-                        divisions: divisions,
-                        offset: wallOffset  // 向外或向内偏移
-                    },
-                    {
-                        name: 'back',
-                        startPoint: [1.87, baseY, 1.4],
-                        endPoint: [-1.82, baseY, 1.4],
-                        height: height,
-                        divisions: divisions,
-                        offset: wallOffset
-                    },
-                    {
-                        name: 'left',
-                        startPoint: [-1.82, baseY, 1.4],
-                        endPoint: [-1.82, baseY, -1.37],
-                        height: height,
-                        divisions: divisions,
-                        offset: wallOffset
-                    },
-                    {
-                        name: 'right',
-                        startPoint: [1.82, baseY, -1.37],
-                        endPoint: [1.82, baseY, 1.4],
-                        height: height,
-                        divisions: divisions,
-                        offset: wallOffset
-                    }
-                ],
-                color: "#21c7ff",
-                alpha: 0.3,
-                thickness: 2,
-                showBorder: true,
-                borderColor: "#ffffff"
+
+                color: color,
+                alpha: +alpha,
+                thickness: thickness,
+                showBorder: !show_border,
+                borderColor: border_color,
+                walls: walls
             });
 
-            kernel.dropZone.generateDropZones(divisions);
+            kernel.dropZone.generateDropZones();
             // 显示放置区域
             kernel.dropZone.show();
             dropZoneVisible = true;
         };
 
 
-        const placementWall = (divisions) => {
+        const placementWall = () => {
             // 只清除旧的放置区域网格，不清除模型
             kernel.dropZone.clearZones();
 
-            // 如果传入了 divisions，使用统一分割数；否则使用每个墙面自己的分割数
-            if (divisions !== undefined) {
-                kernel.dropZone.generateDropZones(divisions);
-            } else {
-                kernel.dropZone.generateDropZones();
-            }
+            kernel.dropZone.updateDivisions({
+                "前": 4,
+                "后": 1,
+                "左": 1,
+                "右": 1
+            });
 
             // 显示放置区域
             kernel.dropZone.show();

index.js

@@ -32,8 +32,16 @@ const data = await response.json()
 const models = data.data  // 这就是模型列表
 
 models.forEach(model => {
-    console.log(model);
-    // kernel.dropZone.setData(model.placement_zone);
+    const { alpha, border_color, color, show_border, thickness, walls } = model.placement_zone
+    kernel.dropZone.setData({
+
+        color: color,
+        alpha: +alpha,
+        thickness: thickness,
+        showBorder: !show_border,
+        borderColor: border_color,
+        walls: walls
+    });
     kernel.model.add({
         modelId: model.id,
         modelUrl: model.file_url,

src/babylonjs/AppDropZone.ts

@@ -54,10 +54,9 @@ export class AppDropZone {
 
   /**
    * 生成放置区域
-   * @param divisions 可选的统一分割数量，如果不传则使用每个墙面自己的 divisions
    * @param config 配置参数（可选，如果不传则使用 setData 设置的数据）
    */
-  generateDropZones(divisions?: number, config?: DropZoneConfig): PlacementZoneInfo[] {
+  generateDropZones(config?: DropZoneConfig): PlacementZoneInfo[] {
     const finalConfig = config || this.dropZoneConfig;
 
     if (!finalConfig) {
@@ -65,13 +64,12 @@ export class AppDropZone {
       return [];
     }
 
-    // 为墙面设置分割数
+    // 为墙面设置分割数（使用每个墙面自己的 divisions，默认为 1）
     const configWithDivisions: DropZoneConfig = {
       ...finalConfig,  // 保留所有配置属性（color, alpha, thickness, showBorder, borderColor）
       walls: finalConfig.walls.map(wall => ({
         ...wall,
-        // 如果传入了统一的 divisions，使用它；否则使用墙面自己的 divisions；都没有则默认为 1
-        divisions: divisions !== undefined ? divisions : (wall.divisions || 1)
+        divisions: wall.divisions || 1
       }))
     };
 
@@ -83,6 +81,34 @@ export class AppDropZone {
     return this.placementWall.generatePlacementAreas(configWithDivisions);
   }
 
+  /**
+   * 更新墙面分割数并重新生成放置区域
+   * @param divisions 分割数对象，key 为墙面名称，value 为分割数，例如 { "前": 4, "后": 1, "左": 1, "右": 1 }
+   */
+  updateDivisions(divisions: Record<string, number>): PlacementZoneInfo[] {
+    if (!this.dropZoneConfig) {
+      console.error('未设置放置区域配置数据，请先调用 setData');
+      return [];
+    }
+
+    // 更新配置中的墙面分割数
+    this.dropZoneConfig.walls = this.dropZoneConfig.walls.map(wall => ({
+      ...wall,
+      divisions: divisions[wall.name] !== undefined ? divisions[wall.name] : wall.divisions || 1
+    }));
+
+    // 清除旧的放置区域网格（不清除模型）
+    this.clearZones();
+
+    // 重新生成放置区域
+    const zones = this.generateDropZones();
+
+    // 显示放置区域
+    this.show();
+
+    return zones;
+  }
+
   /**
    * 卸载指定墙面的所有模型（内部方法）
    */

src/kernel/Adapter.ts

@@ -316,15 +316,21 @@ export class KernelAdapter {
     },
     /**
      * 生成放置区域（使用已存储的配置数据）
-     * @param divisions 可选的统一分割数量，如果不传则使用每个墙面自己的 divisions
      * @example
      * // 使用每个墙面自己的分割数
      * kernel.dropZone.generateDropZones();
-     * // 或者统一设置所有墙面的分割数
-     * kernel.dropZone.generateDropZones(5);
      */
-    generateDropZones: (divisions?: number): any[] => {
-      return this.mainApp.appDropZone.generateDropZones(divisions);
+    generateDropZones: (): any[] => {
+      return this.mainApp.appDropZone.generateDropZones();
+    },
+    /**
+     * 更新墙面分割数并重新生成放置区域
+     * @param divisions 分割数对象，key 为墙面名称，value 为分割数
+     * @example
+     * kernel.dropZone.updateDivisions({ "前": 4, "后": 1, "左": 1, "右": 1 });
+     */
+    updateDivisions: (divisions: Record<string, number>): any[] => {
+      return this.mainApp.appDropZone.updateDivisions(divisions);
     },
     /**
      * 显示所有放置区域