zhengte/zhengte.babylonjs-sdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可以替换模型

Browse Source
This commit is contained in:
zguiy
2026-05-13 16:27:16 +08:00
parent fea24ad19a
commit 8f833be426
5 changed files with 113 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.claude/settings.local.json
View File

@ -3,7 +3,8 @@
"allow": [
"Bash(cd /d/VscodeProject/zhengte.babylonjs-sdk && npm run build 2>&1 | head -50)",
"Bash(find \"D:\\\\VscodeProject\\\\zhengte.babylonjs-sdk\\\\src\" -name \"*.ts\" -type f -exec grep -l \"class Dictionary\" {} \\\\;)",
"Bash(find \"D:\\\\VscodeProject\\\\zhengte.babylonjs-sdk\\\\src\" -name \"*.ts\" -type f -exec grep -l \"class.*Kernel\\\\|export.*kernel\" {} \\\\;)"
"Bash(find \"D:\\\\VscodeProject\\\\zhengte.babylonjs-sdk\\\\src\" -name \"*.ts\" -type f -exec grep -l \"class.*Kernel\\\\|export.*kernel\" {} \\\\;)",
"Bash(npm run *)"
]
}
}

26
index.html
View File

@ -856,9 +856,10 @@
// 监听放置区域点击事件
kernel.on('dropzone:click', async (dropzone_data) => {
console.log(dropzone_data);
console.log('点击了放置区域:', dropzone_data);
const { position, rotation } = dropzone_data.transform;
const { wallName, index, transform } = dropzone_data;
const { position, rotation } = transform;
// 将模型放置到该区域
try {
@ -872,28 +873,35 @@
// 使用 for...of 循环以支持 await
for (const event of result.data.events) {
if (event.event_type === 'change_model') {
console.log( event.target_data);
const {id, name,file_url, model_control_type, category } = event.target_data;
console.log(event.target_data);
const {id, name, file_url, model_control_type, category } = event.target_data;
console.log('替换百叶模型:', event);
console.log('替换百叶模型类型:', category);
// 生成唯一的模型ID
const modelId = id + '_' + Date.now();
// 先记录模型放置（会自动处理替换逻辑）
kernel.dropZone.recordModelPlacement(wallName, index, modelId);
// 加载并放置模型
await kernel.model.add({
modelId: id+Date.now(),
modelId: modelId,
modelUrl: file_url,
modelControlType: model_control_type,
drag: {
enable: true,
axis: 'x',
step: 0.1,
}
,
},
transform: {
position: position,
rotation: rotation,
}
});
console.log(`百叶模型已替换为 ${name}`);
console.log(`百叶模型已放置为 ${name}`);
}
if (event.event_type === 'change_color') {

86
src/babylonjs/AppDropZone.ts
View File

@ -1,5 +1,6 @@
import { Scene, Vector3 } from '@babylonjs/core';
import { AppPlacementWall, WallConfig, PlacementZoneInfo } from './AppPlacementWall';
import { AppModel } from './AppModel';
/**
* 放置区域配置
@ -19,20 +20,94 @@ export interface DropZoneConfig {
export class AppDropZone {
private scene: Scene;
private placementWall: AppPlacementWall;
private appModel: AppModel | null = null;
// 内部映射：放置区域 -> 模型ID
private zoneModelMap: Map<string, string> = new Map();
// 墙面 -> 当前分割数
private wallDivisionsMap: Map<string, number> = new Map();
constructor(scene: Scene) {
this.scene = scene;
this.placementWall = new AppPlacementWall(scene);
}
/**
* 初始化模型管理器（内部使用）
*/
setModelManager(appModel: AppModel): void {
this.appModel = appModel;
}
/**
* 生成放置区域
* @param config 配置参数
*/
generateDropZones(config: DropZoneConfig): PlacementZoneInfo[] {
// 检查每个墙面的分割数是否改变，如果改变则卸载该墙面的所有模型
config.walls.forEach(wall => {
const oldDivisions = this.wallDivisionsMap.get(wall.name);
if (oldDivisions !== undefined && oldDivisions !== wall.divisions) {
// 分割数改变，卸载该墙面的所有模型
this.unloadWallModels(wall.name);
console.log(`墙面 ${wall.name} 分割数从 ${oldDivisions} 改为 ${wall.divisions}，已卸载所有模型`);
}
// 更新分割数记录
this.wallDivisionsMap.set(wall.name, wall.divisions);
});
return this.placementWall.generatePlacementAreas(config);
}
/**
* 卸载指定墙面的所有模型（内部方法）
*/
private unloadWallModels(wallName: string): void {
if (!this.appModel) return;
const modelsToUnload: string[] = [];
// 找出该墙面的所有模型
this.zoneModelMap.forEach((modelId, zoneKey) => {
if (zoneKey.startsWith(`${wallName}[`)) {
modelsToUnload.push(modelId);
}
});
// 卸载模型并清除映射
modelsToUnload.forEach(modelId => {
this.appModel!.removeByName(modelId);
// 清除该模型的映射
this.zoneModelMap.forEach((value, key) => {
if (value === modelId) {
this.zoneModelMap.delete(key);
}
});
});
if (modelsToUnload.length > 0) {
console.log(`已卸载墙面 ${wallName} 的 ${modelsToUnload.length} 个模型`);
}
}
/**
* 记录模型放置到区域（内部方法，在点击事件中自动调用）
*/
recordModelPlacement(wallName: string, index: number, modelId: string): void {
const zoneKey = `${wallName}[${index}]`;
// 检查该区域是否已有模型
const existingModelId = this.zoneModelMap.get(zoneKey);
if (existingModelId && this.appModel) {
// 卸载旧模型
console.log(`区域 ${zoneKey} 已有模型 ${existingModelId}，将替换为 ${modelId}`);
this.appModel.removeByName(existingModelId);
}
// 记录新模型
this.zoneModelMap.set(zoneKey, modelId);
}
/**
* 获取所有放置区域
*/
@ -79,6 +154,17 @@ export class AppDropZone {
* 清除所有放置区域
*/
clearAll(): void {
// 清除所有模型
if (this.appModel) {
this.zoneModelMap.forEach(modelId => {
this.appModel!.removeByName(modelId);
});
}
// 清除映射
this.zoneModelMap.clear();
this.wallDivisionsMap.clear();
this.placementWall.clearAll();
}

2
src/babylonjs/MainApp.ts
View File

@ -95,6 +95,8 @@ export class MainApp {
this.appModel.initManagers();
// 在场景创建后初始化 AppDropZone
this.appDropZone = new AppDropZone(this.appScene.object);
// 设置模型管理器引用
this.appDropZone.setModelManager(this.appModel);
this.update();
EventBridge.sceneReady({ scene: this.appScene.object });
}

6
src/kernel/Adapter.ts
View File

@ -374,6 +374,12 @@ export class KernelAdapter {
inZone: false,
zone: null
};
},
/**
* 记录模型放置到区域（内部使用，自动处理替换）
*/
recordModelPlacement: (wallName: string, index: number, modelId: string): void => {
this.mainApp.appDropZone.recordModelPlacement(wallName, index, modelId);
}
};