From b5b70251e233218f1ae9e0b1029075b973e75be3 Mon Sep 17 00:00:00 2001 From: zguiy <1415466602@qq.com> Date: Wed, 20 May 2026 16:40:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9B=B8=E6=9C=BA=E9=99=90?= =?UTF-8?q?=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- index.html | 194 +++++++++++++++++++++++-------------- index.js | 22 ++++- src/babylonjs/AppCamera.ts | 3 +- src/babylonjs/AppConfig.ts | 2 +- src/babylonjs/AppModel.ts | 18 ++++ src/kernel/Adapter.ts | 12 +++ 7 files changed, 177 insertions(+), 78 deletions(-) diff --git a/.env b/.env index 60c60d3..55abc01 100644 --- a/.env +++ b/.env @@ -1,6 +1,8 @@ # API 配置 # 开发环境 -VITE_API_BASE_URL=https://ztserver.zguiy.com +VITE_API_BASE_URL=http://192.168.3.100:26517 +#生产环境 +# VITE_API_BASE_URL=https://ztserver.zguiy.com # 生产环境示例（部署时修改） # VITE_API_BASE_URL=https://api.yourdomain.com diff --git a/index.html b/index.html index c81369e..edc927c 100644 --- a/index.html +++ b/index.html @@ -221,6 +221,50 @@ cursor: pointer; } + /* 标签页样式 */ + .tabs-container { + margin-bottom: 15px; + } + + .tabs-header { + display: flex; + gap: 8px; + margin-bottom: 15px; + border-bottom: 2px solid rgba(255, 255, 255, 0.1); + } + + .tab-btn { + padding: 10px 20px; + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.6); + border: none; + border-bottom: 2px solid transparent; + cursor: pointer; + font-size: 13px; + transition: all 0.3s; + flex: 1; + margin-bottom: -2px; + } + + .tab-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.8); + } + + .tab-btn.active { + background: rgba(76, 175, 80, 0.2); + color: #fff; + border-bottom-color: #4CAF50; + } + + .tab-content { + display: none; + } + + .tab-content.active { + display: block; + } + /* 进度条样式 */ #progress-container { position: absolute; @@ -289,83 +333,76 @@
- -
-
- 棚子尺寸 - ▼ + +
+
+ +
-
-
- - - - - - - - + + +
+ +
+
+ 棚子尺寸 + ▼ +
+
+
+ + + +
+
+
+ + +
+
+ 百叶 + ▼ +
+
+
+ + + + +
+
-
- -
-
- 棚子类型 - ▼ -
-
-
- - - - + +
+ +
+
+ 棚子尺寸 + ▼ +
+
+
+ + + +
+
-
-
- - -
-
- 百叶 - ▼ -
-
-
- - - - - - - - - - -
13
- - -
10
- - - -
-
-
- -
-
- 配色 - ▼ -
-
-
-
13
- -
10
- + +
+
+ 百叶 + ▼ +
+
+
+ + +
+
@@ -504,6 +541,21 @@ // ========== UI 交互逻辑 ========== + // 标签页切换 + document.querySelectorAll('.tab-btn').forEach(btn => { + btn.addEventListener('click', function () { + const tabId = this.dataset.tab; + + // 移除所有标签页的激活状态 + document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); + document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); + + // 激活当前标签页 + this.classList.add('active'); + document.getElementById('tab-' + tabId).classList.add('active'); + }); + }); + // 折叠面板切换 document.querySelectorAll('.category-header').forEach(header => { header.addEventListener('click', function () { diff --git a/index.js b/index.js index f56e2ad..ca0deba 100644 --- a/index.js +++ b/index.js @@ -39,7 +39,7 @@ export const init = async (customConfig = {}) => { const defaultConfig = { container: document.querySelector('#renderDom'), modelUrlList: [], - env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true }, + env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: false }, gizmo: { position: false, rotation: false, @@ -123,7 +123,6 @@ export const getPlacementZone = async (sku) => { //执行事件 export const getEvent = async (dropzone_data, sku) => { - console.log(sku); // 将模型放置到该区域 try { @@ -153,6 +152,8 @@ export const executeEvent = async (dropzone_data, result, sku) => { let modelId = null; // 在外部声明，用于在两个循环之间传递 let modelName = null; + let pergolaSku = null; // 用于存储棚子的 SKU + // 第一次循环：处理 change_model for (const event of result.data.events) { if (event.event_type === 'change_model') { @@ -205,6 +206,20 @@ export const executeEvent = async (dropzone_data, result, sku) => { console.log(`百叶模型颜色已替换为 ${color}`); } } + + // 查找棚子的 SKU（从已加载的模型中查找 model_control_type 为 'pergola' 的模型） + const allModels = kernel.model.getAllMetadata(); + for (const model of allModels) { + if (model.modelControlType === 'pergola') { + pergolaSku = getSkuByModelId(model.modelId); + if (pergolaSku) { + break; + } + } + } + + console.log('当前棚子的 SKU:', pergolaSku); + return pergolaSku; } @@ -225,7 +240,6 @@ export const executeEvent2 = async (result, sku) => { console.log(`检查模型 ${name + '_' + category} 是否存在:`, modelAlreadyExists); } } -console.log(hasModelChange && !modelAlreadyExists); kernel.dropZone.hide(); // 只有在需要更换模型且模型不存在时才清除 if (hasModelChange && !modelAlreadyExists) { @@ -238,6 +252,8 @@ console.log(hasModelChange && !modelAlreadyExists); // 先处理所有 change_model 事件 for (const event of result.data.events) { + console.log(event); + if (event.event_type === 'change_model') { const { target_data } = event; console.log(event.target_data); diff --git a/src/babylonjs/AppCamera.ts b/src/babylonjs/AppCamera.ts index 76ee402..20eb382 100644 --- a/src/babylonjs/AppCamera.ts +++ b/src/babylonjs/AppCamera.ts @@ -29,8 +29,7 @@ export class AppCamera extends Monobehiver { this.object.panningSensibility = 0; // 限制垂直角范围，实现上帝视角 - // this.object.upperBetaLimit = Tools.ToRadians(60); // 最大垂直角（接近90度，避免万向锁） - // this.object.lowerBetaLimit = Tools.ToRadians(60); // 最小垂直角 + this.object.upperBetaLimit = Tools.ToRadians(90); // 最大垂直角（接近90度，避免万向锁） this.object.position = new Vector3(-0, 10, 0); this.setTarget(0, 2, 0); diff --git a/src/babylonjs/AppConfig.ts b/src/babylonjs/AppConfig.ts index ffc413d..8c87eee 100644 --- a/src/babylonjs/AppConfig.ts +++ b/src/babylonjs/AppConfig.ts @@ -12,7 +12,7 @@ export const AppConfig = { envPath: '/hdr/sanGiuseppeBridge.env', intensity: 1.5, rotationY: 0, - background: true, + background: false, }, gizmo: { position: true, diff --git a/src/babylonjs/AppModel.ts b/src/babylonjs/AppModel.ts index 4a591ca..a065283 100644 --- a/src/babylonjs/AppModel.ts +++ b/src/babylonjs/AppModel.ts @@ -554,6 +554,24 @@ export class AppModel extends Monobehiver { return undefined; } + /** + * 获取所有模型的元数据 + * @returns 所有模型的元数据数组 + */ + getAllModelMetadata(): ModelMetadata[] { + const keys = this.modelDic.Keys(); + const metadataList: ModelMetadata[] = []; + + for (const key of keys) { + const metadata = this.modelMetadataDic.Get(key); + if (metadata) { + metadataList.push(metadata); + } + } + + return metadataList; + } + private getModelTransformTargets(meshes: AbstractMesh[]): AbstractMesh[] { const meshSet = new Set(meshes); const rootMeshes = meshes.filter(mesh => !mesh.parent || !meshSet.has(mesh.parent as AbstractMesh)); diff --git a/src/kernel/Adapter.ts b/src/kernel/Adapter.ts index e2db1ce..f257bec 100644 --- a/src/kernel/Adapter.ts +++ b/src/kernel/Adapter.ts @@ -82,6 +82,18 @@ export class KernelAdapter { */ exists: (modelId: string): boolean => { return this.mainApp.appModel.exists(modelId); + }, + /** + * 获取所有模型的元数据 + * @returns 所有模型的元数据数组，包含 modelName, modelId, modelControlType 等信息 + * @example + * // 获取所有模型 + * const allModels = kernel.model.getAllMetadata(); + * // 查找特定类型的模型 + * const pergola = allModels.find(m => m.modelControlType === 'pergola'); + */ + getAllMetadata: (): any[] => { + return this.mainApp.appModel.getAllModelMetadata(); } };