1

examples/placement-wall-example.ts

@@ -0,0 +1,215 @@
+import { Scene, Vector3 } from '@babylonjs/core';
+import { AppPlacementWall } from '../src/babylonjs/AppPlacementWall';
+
+/**
+ * 使用示例：创建一个矩形围栏的放置区域
+ */
+export function createRectangularWalls(scene: Scene) {
+  const placementWall = new AppPlacementWall(scene);
+
+  // 定义一个矩形区域的四个墙面
+  const config = {
+    walls: [
+      {
+        name: 'front',
+        startPoint: new Vector3(-50, 0, -50),  // 前墙左下角
+        endPoint: new Vector3(50, 0, -50),     // 前墙右下角
+        height: 30,
+        divisions: 5  // 前墙分成5块
+      },
+      {
+        name: 'back',
+        startPoint: new Vector3(50, 0, 50),    // 后墙右下角
+        endPoint: new Vector3(-50, 0, 50),     // 后墙左下角
+        height: 30,
+        divisions: 5  // 后墙分成5块
+      },
+      {
+        name: 'left',
+        startPoint: new Vector3(-50, 0, 50),   // 左墙后下角
+        endPoint: new Vector3(-50, 0, -50),    // 左墙前下角
+        height: 30,
+        divisions: 4  // 左墙分成4块
+      },
+      {
+        name: 'right',
+        startPoint: new Vector3(50, 0, -50),   // 右墙前下角
+        endPoint: new Vector3(50, 0, 50),      // 右墙后下角
+        height: 30,
+        divisions: 4  // 右墙分成4块
+      }
+    ],
+    color: '#21c7ff',
+    alpha: 0.3,
+    thickness: 2,
+    showBorder: true,
+    borderColor: '#ffffff'
+  };
+
+  const zones = placementWall.generatePlacementAreas(config);
+  console.log(`创建了 ${zones.length} 个放置区域`);
+
+  return placementWall;
+}
+
+/**
+ * 使用示例：创建不规则形状的墙面
+ */
+export function createIrregularWalls(scene: Scene) {
+  const placementWall = new AppPlacementWall(scene);
+
+  // 定义一个L形区域
+  const config = {
+    walls: [
+      {
+        name: 'wall1',
+        startPoint: new Vector3(0, 0, 0),
+        endPoint: new Vector3(100, 0, 0),
+        height: 25,
+        divisions: 10
+      },
+      {
+        name: 'wall2',
+        startPoint: new Vector3(100, 0, 0),
+        endPoint: new Vector3(100, 0, 60),
+        height: 25,
+        divisions: 6
+      },
+      {
+        name: 'wall3',
+        startPoint: new Vector3(100, 0, 60),
+        endPoint: new Vector3(40, 0, 60),
+        height: 25,
+        divisions: 6
+      }
+    ],
+    color: '#ff6b6b',
+    alpha: 0.4,
+    showBorder: true
+  };
+
+  return placementWall.generatePlacementAreas(config);
+}
+
+/**
+ * 使用示例：创建单个墙面
+ */
+export function createSingleWall(scene: Scene) {
+  const placementWall = new AppPlacementWall(scene);
+
+  const config = {
+    walls: [
+      {
+        name: 'display_wall',
+        startPoint: new Vector3(-30, 0, 0),
+        endPoint: new Vector3(30, 0, 0),
+        height: 20,
+        divisions: 6  // 分成6个展示区域
+      }
+    ],
+    color: '#4ecdc4',
+    alpha: 0.35,
+    thickness: 1.5
+  };
+
+  return placementWall.generatePlacementAreas(config);
+}
+
+/**
+ * 使用示例：获取特定放置区域并操作
+ */
+export function interactWithZones(placementWall: AppPlacementWall) {
+  // 获取所有放置区域
+  const allZones = placementWall.getPlacementZones();
+  console.log('总共有', allZones.length, '个放置区域');
+
+  // 获取特定墙面的所有区域
+  const frontZones = placementWall.getZonesByWall('front');
+  console.log('前墙有', frontZones.length, '个区域');
+
+  // 获取特定的某一块
+  const zone = placementWall.getZone('front', 2);
+  if (zone) {
+    console.log('前墙第3块的中心点:', zone.center);
+    console.log('尺寸:', zone.width, 'x', zone.height);
+    console.log('法线方向:', zone.normal);
+
+    // 可以对这个区域做特殊处理
+    // 比如改变颜色、添加标签等
+  }
+
+  // 隐藏所有区域
+  // placementWall.hide();
+
+  // 显示所有区域
+  // placementWall.show();
+}
+
+/**
+ * 使用示例：根据实际场景坐标创建
+ * 假设你有一个仓库模型，想在其四周创建货架放置区域
+ */
+export function createWarehouseShelfAreas(scene: Scene) {
+  const placementWall = new AppPlacementWall(scene);
+
+  // 假设仓库的实际坐标
+  const warehouseCorners = {
+    frontLeft: new Vector3(-100, 0, -80),
+    frontRight: new Vector3(100, 0, -80),
+    backLeft: new Vector3(-100, 0, 80),
+    backRight: new Vector3(100, 0, 80)
+  };
+
+  const shelfHeight = 40;
+
+  const config = {
+    walls: [
+      // 前墙 - 分成20个货架位
+      {
+        name: 'front_shelf',
+        startPoint: warehouseCorners.frontLeft,
+        endPoint: warehouseCorners.frontRight,
+        height: shelfHeight,
+        divisions: 20
+      },
+      // 后墙 - 分成20个货架位
+      {
+        name: 'back_shelf',
+        startPoint: warehouseCorners.backRight,
+        endPoint: warehouseCorners.backLeft,
+        height: shelfHeight,
+        divisions: 20
+      },
+      // 左墙 - 分成16个货架位
+      {
+        name: 'left_shelf',
+        startPoint: warehouseCorners.backLeft,
+        endPoint: warehouseCorners.frontLeft,
+        height: shelfHeight,
+        divisions: 16
+      },
+      // 右墙 - 分成16个货架位
+      {
+        name: 'right_shelf',
+        startPoint: warehouseCorners.frontRight,
+        endPoint: warehouseCorners.backRight,
+        height: shelfHeight,
+        divisions: 16
+      }
+    ],
+    color: '#ffd93d',
+    alpha: 0.25,
+    thickness: 3,
+    showBorder: true,
+    borderColor: '#ff6b35'
+  };
+
+  const zones = placementWall.generatePlacementAreas(config);
+
+  // 为每个货架区域添加编号
+  zones.forEach((zone, index) => {
+    console.log(`货架 ${zone.wallName}-${zone.index}: 位置 ${zone.center}`);
+  });
+
+  return placementWall;
+}