zhengte.babylonjs-sdk/examples/placement-wall-example.ts

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