1

index.html

@@ -449,61 +449,13 @@
 
     <script type="module" src="./index.js"></script>
     <script type="module">
-
-
-
-
         import { kernel } from './src/main.ts';
+        import { init, getAutoLoadModelList,getPlacementZone,executeEvent ,getHotspot} from './index.js';
+
+        await init()
+        await getAutoLoadModelList()
 
 
-        const config = {
-            container: document.querySelector('#renderDom'),
-            modelUrlList: [],
-            env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
-            gizmo: {
-                position: true,
-                rotation: true,
-                scale: true
-            },
-            outline: {
-                enable: true,
-                color: "#2196F3",
-                thickness: 1,
-                occlusionStrength: 0.1,
-                occlusionThreshold: 0.0002
-            }
-        };
-
-
-
-        kernel.init(config);
-
-        const response = await fetch('http://localhost:3001/api/models/auto-load/list')
-        const data = await response.json()
-        const models = data.data  // 这就是模型列表
-
-        models.forEach(model => {
-            console.log(model.placement_zone);
-            if (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,
-                modelControlType: model.model_control_type,
-
-            });
-        })
 
         kernel.on('model:load:progress', (data) => {
             console.log('模型加载事件', data);
@@ -574,69 +526,27 @@
                     text: this.textContent
                 });
 
