zhengte.babylonjs-sdk/examples/drop-zone-usage.ts

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