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

1

Browse Source
This commit is contained in:
zguiy
2026-05-25 13:47:09 +08:00
parent 266c0c154e
commit dbde91bbe0
3 changed files with 40 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
index.html
View File

@ -911,125 +911,7 @@
// 生成放置区域按钮事件
let dropZoneVisible = false;
document.getElementById('dropzone-btn').addEventListener('click', async () => {
const { wallName, index } = dropzone_data;
// 先正常放置模型
await window.AppLogic.getEvent(dropzone_data, sku);
// 检查该墙面是否已满
const zones = kernel.dropZone.getPlacementZones();
const wallZones = zones.filter(z => z.wallName === wallName);
// 获取该墙面已放置的模型
const placedModels = kernel.dropZone.getPlacedModels(wallName);
// 如果该墙面所有区域都已占用
if (placedModels.length === wallZones.length) {
console.log(`${wallName} 墙面已满，自动排列模型`);
// 按区域索引排序
const sortedZones = wallZones.sort((a, b) => a.index - b.index);
// 重新排列模型到对应区域
placedModels.forEach((model, idx) => {
const targetZone = sortedZones[idx];
const { position, rotation } = targetZone.transform;
// 移动模型到目标位置
kernel.transform.position({
modelId: model.modelId,
vector3: position
});
kernel.transform.rotation({
modelId: model.modelId,
vector3: rotation
});
// 禁用该模型的拖拽
kernel.model.setDragEnabled(model.modelId, false);
});
console.log('模型已自动排列并禁用拖拽');
}
// if (!dropZoneVisible) {
// // 更新按钮文字
// document.getElementById('dropzone-btn').textContent = '隐藏放置区域';
// console.log('已生成并显示放置区域');
// } else {
// // 隐藏放置区域
// kernel.dropZone.hideAll();
// dropZoneVisible = false;
// // 更新按钮文字
// document.getElementById('dropzone-btn').textContent = '生成放置区域';
// console.log('已隐藏放置区域');
// }
});
// 初始化放置区域配置数据（只需设置一次）
const initPlacementZoneConfig = (divisions = 3) => {
// 只清除旧的放置区域网格，不清除模型
kernel.dropZone.clearZones();
// 调整 baseY 来控制整体高度（正数向上，负数向下）
const baseY = 0.09; // 修改这个值来调整整体高度
const height = 2.27;
// 调整 offset 来控制每个面向外或向内的偏移
// 正数 = 向外移动，负数 = 向内移动
const wallOffset = 0; // 修改这个值来调整墙面偏移
kernel.dropZone.setData({
color: "#21c7ff",
alpha: 0.3,
thickness: 2,
showBorder: true,
borderColor: "#ffffff",
walls: [
{
name: 'front',
startPoint: [-1.45, baseY, -1.45],
endPoint: [1.45, baseY, -1.45],
height: height,
divisions: divisions,
offset: wallOffset // 向外或向内偏移
},
{
name: 'back',
startPoint: [1.45, baseY, 1.45],
endPoint: [-1.45, baseY, 1.45],
height: height,
divisions: divisions,
offset: wallOffset
},
{
name: 'left',
startPoint: [-1.45, baseY, 1.45],
endPoint: [-1.45, baseY, -1.45],
height: height,
divisions: divisions,
offset: wallOffset
},
{
name: 'right',
startPoint: [1.45, baseY, -1.45],
endPoint: [1.45, baseY, 1.45],
height: height,
divisions: divisions,
offset: wallOffset
}
]
});
kernel.dropZone.generateDropZones(divisions);
// 显示放置区域
kernel.dropZone.show();
dropZoneVisible = true;
};
// 监听放置区域点击事件
@ -1038,8 +920,6 @@
});
// 存储当前选中的材质名和网格
let currentMaterialName = '';
let currentPickedMesh = null;

5
index.js
View File