-                // 百叶模型替换逻辑
-                // if (categoryName === "louver") {
                 const currentText = this.textContent;
                 const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${currentText}`);
                 const result = await response.json();
                 if (result.code === 200) {
                     console.log(result.data);
                     sku = currentText;
-                    await initPlacementZoneConfig();
+                  //  await initPlacementZoneConfig();
-                    const { enable_placement_zone, wall_divisions } = result.data;
-                    // const {position_x, position_y, position_z} = data;
-                    if (enable_placement_zone && wall_divisions != undefined) {
-
-                        console.log(wall_divisions);
-
-                        // await placementWall(wall_divisions);
-                    }
                 }
 
-                //  skuToFunc(currentText);
+               getPlacementZone(currentText)
-                // }
             });
         });
 
 
         document.querySelector('#hotspot-btn').addEventListener('click', async function () {
 
-            await hotspotRequest();
+            await getHotspot();
         })
 
 
-        const hotspotRequest = async () => {
-            try {
-                // 从后端获取激活状态的热点列表
-                const response = await fetch('http://localhost:3001/api/hotspots?status=active&page=1&pageSize=100');
-                const result = await response.json();
 
-                if (result.code === 200 && result.data.list.length > 0) {
-                    // 将后端数据转换为 SDK 需要的格式
-                    const hotspots = result.data.list.map(item => ({
-                        id: item.id,
-                        type: 'hotspot',
-                        name: item.name,
-                        meshName: item.name, // 可以根据实际情况调整
-                        icon: item.image_url,
-                        position: [item.position_x, item.position_y, item.position_z],
-                        radius: item.radius,
-                        color: "#000000",
-                        payload: {
-                            skus: item.skus || [],
-                        },
-                    }));
-
-                    // 渲染热点
-                    kernel.hotspot.render(hotspots);
-                    console.log('热点渲染成功:', hotspots);
-                } else {
-                    console.log('没有可用的热点数据');
-                }
-            } catch (error) {
-                console.error('获取热点数据失败:', error);
-            }
-        }
 
         // 监听热点点击事件
         window.addEventListener('hotspot:click', (event) => {
@@ -878,7 +788,7 @@
             kernel.dropZone.clearZones();
             // 调整 baseY 来控制整体高度（正数向上，负数向下）
             const baseY = 0.09;  // 修改这个值来调整整体高度
-            const height = 2.2;
+            const height = 2.27;
             // 调整 offset 来控制每个面向外或向内的偏移
             // 正数 = 向外移动，负数 = 向内移动
             const wallOffset = 0;  // 修改这个值来调整墙面偏移
@@ -893,8 +803,8 @@
                 walls: [
                     {
                         name: 'front',
-                        startPoint: [-1.73, baseY, -1.45],
+                        startPoint: [-1.45, baseY, -1.45],
-                        endPoint: [1.73, baseY, -1.45],
+                        endPoint: [1.45, baseY, -1.45],
                         height: height,
                         divisions: divisions,
                         offset: wallOffset  // 向外或向内偏移
@@ -902,24 +812,24 @@
 
                     {
                         name: 'back',
-                        startPoint: [1.37, baseY, 1.45],
+                        startPoint: [1.45, baseY, 1.45],
-                        endPoint: [-1.37, baseY, 1.45],
+                        endPoint: [-1.45, baseY, 1.45],
                         height: height,
                         divisions: divisions,
                         offset: wallOffset
                     },
                     {
                         name: 'left',
-                        startPoint: [-1.75, baseY, 1.45],
+                        startPoint: [-1.45, baseY, 1.45],
-                        endPoint: [-1.75, baseY, -1.45],
+                        endPoint: [-1.45, baseY, -1.45],
                         height: height,
                         divisions: divisions,
                         offset: wallOffset
                     },
                     {
                         name: 'right',
-                        startPoint: [1.75, baseY, -1.45],
+                        startPoint: [1.45, baseY, -1.45],
-                        endPoint: [1.75, baseY, 1.45],
+                        endPoint: [1.45, baseY, 1.45],
                         height: height,
                         divisions: divisions,
                         offset: wallOffset
@@ -934,94 +844,9 @@
         };
 
 
-        const placementWall = (walls) => {
-            // 只清除旧的放置区域网格，不清除模型
-            kernel.dropZone.clearZones();
-            const divisions = walls.map(wall => ({
-                name: wall.name, // 获取最后一个下划线后的部分
-                divisions: wall.divisions
-            }))
-            console.log(divisions);
-
-            kernel.dropZone.updateDivisions(divisions);
-            // 显示放置区域
-            kernel.dropZone.show();
-            dropZoneVisible = true;
-        }
-
-
         // 监听放置区域点击事件
         kernel.on('dropzone:click', async (dropzone_data) => {
-            console.log('点击了放置区域:', dropzone_data);
+            executeEvent(dropzone_data,sku)
-
-            const { wallName, index, transform } = dropzone_data;
-            const { position, rotation } = transform;
-
-            // 将模型放置到该区域
-            try {
-                const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${sku}`);
-                const result = await response.json();
-
-                if (result.code === 200 && result.data) {
-                    console.log('SKU配置数据:', result.data);
-                    console.log('关联事件:', result.data.events);
-
-                    // 使用 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);
-                            console.log('替换百叶模型类型:', category);
-
-                            // 生成唯一的模型ID
-                            const modelId = id + '_' + Date.now();
-
-                            // 先记录模型放置（会自动处理替换逻辑）
-                            kernel.dropZone.recordModelPlacement(wallName, index, modelId);
-
-                            // 加载并放置模型
-                            await kernel.model.add({
-                                modelId: modelId,
-                                modelUrl: file_url,
-                                modelControlType: model_control_type,
-                                drag: {
-                                    enable: true,
-                                    axis: Math.abs((rotation.y - 0)) < 90 ? 'x' : 'z',
-                                    step: 0.1,
-                                },
-                                transform: {
-                                    position: position,
-                                    rotation: rotation,
-                                }
-                            });
-
-                            console.log(`百叶模型已放置为 ${name}`);
-                        }
-
-                        if (event.event_type === 'change_color') {
-                            const materialName = event.material_name;
-                            const { color, color_map_url, normal_map_url } = event.target_data;
-                            console.log('替换百叶模型颜色:', event.target_data);
-
-                            kernel.material.apply({
-                                target: materialName,
-                                modelId: modelId,  // 指定模型ID，只修改该模型的材质
-                                albedoColor: color,
-                                albedoTexture: color_map_url,
-                                normalMap: normal_map_url,
-                            });
-
-                            console.log(`百叶模型颜色已替换为 ${color}`);
-                        }
-                    }
-                } else {
-                    console.log(`未查询到数据`);
-                }
-            } catch (error) {
-                console.error(`查询SKU配置或替换模型失败:`, error);
-            }
         });
 
 

index.js

