1
This commit is contained in:
233
examples/drop-zone-usage.ts
Normal file
233
examples/drop-zone-usage.ts
Normal file
@ -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();
|
||||
}
|
||||
215
examples/placement-wall-example.ts
Normal file
215
examples/placement-wall-example.ts
Normal file
@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user