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(); }