@@ -0,0 +1,186 @@
+import { kernel } from './src/main.ts';
+
+//初始化
+export const init = async () => {
+    const config = {
+        container: document.querySelector('#renderDom'),
+        modelUrlList: [],
+        env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
+        gizmo: {
+            position: true,
+            rotation: true,
+            scale: true
+        },
+        outline: {
+            enable: true,
+            color: "#2196F3",
+            thickness: 1,
+            occlusionStrength: 0.1,
+            occlusionThreshold: 0.0002
+        }
+    };
+    kernel.init(config);
+
+
+
+}
+
+//初始化加载模型
+export const getAutoLoadModelList = async () => {
+    const response = await fetch('http://localhost:3001/api/models/auto-load/list')
+    const data = await response.json()
+    const models = data.data  // 这就是模型列表
+
+    models.forEach(model => {
+        console.log(model.placement_zone);
+        if (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,
+            modelControlType: model.model_control_type,
+
+        });
+    })
+}
+
+//获取放置区域
+export const getPlacementZone = async (sku) => {
+    const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${sku}`);
+    const result = await response.json();
+    if (result.code === 200) {
+        // await initPlacementZoneConfig();
+        const { enable_placement_zone, wall_divisions } = result.data;
+        // const {position_x, position_y, position_z} = data;
+        if (enable_placement_zone && wall_divisions != undefined) {
+
+            // 只清除旧的放置区域网格，不清除模型
+            kernel.dropZone.clearZones();
+            const divisions = wall_divisions.map(wall => ({
+                name: wall.name, // 获取最后一个下划线后的部分
+                divisions: wall.divisions
+            }))
+
+            kernel.dropZone.updateDivisions(divisions);
+            // 显示放置区域
+            kernel.dropZone.show();
+        }
+    }
+}
+
+//执行事件
+export const executeEvent = async (dropzone_data, sku) => {
+    const { wallName, index, transform } = dropzone_data;
+    const { position, rotation } = transform;
+
+    // 将模型放置到该区域
+    try {
+        const response = await fetch(`http://localhost:3001/api/product-configs/by-sku/${sku}`);
+        const result = await response.json();
+
+        if (result.code === 200 && result.data) {
+            console.log('SKU配置数据:', result.data);
+            console.log('关联事件:', result.data.events);
+
+            // 使用 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);
+                    console.log('替换百叶模型类型:', category);
+
+                    // 生成唯一的模型ID
+                    const modelId = id + '_' + Date.now();
+
+                    // 先记录模型放置（会自动处理替换逻辑）
+                    kernel.dropZone.recordModelPlacement(wallName, index, modelId);
+
+                    // 加载并放置模型
+                    await kernel.model.add({
+                        modelId: modelId,
+                        modelUrl: file_url,
+                        modelControlType: model_control_type,
+                        drag: {
+                            enable: true,
+                            axis: Math.abs((rotation.y - 0)) < 90 ? 'x' : 'z',
+                            step: 0.1,
+                        },
+                        transform: {
+                            position: position,
+                            rotation: rotation,
+                        }
+                    });
+
+                    console.log(`百叶模型已放置为 ${name}`);
+                }
+
+                if (event.event_type === 'change_color') {
+                    const materialName = event.material_name;
+                    const { color, color_map_url, normal_map_url } = event.target_data;
+                    console.log('替换百叶模型颜色:', event.target_data);
+
+                    kernel.material.apply({
+                        target: materialName,
+                        modelId: modelId,  // 指定模型ID，只修改该模型的材质
+                        albedoColor: color,
+                        albedoTexture: color_map_url,
+                        normalMap: normal_map_url,
+                    });
+
+                    console.log(`百叶模型颜色已替换为 ${color}`);
+                }
+            }
+        } else {
+            console.log(`未查询到数据`);
+        }
+    } catch (error) {
+        console.error(`查询SKU配置或替换模型失败:`, error);
+    }
+}
+
+
+export const getHotspot = async () => {
+    try {
+        // 从后端获取激活状态的热点列表
+        const response = await fetch('http://localhost:3001/api/hotspots?status=active&page=1&pageSize=100');
+        const result = await response.json();
+
+        if (result.code === 200 && result.data.list.length > 0) {
+            // 将后端数据转换为 SDK 需要的格式
+            const hotspots = result.data.list.map(item => ({
+                id: item.id,
+                type: 'hotspot',
+                name: item.name,
+                meshName: item.name, // 可以根据实际情况调整
+                icon: item.image_url,
+                position: [item.position_x, item.position_y, item.position_z],
+                radius: item.radius,
+                color: "#000000",
+                payload: {
+                    skus: item.skus || [],
+                },
+            }));
+
+            // 渲染热点
+            kernel.hotspot.render(hotspots);
+            console.log('热点渲染成功:', hotspots);
+        } else {
+            console.log('没有可用的热点数据');
+        }
+    } catch (error) {
+        console.error('获取热点数据失败:', error);
+    }
+}

