1

index copy.html

@@ -67,6 +67,40 @@
             border-bottom: 2px solid rgba(255, 255, 255, 0.2);
         }
 
+        .click-info {
+            background: rgba(76, 175, 80, 0.2);
+            border: 1px solid rgba(76, 175, 80, 0.5);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 15px;
+            color: #fff;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+
+        .click-info-title {
+            font-weight: bold;
+            color: #4caf50;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+
+        .click-info-item {
+            margin-bottom: 4px;
+            display: flex;
+            gap: 8px;
+        }
+
+        .click-info-label {
+            color: rgba(255, 255, 255, 0.7);
+            min-width: 70px;
+        }
+
+        .click-info-value {
+            color: #fff;
+            word-break: break-all;
+        }
+
         .config-category {
             margin-bottom: 15px;
             border-radius: 8px;
@@ -227,12 +261,34 @@
                 <div id="progress-bar"></div>
                 <div id="progress-text">0%</div>
             </div>
+
+            <!-- 生成放置区域按钮 -->
+            <button id="dropzone-btn" style="
+                position: absolute;
+                top: 20px;
+                left: 20px;
+                padding: 10px 20px;
+                background: #21c7ff;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                z-index: 100;
+            ">生成放置区域</button>
         </div>
 
         <!-- 配置面板 -->
         <div id="config-panel">
             <div class="config-title">选装选配</div>
 
+            <!-- 点击信息显示区域 -->
+            <div id="click-info" class="click-info" style="display: none;">
+                <div class="click-info-title">点击信息</div>
+                <div id="click-info-content"></div>
+            </div>
+
             <!-- 棚子尺寸 -->
             <div class="config-category">
                 <div class="category-header" data-category="size">
@@ -273,7 +329,7 @@
                 </div>
                 <div class="category-content">
                     <div class="option-group">
-                        <button class="option-btn" data-option="louver-1">百叶1</button>
+                        <button class="option-btn" data-option="louver-1">111</button>
                         <button class="option-btn" data-option="louver-2">百叶2</button>
                         <button class="option-btn" data-option="louver-3">百叶3</button>
                         <button class="option-btn" data-option="louver-4">百叶4</button>
@@ -290,13 +346,16 @@
                 </div>
                 <div class="category-content">
                     <div class="option-group">
-                        <button class="option-btn" data-option="color-1">白色</button>
+                        <button class="option-btn" data-option="color-1">222222</button>
                         <button class="option-btn" data-option="color-2">灰色</button>
                         <button class="option-btn" data-option="color-3">黑色</button>
                         <button class="option-btn" data-option="color-4">木色</button>
                     </div>
                 </div>
             </div>
+
+            <button id="hotspot-btn">生成热点</button>
+            <button id="prevent-btn">生成防止区域</button>
         </div>
     </div>
 
@@ -390,6 +449,10 @@
 
     <script type="module" src="./index.js"></script>
     <script type="module">
+
+
+
+
         import { kernel } from './src/main.ts';
 
         // ========== UI 交互逻辑 ==========
@@ -439,48 +502,177 @@
                 });
 
                 // 百叶模型替换逻辑
-                if (categoryName === "louver") {
-                    const currentText = this.textContent;
+                // if (categoryName === "louver") {
+                const currentText = this.textContent;
+                console.log(currentText);
 
-                    // 根据 SKU 查询配置和事件
-                    try {
-                        const response = await fetch(`http://localhost:3000/api/product-configs/by-sku/${currentText}`);
-                        const result = await response.json();
-
-                        if (result.code === 200 && result.data) {
-                            console.log('SKU配置数据:', result.data);
-                            console.log('关联事件:', result.data.events);
-
-                            // 使用配置数据中的模型路径（如果有）
-                            const modelUrl = result.data.model_id
-                                ? `https://sdk.zguiy.com/resurces/model/${result.data.model_id}.glb`
-                                : `https://sdk.zguiy.com/resurces/model/${currentText}.glb`;
-
-                            console.log('替换百叶模型:', modelUrl);
-                            await kernel.model.replace({
-                                modelId: '卷帘小',
-                                modelUrl: modelUrl,
-                                modelControlType: 'color'
-                            });
-                            console.log(`百叶模型已替换为 ${currentText}`);
-                        } else {
-                            console.warn('未找到SKU配置，使用默认模型路径');
-                            const modelUrl = `https://sdk.zguiy.com/resurces/model/${currentText}.glb`;
-                            console.log('替换百叶模型:', modelUrl);
-                            await kernel.model.replace({
-                                modelId: '卷帘小',
-                                modelUrl: modelUrl,
-                                modelControlType: 'color'
-                            });
-                            console.log(`百叶模型已替换为 ${currentText}`);
-                        }
-                    } catch (error) {
-                        console.error(`查询SKU配置或替换模型失败:`, error);
-                    }
-                }
+                skuToFunc(currentText);
+                // }
             });
         });
 