@ -221,9 +221,8 @@ export const executeEvent = async (dropzone_data, result, sku) => {
axis: rotation.y === 0 || rotation.y === 180 ? 'x' : 'z',
step: 0.1,
boundaryConstraint: true, // 启用边界限制
snapToZone: true, // 启用拖拽吸附到最近的分割区域
// 拖拽到已占用区域时的行为：'return' 返回原位置，'replace' 替换目标位置的模型（默认 'return'）
onOccupiedZone: 'replace'
snapToZone: false, // 启用拖拽吸附到最近的分割区域
onOccupiedZone: '' // 拖拽到已占用区域时的行为：'return' 返回原位置，'replace' 替换目标位置的模型（默认 'return'） "" 允许重叠
},
transform: {
position: position,

58
src/babylonjs/AppModelDrag.ts
View File

@ -13,7 +13,7 @@ export interface DragConfig {
step?: number;
boundaryConstraint?: boolean; // 边界限制：拖拽不得超出当前墙面的放置区域
snapToZone?: boolean; // 拖拽吸附：松开时自动吸附到最近的分割区域
onOccupiedZone?: 'return' | 'replace'; // 拖拽到已占用区域时的行为：'return' 返回原位置，'replace' 替换目标位置的模型（默认 'return'）
onOccupiedZone?: 'return' | 'replace' | ''; // 拖拽到已占用区域时的行为：'return' 返回原位置，'replace' 替换目标位置的模型，'' 什么都不做（允许重叠）
}
/**
@ -563,6 +563,9 @@ export class AppModelDrag extends Monobehiver {
} else if (onOccupiedZone === 'replace') {
// 替换目标位置的模型（继续执行后面的逻辑）
console.log(`[拖拽吸附] 配置为替换模型，将替换模型 ${occupyingModelId}`);
} else if (onOccupiedZone === '') {
// 什么都不做，允许重叠（继续执行后面的逻辑，但不会触发替换）
console.log(`[拖拽吸附] 配置为允许重叠，继续放置`);
}
}
@ -672,33 +675,46 @@ export class AppModelDrag extends Monobehiver {
// 检查目标区域是否已有模型
const newKey = `${originalWallName}[${closestZoneIndex}]`;
const existingModelId = appDropZone['zoneModelMap']?.get(newKey);
// 获取拖拽配置
const dragInfo = this.modelDragMap.get(modelId);
const onOccupiedZone = dragInfo?.config.onOccupiedZone || 'return';
if (existingModelId && existingModelId !== modelId) {
console.log(`[边界检测] 目标区域 ${closestZoneIndex} 已有模型 ${existingModelId}，交换位置`);
console.log(`[边界检测] 目标区域 ${closestZoneIndex} 已有模型 ${existingModelId}`);
// 将原有模型移动到旧位置
if (currentZoneIndex !== -1) {
const swapKey = `${originalWallName}[${currentZoneIndex}]`;
appDropZone['zoneModelMap']?.set(swapKey, existingModelId);
console.log(`[边界检测] 模型 ${existingModelId} 移动到区域 ${currentZoneIndex}`);
// 只有在 'replace' 模式下才交换位置
if (onOccupiedZone === 'replace') {
console.log(`[边界检测] 配置为替换模式，交换位置`);
// 实际移动被替换模型的物理位置
const existingMeshes = this.mainApp.appModel?.modelDic?.Get(existingModelId);
if (existingMeshes && existingMeshes.length) {
const existingRootMesh = existingMeshes[0];
const swapZone = wallZones[currentZoneIndex];
if (swapZone) {
const offsetDistance = -0.05;
const swapPosition = swapZone.center.add(swapZone.normal.scale(offsetDistance));
existingRootMesh.position.copyFrom(swapPosition);
// 将原有模型移动到旧位置
if (currentZoneIndex !== -1) {
const swapKey = `${originalWallName}[${currentZoneIndex}]`;
appDropZone['zoneModelMap']?.set(swapKey, existingModelId);
console.log(`[边界检测] 模型 ${existingModelId} 移动到区域 ${currentZoneIndex}`);
// 更新旋转
const targetDirection = swapZone.normal.scale(-1);
const angle = Math.atan2(targetDirection.x, targetDirection.z);
existingRootMesh.rotation.y = angle;
// 实际移动被替换模型的物理位置
const existingMeshes = this.mainApp.appModel?.modelDic?.Get(existingModelId);
if (existingMeshes && existingMeshes.length) {
const existingRootMesh = existingMeshes[0];
const swapZone = wallZones[currentZoneIndex];
if (swapZone) {
const offsetDistance = -0.05;
const swapPosition = swapZone.center.add(swapZone.normal.scale(offsetDistance));
existingRootMesh.position.copyFrom(swapPosition);
console.log(`[边界检测] 已将模型 ${existingModelId} 物理移动到区域 ${currentZoneIndex}`);
// 更新旋转
const targetDirection = swapZone.normal.scale(-1);
const angle = Math.atan2(targetDirection.x, targetDirection.z);
existingRootMesh.rotation.y = angle;
console.log(`[边界检测] 已将模型 ${existingModelId} 物理移动到区域 ${currentZoneIndex}`);
}
}
}
} else if (onOccupiedZone === '') {
// 允许重叠，不做任何处理
console.log(`[边界检测] 配置为允许重叠，不交换位置`);
}
}