1
This commit is contained in:
373
docs/adapter-dropzone-api.md
Normal file
373
docs/adapter-dropzone-api.md
Normal file
@ -0,0 +1,373 @@
|
||||
# 新的 Adapter API 使用指南
|
||||
|
||||
## 放置区域 API 更新
|
||||
|
||||
### 旧的调用方式（已废弃）
|
||||
|
||||
```javascript
|
||||
// 旧方式：基于模型包围盒
|
||||
kernel.dropZone.generate({
|
||||
modelName: "框架",
|
||||
divisions: 4,
|
||||
color: "#21c7ff",
|
||||
alpha: 0.3
|
||||
});
|
||||
|
||||
kernel.dropZone.show("框架");
|
||||
kernel.dropZone.hide("框架");
|
||||
kernel.dropZone.clear("框架");
|
||||
```
|
||||
|
||||
### 新的调用方式
|
||||
|
||||
```javascript
|
||||
// 新方式：直接定义墙面坐标
|
||||
kernel.dropZone.generate({
|
||||
walls: [
|
||||
{
|
||||
name: 'front',
|
||||
startPoint: [-50, 0, -50], // [x, y, z]
|
||||
endPoint: [50, 0, -50],
|
||||
height: 30,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: [50, 0, 50],
|
||||
endPoint: [-50, 0, 50],
|
||||
height: 30,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'left',
|
||||
startPoint: [-50, 0, 50],
|
||||
endPoint: [-50, 0, -50],
|
||||
height: 30,
|
||||
divisions: 4
|
||||
},
|
||||
{
|
||||
name: 'right',
|
||||
startPoint: [50, 0, -50],
|
||||
endPoint: [50, 0, 50],
|
||||
height: 30,
|
||||
divisions: 4
|
||||
}
|
||||
],
|
||||
color: "#21c7ff",
|
||||
alpha: 0.3,
|
||||
thickness: 2,
|
||||
showBorder: true,
|
||||
borderColor: "#ffffff"
|
||||
});
|
||||
|
||||
// 显示/隐藏特定墙面
|
||||
kernel.dropZone.show('front');
|
||||
kernel.dropZone.hide('front');
|
||||
|
||||
// 显示/隐藏所有
|
||||
kernel.dropZone.showAll();
|
||||
kernel.dropZone.hideAll();
|
||||
|
||||
// 清除所有
|
||||
kernel.dropZone.clearAll();
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 1. 创建矩形放置区域
|
||||
|
||||
```javascript
|
||||
// 定义一个 100x100 的矩形区域
|
||||
const zones = kernel.dropZone.generate({
|
||||
walls: [
|
||||
{
|
||||
name: 'front',
|
||||
startPoint: [-50, 0, -50],
|
||||
endPoint: [50, 0, -50],
|
||||
height: 30,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: [50, 0, 50],
|
||||
endPoint: [-50, 0, 50],
|
||||
height: 30,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'left',
|
||||
startPoint: [-50, 0, 50],
|
||||
endPoint: [-50, 0, -50],
|
||||
height: 30,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'right',
|
||||
startPoint: [50, 0, -50],
|
||||
endPoint: [50, 0, 50],
|
||||
height: 30,
|
||||
divisions: 10
|
||||
}
|
||||
],
|
||||
color: "#21c7ff",
|
||||
alpha: 0.3
|
||||
});
|
||||
|
||||
console.log(`创建了 ${zones.length} 个放置区域`);
|
||||
```
|
||||
|
||||
### 2. 创建L形放置区域
|
||||
|
||||
```javascript
|
||||
const zones = kernel.dropZone.generate({
|
||||
walls: [
|
||||
{
|
||||
name: 'wall1',
|
||||
startPoint: [0, 0, 0],
|
||||
endPoint: [100, 0, 0],
|
||||
height: 25,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'wall2',
|
||||
startPoint: [100, 0, 0],
|
||||
endPoint: [100, 0, 60],
|
||||
height: 25,
|
||||
divisions: 6
|
||||
},
|
||||
{
|
||||
name: 'wall3',
|
||||
startPoint: [100, 0, 60],
|
||||
endPoint: [40, 0, 60],
|
||||
height: 25,
|
||||
divisions: 6
|
||||
}
|
||||
],
|
||||
color: "#ff6b6b",
|
||||
alpha: 0.4
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 创建单个展示墙
|
||||
|
||||
```javascript
|
||||
const zones = kernel.dropZone.generate({
|
||||
walls: [
|
||||
{
|
||||
name: 'display',
|
||||
startPoint: [-30, 0, 0],
|
||||
endPoint: [30, 0, 0],
|
||||
height: 20,
|
||||
divisions: 6
|
||||
}
|
||||
],
|
||||
color: "#4ecdc4",
|
||||
alpha: 0.35
|
||||
});
|
||||
```
|
||||
|
||||
### 4. 获取放置区域信息
|
||||
|
||||
```javascript
|
||||
// 获取所有放置区域
|
||||
const allZones = kernel.dropZone.getAll();
|
||||
console.log('总共有', allZones.length, '个放置区域');
|
||||
|
||||
// 获取特定墙面的所有区域
|
||||
const frontZones = kernel.dropZone.getByWall('front');
|
||||
console.log('前墙有', frontZones.length, '个区域');
|
||||
|
||||
// 获取特定的某一块
|
||||
const zone = kernel.dropZone.getZone('front', 2);
|
||||
if (zone) {
|
||||
console.log('前墙第3块:', {
|
||||
center: zone.center,
|
||||
width: zone.width,
|
||||
height: zone.height,
|
||||
normal: zone.normal
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 检查位置是否在放置区域内
|
||||
|
||||
```javascript
|
||||
const result = kernel.dropZone.checkPosition([10, 15, -50]);
|
||||
|
||||
if (result.inZone) {
|
||||
console.log('在放置区域内:', {
|
||||
墙面: result.wallName,
|
||||
索引: result.index,
|
||||
中心: result.center
|
||||
});
|
||||
} else {
|
||||
console.log('不在任何放置区域内');
|
||||
}
|
||||
```
|
||||
|
||||
### 6. 显示/隐藏操作
|
||||
|
||||
```javascript
|
||||
// 显示所有放置区域
|
||||
kernel.dropZone.showAll();
|
||||
|
||||
// 隐藏所有放置区域
|
||||
kernel.dropZone.hideAll();
|
||||
|
||||
// 显示特定墙面
|
||||
kernel.dropZone.show('front');
|
||||
|
||||
// 隐藏特定墙面
|
||||
kernel.dropZone.hide('back');
|
||||
|
||||
// 清除所有放置区域
|
||||
kernel.dropZone.clearAll();
|
||||
```
|
||||
|
||||
## HTML 按钮示例
|
||||
|
||||
```html
|
||||
<!-- 生成放置区域 -->
|
||||
<button onclick="
|
||||
kernel.dropZone.generate({
|
||||
walls: [
|
||||
{
|
||||
name: 'front',
|
||||
startPoint: [-50, 0, -50],
|
||||
endPoint: [50, 0, -50],
|
||||
height: 30,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: [50, 0, 50],
|
||||
endPoint: [-50, 0, 50],
|
||||
height: 30,
|
||||
divisions: 5
|
||||
}
|
||||
],
|
||||
color: '#21c7ff',
|
||||
alpha: 0.3
|
||||
});
|
||||
">生成放置区域</button>
|
||||
|
||||
<!-- 显示所有 -->
|
||||
<button onclick="kernel.dropZone.showAll()">显示所有</button>
|
||||
|
||||
<!-- 隐藏所有 -->
|
||||
<button onclick="kernel.dropZone.hideAll()">隐藏所有</button>
|
||||
|
||||
<!-- 清除所有 -->
|
||||
<button onclick="kernel.dropZone.clearAll()">清除所有</button>
|
||||
|
||||
<!-- 显示前墙 -->
|
||||
<button onclick="kernel.dropZone.show('front')">显示前墙</button>
|
||||
|
||||
<!-- 隐藏前墙 -->
|
||||
<button onclick="kernel.dropZone.hide('front')">隐藏前墙</button>
|
||||
```
|
||||
|
||||
## API 参考
|
||||
|
||||
### `kernel.dropZone.generate(options)`
|
||||
|
||||
生成放置区域
|
||||
|
||||
**参数：**
|
||||
- `walls` - 墙面配置数组
|
||||
- `name` - 墙面名称
|
||||
- `startPoint` - 起始点坐标 `[x, y, z]`
|
||||
- `endPoint` - 结束点坐标 `[x, y, z]`
|
||||
- `height` - 墙面高度
|
||||
- `divisions` - 分割数
|
||||
- `color` - 颜色（可选，默认 `#21c7ff`）
|
||||
- `alpha` - 透明度（可选，默认 `0.3`）
|
||||
- `thickness` - 厚度（可选，默认 `2`）
|
||||
- `showBorder` - 是否显示边框（可选，默认 `false`）
|
||||
- `borderColor` - 边框颜色（可选，默认 `#ffffff`）
|
||||
|
||||
**返回：** 放置区域信息数组
|
||||
|
||||
### `kernel.dropZone.showAll()`
|
||||
|
||||
显示所有放置区域
|
||||
|
||||
### `kernel.dropZone.hideAll()`
|
||||
|
||||
隐藏所有放置区域
|
||||
|
||||
### `kernel.dropZone.show(wallName)`
|
||||
|
||||
显示指定墙面的放置区域
|
||||
|
||||
**参数：**
|
||||
- `wallName` - 墙面名称
|
||||
|
||||
### `kernel.dropZone.hide(wallName)`
|
||||
|
||||
隐藏指定墙面的放置区域
|
||||
|
||||
**参数：**
|
||||
- `wallName` - 墙面名称
|
||||
|
||||
### `kernel.dropZone.clearAll()`
|
||||
|
||||
清除所有放置区域
|
||||
|
||||
### `kernel.dropZone.getAll()`
|
||||
|
||||
获取所有放置区域信息
|
||||
|
||||
**返回：** 放置区域信息数组
|
||||
|
||||
### `kernel.dropZone.getByWall(wallName)`
|
||||
|
||||
获取指定墙面的所有放置区域
|
||||
|
||||
**参数：**
|
||||
- `wallName` - 墙面名称
|
||||
|
||||
**返回：** 放置区域信息数组
|
||||
|
||||
### `kernel.dropZone.getZone(wallName, index)`
|
||||
|
||||
获取特定的放置区域
|
||||
|
||||
**参数：**
|
||||
- `wallName` - 墙面名称
|
||||
- `index` - 区域索引
|
||||
|
||||
**返回：** 放置区域信息对象
|
||||
|
||||
### `kernel.dropZone.checkPosition(position)`
|
||||
|
||||
检查位置是否在放置区域内
|
||||
|
||||
**参数：**
|
||||
- `position` - 位置坐标 `[x, y, z]`
|
||||
|
||||
**返回：** 检查结果对象
|
||||
```javascript
|
||||
{
|
||||
inZone: boolean, // 是否在区域内
|
||||
zone: object, // 区域信息（如果在区域内）
|
||||
wallName: string, // 墙面名称
|
||||
index: number, // 区域索引
|
||||
center: Vector3 // 中心点坐标
|
||||
}
|
||||
```
|
||||
|
||||
## 迁移注意事项
|
||||
|
||||
1. **不再依赖模型名称** - 新API使用墙面名称而不是模型名称
|
||||
2. **坐标需要手动指定** - 不再自动计算包围盒，需要明确指定每个墙面的坐标
|
||||
3. **更灵活的分割** - 每个墙面可以有不同的分割数
|
||||
4. **支持任意形状** - 可以创建L形、U形等不规则形状
|
||||
|
||||
## 优势
|
||||
|
||||
- ✅ 精确控制每个墙面的位置
|
||||
- ✅ 每个墙面可以独立配置
|
||||
- ✅ 支持任意数量的墙面
|
||||
- ✅ 可以创建不规则形状
|
||||
- ✅ 不依赖模型，更灵活
|
||||
407
docs/placement-area-migration.md
Normal file
407
docs/placement-area-migration.md
Normal file
@ -0,0 +1,407 @@
|
||||
# 放置区域 API 迁移指南
|
||||
|
||||
## 概述
|
||||
|
||||
新的放置区域系统使用**参数化墙面定义**替代了旧的**包围盒自动生成**方案，提供更灵活、更精确的控制。
|
||||
|
||||
---
|
||||
|
||||
## 主要变化
|
||||
|
||||
### 旧方案的问题
|
||||
- ❌ 依赖模型包围盒自动计算
|
||||
- ❌ 只能生成固定的矩形四周
|
||||
- ❌ 无法适应不规则形状
|
||||
- ❌ 所有墙面必须使用相同的分割数
|
||||
|
||||
### 新方案的优势
|
||||
- ✅ 直接定义每个墙面的起始和结束坐标
|
||||
- ✅ 每个墙面可以有独立的分割数
|
||||
- ✅ 支持任意数量的墙面（1个、4个、N个）
|
||||
- ✅ 可以创建不规则形状（L形、U形等）
|
||||
- ✅ 不依赖模型，坐标完全可控
|
||||
|
||||
---
|
||||
|
||||
## API 对比
|
||||
|
||||
### 旧 API（已废弃）
|
||||
|
||||
```typescript
|
||||
import { AppDropZone } from './AppDropZone';
|
||||
|
||||
const appDropZone = new AppDropZone(scene);
|
||||
|
||||
// 旧的配置方式
|
||||
const zones = appDropZone.generateDropZones({
|
||||
modelName: 'myModel', // 依赖模型名称
|
||||
divisions: 5, // 所有边使用相同分割数
|
||||
color: '#21c7ff',
|
||||
alpha: 0.3,
|
||||
thickness: 2,
|
||||
offset: 5, // 距离模型的偏移
|
||||
scale: 1.0 // 缩放比例
|
||||
});
|
||||
|
||||
// 返回 Mesh[]
|
||||
```
|
||||
|
||||
### 新 API（推荐）
|
||||
|
||||
```typescript
|
||||
import { AppDropZone } from './AppDropZone';
|
||||
|
||||
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 // 这个墙面的分割数
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: new Vector3(50, 0, 50),
|
||||
endPoint: new Vector3(-50, 0, 50),
|
||||
height: 30,
|
||||
divisions: 5
|
||||
},
|
||||
// ... 更多墙面
|
||||
],
|
||||
color: '#21c7ff',
|
||||
alpha: 0.3,
|
||||
thickness: 2,
|
||||
showBorder: true, // 是否显示边框
|
||||
borderColor: '#ffffff' // 边框颜色
|
||||
});
|
||||
|
||||
// 返回 PlacementZoneInfo[]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 迁移步骤
|
||||
|
||||
### 步骤 1：确定墙面坐标
|
||||
|
||||
如果你之前使用模型包围盒，需要先获取模型的边界坐标：
|
||||
|
||||
```typescript
|
||||
// 获取模型的包围盒坐标
|
||||
function getModelBounds(scene: Scene, modelName: string) {
|
||||
const mesh = scene.getMeshByName(modelName);
|
||||
if (!mesh) return null;
|
||||
|
||||
mesh.computeWorldMatrix(true);
|
||||
const boundingInfo = mesh.getBoundingInfo();
|
||||
const min = boundingInfo.boundingBox.minimumWorld;
|
||||
const max = boundingInfo.boundingBox.maximumWorld;
|
||||
|
||||
return {
|
||||
minX: min.x,
|
||||
maxX: max.x,
|
||||
minY: min.y,
|
||||
maxY: max.y,
|
||||
minZ: min.z,
|
||||
maxZ: max.z
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 步骤 2：转换为墙面配置
|
||||
|
||||
```typescript
|
||||
const bounds = getModelBounds(scene, 'myModel');
|
||||
if (!bounds) return;
|
||||
|
||||
const { minX, maxX, minY, maxY, minZ, maxZ } = bounds;
|
||||
const height = maxY - minY;
|
||||
|
||||
// 转换为新的墙面配置
|
||||
const walls = [
|
||||
{
|
||||
name: 'front',
|
||||
startPoint: new Vector3(minX, minY, minZ),
|
||||
endPoint: new Vector3(maxX, minY, minZ),
|
||||
height: height,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: new Vector3(maxX, minY, maxZ),
|
||||
endPoint: new Vector3(minX, minY, maxZ),
|
||||
height: height,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'left',
|
||||
startPoint: new Vector3(minX, minY, maxZ),
|
||||
endPoint: new Vector3(minX, minY, minZ),
|
||||
height: height,
|
||||
divisions: 5
|
||||
},
|
||||
{
|
||||
name: 'right',
|
||||
startPoint: new Vector3(maxX, minY, minZ),
|
||||
endPoint: new Vector3(maxX, minY, maxZ),
|
||||
height: height,
|
||||
divisions: 5
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
### 步骤 3：应用偏移（如果需要）
|
||||
|
||||
如果旧代码中使用了 `offset` 参数，需要手动调整坐标：
|
||||
|
||||
```typescript
|
||||
const offset = 5;
|
||||
|
||||
// 前墙向外偏移
|
||||
walls[0].startPoint.z -= offset;
|
||||
walls[0].endPoint.z -= offset;
|
||||
|
||||
// 后墙向外偏移
|
||||
walls[1].startPoint.z += offset;
|
||||
walls[1].endPoint.z += offset;
|
||||
|
||||
// 左墙向外偏移
|
||||
walls[2].startPoint.x -= offset;
|
||||
walls[2].endPoint.x -= offset;
|
||||
|
||||
// 右墙向外偏移
|
||||
walls[3].startPoint.x += offset;
|
||||
walls[3].endPoint.x += offset;
|
||||
```
|
||||
|
||||
### 步骤 4：应用缩放（如果需要）
|
||||
|
||||
如果旧代码中使用了 `scale` 参数，需要调整坐标：
|
||||
|
||||
```typescript
|
||||
const scale = 0.8; // 缩放到80%
|
||||
|
||||
const centerX = (minX + maxX) / 2;
|
||||
const centerZ = (minZ + maxZ) / 2;
|
||||
|
||||
const scaledWidth = (maxX - minX) * scale;
|
||||
const scaledDepth = (maxZ - minZ) * scale;
|
||||
|
||||
const scaledMinX = centerX - scaledWidth / 2;
|
||||
const scaledMaxX = centerX + scaledWidth / 2;
|
||||
const scaledMinZ = centerZ - scaledDepth / 2;
|
||||
const scaledMaxZ = centerZ + scaledDepth / 2;
|
||||
|
||||
// 使用缩放后的坐标
|
||||
walls[0].startPoint = new Vector3(scaledMinX, minY, scaledMinZ);
|
||||
walls[0].endPoint = new Vector3(scaledMaxX, minY, scaledMinZ);
|
||||
// ... 其他墙面类似
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 完整迁移示例
|
||||
|
||||
### 旧代码
|
||||
|
||||
```typescript
|
||||
const appDropZone = new AppDropZone(scene);
|
||||
|
||||
const zones = appDropZone.generateDropZones({
|
||||
modelName: 'warehouse',
|
||||
divisions: 10,
|
||||
color: '#21c7ff',
|
||||
alpha: 0.3,
|
||||
thickness: 2,
|
||||
offset: 5,
|
||||
scale: 0.9
|
||||
});
|
||||
```
|
||||
|
||||
### 新代码
|
||||
|
||||
```typescript
|
||||
const appDropZone = new AppDropZone(scene);
|
||||
|
||||
// 1. 获取模型边界
|
||||
const bounds = getModelBounds(scene, 'warehouse');
|
||||
if (!bounds) return;
|
||||
|
||||
const { minX, maxX, minY, maxY, minZ, maxZ } = bounds;
|
||||
|
||||
// 2. 应用缩放
|
||||
const scale = 0.9;
|
||||
const centerX = (minX + maxX) / 2;
|
||||
const centerZ = (minZ + maxZ) / 2;
|
||||
const width = (maxX - minX) * scale;
|
||||
const depth = (maxZ - minZ) * scale;
|
||||
const height = maxY - minY;
|
||||
|
||||
const scaledMinX = centerX - width / 2;
|
||||
const scaledMaxX = centerX + width / 2;
|
||||
const scaledMinZ = centerZ - depth / 2;
|
||||
const scaledMaxZ = centerZ + depth / 2;
|
||||
|
||||
// 3. 应用偏移
|
||||
const offset = 5;
|
||||
|
||||
// 4. 生成放置区域
|
||||
const zones = appDropZone.generateDropZones({
|
||||
walls: [
|
||||
{
|
||||
name: 'front',
|
||||
startPoint: new Vector3(scaledMinX, minY, scaledMinZ - offset),
|
||||
endPoint: new Vector3(scaledMaxX, minY, scaledMinZ - offset),
|
||||
height: height,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
startPoint: new Vector3(scaledMaxX, minY, scaledMaxZ + offset),
|
||||
endPoint: new Vector3(scaledMinX, minY, scaledMaxZ + offset),
|
||||
height: height,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'left',
|
||||
startPoint: new Vector3(scaledMinX - offset, minY, scaledMaxZ),
|
||||
endPoint: new Vector3(scaledMinX - offset, minY, scaledMinZ),
|
||||
height: height,
|
||||
divisions: 10
|
||||
},
|
||||
{
|
||||
name: 'right',
|
||||
startPoint: new Vector3(scaledMaxX + offset, minY, scaledMinZ),
|
||||
endPoint: new Vector3(scaledMaxX + offset, minY, scaledMaxZ),
|
||||
height: height,
|
||||
divisions: 10
|
||||
}
|
||||
],
|
||||
color: '#21c7ff',
|
||||
alpha: 0.3,
|
||||
thickness: 2,
|
||||
showBorder: true
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 新功能示例
|
||||
|
||||
### 1. 不同墙面使用不同分割数
|
||||
|
||||
```typescript
|
||||
const zones = appDropZone.generateDropZones({
|
||||
walls: [
|
||||
{ name: 'front', ..., divisions: 10 }, // 前墙10块
|
||||
{ name: 'back', ..., divisions: 10 }, // 后墙10块
|
||||
{ name: 'left', ..., divisions: 5 }, // 左墙5块
|
||||
{ name: 'right', ..., divisions: 5 } // 右墙5块
|
||||
],
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 创建L形区域
|
||||
|
||||
```typescript
|
||||
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
|
||||
}
|
||||
],
|
||||
color: '#ff6b6b',
|
||||
alpha: 0.4
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 只创建单个墙面
|
||||
|
||||
```typescript
|
||||
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
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 获取放置区域信息
|
||||
|
||||
新API返回更详细的区域信息：
|
||||
|
||||
```typescript
|
||||
const zones = appDropZone.generateDropZones(config);
|
||||
|
||||
// 每个zone包含：
|
||||
zones.forEach(zone => {
|
||||
console.log({
|
||||
mesh: zone.mesh, // Babylon.js Mesh对象
|
||||
wallName: zone.wallName, // 所属墙面名称
|
||||
index: zone.index, // 在该墙面上的索引
|
||||
center: zone.center, // 中心点坐标
|
||||
width: zone.width, // 宽度
|
||||
height: zone.height, // 高度
|
||||
normal: zone.normal // 法线方向
|
||||
});
|
||||
});
|
||||
|
||||
// 获取特定墙面的所有区域
|
||||
const frontZones = appDropZone.getZonesByWall('front');
|
||||
|
||||
// 获取特定的某一块
|
||||
const zone = appDropZone.getZone('front', 2);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 我必须迁移吗？
|
||||
A: 旧的API已经被完全移除，必须迁移到新API。
|
||||
|
||||
### Q: 如何快速迁移？
|
||||
A: 使用上面的 `getModelBounds` 函数获取模型边界，然后转换为墙面配置。
|
||||
|
||||
### Q: 新API性能如何？
|
||||
A: 新API性能更好，因为不需要计算包围盒，直接使用预定义的坐标。
|
||||
|
||||
### Q: 可以动态调整墙面吗？
|
||||
A: 可以，调用 `clearAll()` 清除旧的，然后用新坐标重新生成。
|
||||
|
||||
---
|
||||
|
||||
## 总结
|
||||
|
||||
新的放置区域系统提供了：
|
||||
- ✅ 更精确的控制
|
||||
- ✅ 更灵活的配置
|
||||
- ✅ 更好的性能
|
||||
- ✅ 更清晰的API
|
||||
|
||||
虽然迁移需要一些工作，但新系统的灵活性和可控性值得这个投入！
|
||||
Reference in New Issue
Block a user