+
+        document.querySelector('#hotspot-btn').addEventListener('click', async function () {
+
+            await hotspotRequest();
+        })
+        const skuToFunc = async (currentText) => {
+            // 根据 SKU 查询配置和事件
+            try {
+                const response = await fetch(`http://localhost:3000/api/product-configs/by-sku/${currentText}`);
+                const result = await response.json();
+
+                if (result.code === 200 && result.data) {
+                    console.log('SKU配置数据:', result.data);
+                    console.log('关联事件:', result.data.events);
+                    placementWall(1);
+                    // 使用 for...of 循环以支持 await
+                    for (const event of result.data.events) {
+                        if (event.event_type === 'change_model') {
+                            const { file_url, model_control_type, category } = event.target_data;
+                            console.log('替换百叶模型:', event);
+
+                            await kernel.model.replace({
+                                modelId: category,
+                                modelUrl: file_url,
+                                modelControlType: model_control_type,
+                                drag: {
+                                    enable: true,
+                                    axis: 'x',
+                                    step: 0.1,
+                                },
+                            });
+
+                            console.log(`百叶模型已替换为 ${currentText}`);
+                        }
+
+                        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,
+                                albedoColor: color,
+                                albedoTexture: color_map_url,
+                                normalMap: normal_map_url,
+                            });
+
+                            console.log(`百叶模型颜色已替换为 ${color}`);
+                        }
+                    }
+                } else {
+                    console.log(`未查询到数据`);
+                }
+            } catch (error) {
+                console.error(`查询SKU配置或替换模型失败:`, error);
+            }
+
+
+        }
+
+        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) => {
+            console.log('热点被点击:', event.detail);
+            const { id, name, payload } = event.detail;
+
+            const clickInfoDiv = document.getElementById('click-info');
+            const clickInfoContent = document.getElementById('click-info-content');
+
+            let html = `<div class="click-info-item">
+                <span class="click-info-label">类型:</span>
+                <span class="click-info-value">热点</span>
+            </div>
+            <div class="click-info-item">
+                <span class="click-info-label">名称:</span>
+                <span class="click-info-value">${name}</span>
+            </div>`;
+
+            if (payload && payload.skus && payload.skus.length > 0) {
+                html += `<div class="click-info-item">
+                    <span class="click-info-label">关联SKU:</span>
+                    <span class="click-info-value">${payload.skus.join(', ')}</span>
+                </div>`;
+            } else {
+                html += `<div class="click-info-item">
+                    <span class="click-info-label">关联SKU:</span>
+                    <span class="click-info-value">无</span>
+                </div>`;
+            }
+
+            clickInfoContent.innerHTML = html;
+            clickInfoDiv.style.display = 'block';
+        });
+
+        // 监听模型点击事件
+        window.addEventListener('model:click', (event) => {
+            console.log('模型被点击:', event.detail);
+            const { meshName, materialName, modelControlType } = event.detail;
+
+            const clickInfoDiv = document.getElementById('click-info');
+            const clickInfoContent = document.getElementById('click-info-content');
+
+            let html = `<div class="click-info-item">
+                <span class="click-info-label">类型:</span>
+                <span class="click-info-value">模型</span>
+            </div>
+            <div class="click-info-item">
+                <span class="click-info-label">网格名称:</span>
+                <span class="click-info-value">${meshName}</span>
+            </div>`;
+
+            if (materialName) {
+                html += `<div class="click-info-item">
+                    <span class="click-info-label">材质名称:</span>
+                    <span class="click-info-value">${materialName}</span>
+                </div>`;
+            }
+
+            if (modelControlType) {
+                html += `<div class="click-info-item">
+                    <span class="click-info-label">控制类型:</span>
+                    <span class="click-info-value">${modelControlType}</span>
+                </div>`;
+            }
+
+            clickInfoContent.innerHTML = html;
+            clickInfoDiv.style.display = 'block';
+        });
+
+
         // 多选复选框逻辑
         document.querySelectorAll('.option-checkbox input[type="checkbox"]').forEach(checkbox => {
             checkbox.addEventListener('change', async function () {
@@ -545,7 +737,10 @@
             const materialName = window.getCurrentMaterialName();
             if (materialName) {
                 console.log('切换为白色，材质名:', materialName);
-                kernel.material.color(materialName, '#FFFFFF');
+                kernel.material.apply({
+                    target: materialName,
+                    albedoColor: '#FFFFFF',
+                });
             } else {
                 console.log('没有选中材质');
             }
@@ -556,7 +751,10 @@
             const materialName = window.getCurrentMaterialName();
             if (materialName) {
                 console.log('切换为黑色，材质名:', materialName);
-                kernel.material.color(materialName, '#000000');
+                kernel.material.apply({
+                    target: materialName,
+                    albedoColor: '#000000',
+                });
             } else {
                 console.log('没有选中材质');
             }
@@ -617,6 +815,142 @@
                 console.log('没有选中的网格');
             }
         });
+
+        // 生成放置区域按钮事件
+        let dropZoneVisible = false;
+        document.getElementById('dropzone-btn').addEventListener('click', () => {
+            if (!dropZoneVisible) {
+
+
+
+                // 更新按钮文字
+                document.getElementById('dropzone-btn').textContent = '隐藏放置区域';
+                console.log('已生成并显示放置区域');
+            } else {
+                // 隐藏放置区域
+                kernel.dropZone.hideAll();
+                dropZoneVisible = false;
+
+                // 更新按钮文字
+                document.getElementById('dropzone-btn').textContent = '生成放置区域';
+                console.log('已隐藏放置区域');
+            }
+        });
+
+        const placementWall = (divisions) => {
+
+            // 先清除旧的放置区域
+            kernel.dropZone.clearAll();
+
+            // 生成新的放置区域（使用新的墙面参数化API）
+            // 调整 baseY 来控制整体高度（正数向上，负数向下）
+            const baseY = 0.08;  // 修改这个值来调整整体高度
+
+            // 调整 offset 来控制每个面向外或向内的偏移
+            // 正数 = 向外移动，负数 = 向内移动
+            const wallOffset = -0.07;  // 修改这个值来调整墙面偏移
+
+            kernel.dropZone.generate({
+                walls: [
+                    {
+                        name: 'front',
+                        startPoint: [-1.43, baseY, -1.4],
+                        endPoint: [1.37, baseY, -1.4],
+                        height: 2.2,
+                        divisions: divisions,
+                        offset: wallOffset  // 向外或向内偏移
+                    },
+                    {
+                        name: 'back',
+                        startPoint: [1.37, baseY, 1.4],
+                        endPoint: [-1.43, baseY, 1.4],
+                        height: 2.2,
+                        divisions: divisions,
+                        offset: wallOffset
+                    },
+                    {
+                        name: 'left',
+                        startPoint: [-1.43, baseY, 1.39],
+                        endPoint: [-1.43, baseY, -1.43],
+                        height: 2.2,
+                        divisions: divisions,
+                        offset: wallOffset
+                    },
+                    {
+                        name: 'right',
+                        startPoint: [1.37, baseY, -1.43],
+                        endPoint: [1.37, baseY, 1.4],
+                        height: 2.2,
+                        divisions: divisions,
+                        offset: wallOffset
+                    }
+                ],
+                color: "#21c7ff",
+                alpha: 0.3,
+                thickness: 2,
+                showBorder: true,
+                borderColor: "#ffffff"
+            });
+
+            // 显示放置区域
+            kernel.dropZone.showAll();
+            dropZoneVisible = true;
+        }
+
+
+        // 监听放置区域点击事件
+        kernel.on('dropzone:click', async (data) => {
+            // 将模型放置到该区域
+               try {
+                const response = await fetch(`http://localhost:3000/api/product-configs/by-sku/${currentText}`);
+                const result = await response.json();
+
+                if (result.code === 200 && result.data) {
+                    console.log('SKU配置数据:', result.data);
+                    console.log('关联事件:', result.data.events);
+                    placementWall(1);
+                    // 使用 for...of 循环以支持 await
+                    for (const event of result.data.events) {
+                        if (event.event_type === 'change_model') {
+                            const { file_url, model_control_type, category } = event.target_data;
+                            console.log('替换百叶模型:', event);
+
+                            await kernel.model.replace({
+                                modelId: category,
+                                modelUrl: file_url,
+                                modelControlType: model_control_type,
+                                drag: {
+                                    enable: true,
+                                    axis: 'x',
+                                    step: 0.1,
+                                },
+                            });
+
+                            console.log(`百叶模型已替换为 ${currentText}`);
+                        }
+
+                        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,
+                                albedoColor: color,
+                                albedoTexture: color_map_url,
+                                normalMap: normal_map_url,
+                            });
+
+                            console.log(`百叶模型颜色已替换为 ${color}`);
+                        }
+                    }
+                } else {
+                    console.log(`未查询到数据`);
+                }
+            } catch (error) {
+                console.error(`查询SKU配置或替换模型失败:`, error);
+            }
+        });
     </script>
 </body>