1

examples/drop-zone-usage.ts

@@ -0,0 +1,233 @@
+import { Scene, Vector3 } from '@babylonjs/core';
+import { AppDropZone } from '../src/babylonjs/AppDropZone';
+
+/**
+ * 使用示例：创建矩形放置区域
+ *
+ * 旧的API（已废弃）：
+ * appDropZone.generateDropZones({
+ *   modelName: 'myModel',
+ *   divisions: 5,
+ *   color: '#21c7ff',
+ *   alpha: 0.3
+ * });
+ *
+ * 新的API：直接定义墙面坐标和分割数
+ */
+export function createDropZonesExample(scene: Scene) {
+  const appDropZone = new AppDropZone(scene);
+
+  // 定义一个矩形区域的四个墙面
+  const zones = appDropZone.generateDropZones({
+    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'
+  });
+
+  console.log(`创建了 ${zones.length} 个放置区域`);
+
+  // 获取特定区域
+  const frontZones = appDropZone.getZonesByWall('front');
+  console.log(`前墙有 ${frontZones.length} 个区域`);
+
+  // 获取某一块
+  const zone = appDropZone.getZone('front', 2);
+  if (zone) {
+    console.log('前墙第3块:', {
+      center: zone.center,
+      width: zone.width,
+      height: zone.height,
+      normal: zone.normal
+    });
+  }
+
+  return appDropZone;
+}
+
+/**
+ * 使用示例：创建L形放置区域
+ */
+export function createLShapeDropZones(scene: Scene) {
+  const appDropZone = new AppDropZone(scene);
+
+  const zones = appDropZone.generateDropZones({
+    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 appDropZone;
+}
+
+/**
+ * 使用示例：创建单个展示墙
+ */
+export function createDisplayWall(scene: Scene) {
+  const appDropZone = new AppDropZone(scene);
+
+  const zones = appDropZone.generateDropZones({
+    walls: [
+      {
+        name: 'display',
+        startPoint: new Vector3(-30, 0, 0),
+        endPoint: new Vector3(30, 0, 0),
+        height: 20,
+        divisions: 6
+      }
+    ],
+    color: '#4ecdc4',
+    alpha: 0.35,
+    thickness: 1.5
+  });
+
+  return appDropZone;
+}
+
+/**
+ * 使用示例：根据实际模型坐标创建
+ * 假设你已经知道模型的边界坐标
+ */
+export function createDropZonesFromModelBounds(
+  scene: Scene,
+  minX: number,
+  maxX: number,
+  minY: number,
+  maxY: number,
+  minZ: number,
+  maxZ: number,
+  divisions: number = 5
+) {
+  const appDropZone = new AppDropZone(scene);
+
+  const height = maxY - minY;
+
+  const zones = appDropZone.generateDropZones({
+    walls: [
+      // 前墙
+      {
+        name: 'front',
+        startPoint: new Vector3(minX, minY, minZ),
+        endPoint: new Vector3(maxX, minY, minZ),
+        height: height,
+        divisions: divisions
+      },
+      // 后墙
+      {
+        name: 'back',
+        startPoint: new Vector3(maxX, minY, maxZ),
+        endPoint: new Vector3(minX, minY, maxZ),
+        height: height,
+        divisions: divisions
+      },
+      // 左墙
+      {
+        name: 'left',
+        startPoint: new Vector3(minX, minY, maxZ),
+        endPoint: new Vector3(minX, minY, minZ),
+        height: height,
+        divisions: divisions
+      },
+      // 右墙
+      {
+        name: 'right',
+        startPoint: new Vector3(maxX, minY, minZ),
+        endPoint: new Vector3(maxX, minY, maxZ),
+        height: height,
+        divisions: divisions
+      }
+    ],
+    color: '#21c7ff',
+    alpha: 0.3,
+    thickness: 2,
+    showBorder: true
+  });
+
+  return appDropZone;
+}
+
+/**
+ * 使用示例：操作放置区域
+ */
+export function manipulateDropZones(appDropZone: AppDropZone) {
+  // 获取所有区域
+  const allZones = appDropZone.getPlacementZones();
+  console.log('总共有', allZones.length, '个放置区域');
+
+  // 遍历所有区域
+  allZones.forEach((zone, index) => {
+    console.log(`区域 ${index}:`, {
+      墙面: zone.wallName,
+      索引: zone.index,
+      中心: zone.center,
+      尺寸: `${zone.width} x ${zone.height}`,
+      法线: zone.normal
+    });
+  });
+
+  // 隐藏所有区域
+  appDropZone.hide();
+
+  // 显示所有区域
+  appDropZone.show();
+
+  // 清除所有区域
+  // appDropZone.clearAll();
+
+  // 销毁
+  // appDropZone.dispose();
+}