src/babylonjs/AppDropZone.ts

@@ -83,15 +83,21 @@ export class AppDropZone {
 
   /**
    * 更新墙面分割数并重新生成放置区域
-   * @param divisions 分割数数组，每个元素包含 name（方向标识：前/后/左/右）和 divisions（分割数）
+   * @param divisions 分割数数组，每个元素包含 name（墙面名称或方向标识）和 divisions（分割数）
    * @example
+   * // 方式1：精确匹配墙面名称（推荐）
+   * updateDivisions([
+   *   { name: "前1", divisions: 1 },
+   *   { name: "前2", divisions: 2 },
+   *   { name: "左", divisions: 3 },
+   *   { name: "右", divisions: 4 }
+   * ])
+   *
+   * // 方式2：模糊匹配方向（兼容旧版）
    * updateDivisions([
    *   { name: "前", divisions: 4 },
-   *   { name: "后", divisions: 1 },
+   *   { name: "后", divisions: 1 }
-   *   { name: "左", divisions: 1 },
-   *   { name: "右", divisions: 1 }
    * ])
-   * 支持模糊匹配：墙面名称中包含"前"、"后"、"左"、"右"等关键字即可匹配
    */
   updateDivisions(divisions: Array<{ name: string; divisions: number }>): PlacementZoneInfo[] {
     if (!this.dropZoneConfig) {
@@ -113,31 +119,42 @@ export class AppDropZone {
       '右': ['右', 'right', 'you']
     };
 
-    // 匹配墙面名称到方向
+    // 匹配墙面名称（支持精确匹配和模糊匹配）
-    const matchDirection = (wallName: string): string | null => {
+    const matchWallName = (wallName: string): number | null => {
+      // 1. 优先精确匹配完整墙面名称
+      // 例如：wall.name = "80全铁3x6_前1"，divisions 中有 "前1"
+      for (const [configName, divisionValue] of Object.entries(divisionsMap)) {
+        if (wallName.includes(configName)) {
+          return divisionValue;
+        }
+      }
+
+      // 2. 如果精确匹配失败，尝试方向模糊匹配（兼容旧版）
       const lowerName = wallName.toLowerCase();
       for (const [direction, keywords] of Object.entries(directionKeywords)) {
         for (const keyword of keywords) {
           if (lowerName.includes(keyword.toLowerCase()) || wallName.includes(keyword)) {
-            return direction;
+            // 检查 divisionsMap 中是否有该方向的配置
+            if (divisionsMap[direction] !== undefined) {
+              return divisionsMap[direction];
+            }
           }
         }
       }
+
       return null;
     };
 
     // 更新配置中的墙面分割数
     this.dropZoneConfig.walls = this.dropZoneConfig.walls.map(wall => {
-      const direction = matchDirection(wall.name);
+      const newDivisions = matchWallName(wall.name);
-      const newDivisions = direction && divisionsMap[direction] !== undefined
+      const finalDivisions = newDivisions !== null ? newDivisions : (wall.divisions || 1);
-        ? divisionsMap[direction]
-        : wall.divisions || 1;
 
-      console.log(`墙面 "${wall.name}" 匹配到方向: ${direction}, 分割数: ${newDivisions}`);
+      console.log(`墙面 "${wall.name}" 匹配到分割数: ${finalDivisions}`);
 
       return {
         ...wall,
-        divisions: newDivisions
+        divisions: finalDivisions
       };
     });