diff --git a/index.html b/index.html
index de80c03..cfb2019 100644
--- a/index.html
+++ b/index.html
@@ -507,12 +507,13 @@
const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${currentText}`);
const result = await response.json();
if (result.code === 200) {
- const { divisions, enable_placement_zone } = result.data;
+ console.log(result.data);
+ sku = currentText;
+ const { placement_zone, enable_placement_zone } = result.data;
// const {position_x, position_y, position_z} = data;
- if (enable_placement_zone) {
- sku = currentText;
- await placementWall(divisions);
- //await initPlacementZoneConfig(divisions);
+ if (enable_placement_zone && placement_zone != undefined) {
+ // await initPlacementZoneConfig(placement_zone);
+ await placementWall();
}
}
@@ -795,8 +796,8 @@
});
// 初始化放置区域配置数据（只需设置一次）
- const initPlacementZoneConfig = (divisions) => {
-
+ const initPlacementZoneConfig = (placement_zone) => {
+ const { alpha, border_color, color, show_border, thickness, walls } = placement_zone
// 只清除旧的放置区域网格，不清除模型
kernel.dropZone.clearZones();
// 调整 baseY 来控制整体高度（正数向上，负数向下）
@@ -807,64 +808,32 @@
const wallOffset = -0.07; // 修改这个值来调整墙面偏移
kernel.dropZone.setData({
- walls: [
- {
- name: 'front',
- startPoint: [-1.82, baseY, -1.37],
- endPoint: [1.87, baseY, -1.37],
- height: height,
- divisions: divisions,
- offset: wallOffset // 向外或向内偏移
- },
- {
- name: 'back',
- startPoint: [1.87, baseY, 1.4],
- endPoint: [-1.82, baseY, 1.4],
- height: height,
- divisions: divisions,
- offset: wallOffset
- },
- {
- name: 'left',
- startPoint: [-1.82, baseY, 1.4],
- endPoint: [-1.82, baseY, -1.37],
- height: height,
- divisions: divisions,
- offset: wallOffset
- },
- {
- name: 'right',
- startPoint: [1.82, baseY, -1.37],
- endPoint: [1.82, baseY, 1.4],
- height: height,
- divisions: divisions,
- offset: wallOffset
- }
- ],
- color: "#21c7ff",
- alpha: 0.3,
- thickness: 2,
- showBorder: true,
- borderColor: "#ffffff"
+
+ color: color,
+ alpha: +alpha,
+ thickness: thickness,
+ showBorder: !show_border,
+ borderColor: border_color,
+ walls: walls
});
- kernel.dropZone.generateDropZones(divisions);
+ kernel.dropZone.generateDropZones();
// 显示放置区域
kernel.dropZone.show();
dropZoneVisible = true;
};
- const placementWall = (divisions) => {
+ const placementWall = () => {
// 只清除旧的放置区域网格，不清除模型
kernel.dropZone.clearZones();
- // 如果传入了 divisions，使用统一分割数；否则使用每个墙面自己的分割数
- if (divisions !== undefined) {
- kernel.dropZone.generateDropZones(divisions);
- } else {
- kernel.dropZone.generateDropZones();
- }
+ kernel.dropZone.updateDivisions({
+ "前": 4,
+ "后": 1,
+ "左": 1,
+ "右": 1
+ });
// 显示放置区域
kernel.dropZone.show();
diff --git a/index.js b/index.js
index 9b95025..17e3e00 100644
--- a/index.js
+++ b/index.js
@@ -32,8 +32,16 @@ const data = await response.json()
const models = data.data // 这就是模型列表
models.forEach(model => {
- console.log(model);
- // kernel.dropZone.setData(model.placement_zone);
+ const { alpha, border_color, color, show_border, thickness, walls } = model.placement_zone
+ kernel.dropZone.setData({
+
+ color: color,
+ alpha: +alpha,
+ thickness: thickness,
+ showBorder: !show_border,
+ borderColor: border_color,
+ walls: walls
+ });
kernel.model.add({
modelId: model.id,
modelUrl: model.file_url,
diff --git a/src/babylonjs/AppDropZone.ts b/src/babylonjs/AppDropZone.ts
index 6ce8fe7..0bcc0ca 100644
--- a/src/babylonjs/AppDropZone.ts
+++ b/src/babylonjs/AppDropZone.ts
@@ -54,10 +54,9 @@ export class AppDropZone {
/**
* 生成放置区域
- * @param divisions 可选的统一分割数量，如果不传则使用每个墙面自己的 divisions
* @param config 配置参数（可选，如果不传则使用 setData 设置的数据）
*/
- generateDropZones(divisions?: number, config?: DropZoneConfig): PlacementZoneInfo[] {
+ generateDropZones(config?: DropZoneConfig): PlacementZoneInfo[] {
const finalConfig = config || this.dropZoneConfig;
if (!finalConfig) {
@@ -65,13 +64,12 @@ export class AppDropZone {
return [];
}
- // 为墙面设置分割数
+ // 为墙面设置分割数（使用每个墙面自己的 divisions，默认为 1）
const configWithDivisions: DropZoneConfig = {
...finalConfig, // 保留所有配置属性（color, alpha, thickness, showBorder, borderColor）
walls: finalConfig.walls.map(wall => ({
...wall,
- // 如果传入了统一的 divisions，使用它；否则使用墙面自己的 divisions；都没有则默认为 1
- divisions: divisions !== undefined ? divisions : (wall.divisions || 1)
+ divisions: wall.divisions || 1
}))
};
@@ -83,6 +81,34 @@ export class AppDropZone {
return this.placementWall.generatePlacementAreas(configWithDivisions);
}
+ /**
+ * 更新墙面分割数并重新生成放置区域
+ * @param divisions 分割数对象，key 为墙面名称，value 为分割数，例如 { "前": 4, "后": 1, "左": 1, "右": 1 }
+ */
+ updateDivisions(divisions: Record): PlacementZoneInfo[] {
+ if (!this.dropZoneConfig) {
+ console.error('未设置放置区域配置数据，请先调用 setData');
+ return [];
+ }
+
+ // 更新配置中的墙面分割数
+ this.dropZoneConfig.walls = this.dropZoneConfig.walls.map(wall => ({
+ ...wall,
+ divisions: divisions[wall.name] !== undefined ? divisions[wall.name] : wall.divisions || 1
+ }));
+
+ // 清除旧的放置区域网格（不清除模型）
+ this.clearZones();
+
+ // 重新生成放置区域
+ const zones = this.generateDropZones();
+
+ // 显示放置区域
+ this.show();
+
+ return zones;
+ }
+
/**
* 卸载指定墙面的所有模型（内部方法）
*/
diff --git a/src/kernel/Adapter.ts b/src/kernel/Adapter.ts
index 167b723..0e9d4ca 100644
--- a/src/kernel/Adapter.ts
+++ b/src/kernel/Adapter.ts
@@ -316,15 +316,21 @@ export class KernelAdapter {
},
/**
* 生成放置区域（使用已存储的配置数据）
- * @param divisions 可选的统一分割数量，如果不传则使用每个墙面自己的 divisions
* @example
* // 使用每个墙面自己的分割数
* kernel.dropZone.generateDropZones();
- * // 或者统一设置所有墙面的分割数
- * kernel.dropZone.generateDropZones(5);
*/
- generateDropZones: (divisions?: number): any[] => {
- return this.mainApp.appDropZone.generateDropZones(divisions);
+ generateDropZones: (): any[] => {
+ return this.mainApp.appDropZone.generateDropZones();
+ },
+ /**
+ * 更新墙面分割数并重新生成放置区域
+ * @param divisions 分割数对象，key 为墙面名称，value 为分割数
+ * @example
+ * kernel.dropZone.updateDivisions({ "前": 4, "后": 1, "左": 1, "右": 1 });
+ */
+ updateDivisions: (divisions: Record): any[] => {
+ return this.mainApp.appDropZone.updateDivisions(divisions);
},
/**
* 显示所有放置区域