From dbde91bbe012f39b83a723ac48cf7204bdebd7c1 Mon Sep 17 00:00:00 2001 From: zguiy <1415466602@qq.com> Date: Mon, 25 May 2026 13:47:09 +0800 Subject: [PATCH] 1 --- index.html | 122 +--------------------------------- index.js | 5 +- src/babylonjs/AppModelDrag.ts | 58 ++++++++++------ 3 files changed, 40 insertions(+), 145 deletions(-) diff --git a/index.html b/index.html index 7676253..165cbb9 100644 --- a/index.html +++ b/index.html @@ -911,126 +911,8 @@ // 生成放置区域按钮事件 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; - }; + // 监听放置区域点击事件 kernel.on('dropzone:click', async (dropzone_data) => { @@ -1038,8 +920,6 @@ }); - - // 存储当前选中的材质名和网格 let currentMaterialName = ''; let currentPickedMesh = null; diff --git a/index.js b/index.js index ac27d9c..3de2649 100644 --- a/index.js +++ b/index.js @@ -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, diff --git a/src/babylonjs/AppModelDrag.ts b/src/babylonjs/AppModelDrag.ts index 7aebaeb..3613435 100644 --- a/src/babylonjs/AppModelDrag.ts +++ b/src/babylonjs/AppModelDrag.ts @@ -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(`[边界检测] 配置为允许重叠，不交换位置`); } }