diff --git a/index copy 2.html b/index copy 2.html deleted file mode 100644 index eadc79b..0000000 --- a/index copy 2.html +++ /dev/null @@ -1,933 +0,0 @@ - - - - - - - 3D Model Showcase SDK - TS - - - - -
- -
- - - - - -
- - -
-
选装选配
- - - - - -
-
- 棚子尺寸 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 棚子类型 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 百叶 - ▼ -
-
-
- - - - - -
-
-
- - -
-
- 配色 - ▼ -
-
-
- - - - -
-
-
- - - -
-
- - - - - - - - - \ No newline at end of file diff --git a/index copy 3.html b/index copy 3.html deleted file mode 100644 index a76ab35..0000000 --- a/index copy 3.html +++ /dev/null @@ -1,954 +0,0 @@ - - - - - - - 3D Model Showcase SDK - TS - - - - -
- -
- - - - - -
- - -
-
选装选配
- - - - - -
-
- 棚子尺寸 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 棚子类型 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 百叶 - ▼ -
-
-
- - - - - -
-
-
- - -
-
- 配色 - ▼ -
-
-
- - - - -
-
-
- - - -
-
- - - - - - - - - \ No newline at end of file diff --git a/index copy.html b/index copy.html deleted file mode 100644 index ae60d4f..0000000 --- a/index copy.html +++ /dev/null @@ -1,957 +0,0 @@ - - - - - - - 3D Model Showcase SDK - TS - - - - -
- -
- - - - - -
- - -
-
选装选配
- - - - - -
-
- 棚子尺寸 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 棚子类型 - ▼ -
-
-
- - - - -
-
-
- - -
-
- 百叶 - ▼ -
-
-
- - - - - -
-
-
- - -
-
- 配色 - ▼ -
-
-
- - - - -
-
-
- - - -
-
- - - - - - - - - \ No newline at end of file diff --git a/index.html b/index.html index e0e0fd2..503b997 100644 --- a/index.html +++ b/index.html @@ -455,6 +455,79 @@ import { kernel } from './src/main.ts'; + + 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); + }); + + + kernel.on('model:loaded', (data) => { + console.log('模型加载完成', data); + // 隐藏进度条 + const progressContainer = document.getElementById('progress-container'); + if (progressContainer) { + progressContainer.style.display = 'none'; + } + }); + + kernel.on('all:ready', (data) => { + console.log('所有模块加载完,', data); + kernel.material.apply({ + target: 'Material__2', + attribute: 'alpha', + value: 0.5, + }); + }); + // ========== UI 交互逻辑 ========== // 折叠面板切换 @@ -509,14 +582,14 @@ 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); + // await placementWall(wall_divisions); } } @@ -799,7 +872,7 @@ }); // 初始化放置区域配置数据（只需设置一次） - const initPlacementZoneConfig = (divisions=3) => { + const initPlacementZoneConfig = (divisions = 3) => { // 只清除旧的放置区域网格，不清除模型 kernel.dropZone.clearZones(); @@ -826,7 +899,7 @@ divisions: divisions, offset: wallOffset // 向外或向内偏移 }, - + { name: 'back', startPoint: [1.37, baseY, 1.45], @@ -950,6 +1023,95 @@ console.error(`查询SKU配置或替换模型失败:`, error); } }); + + + + + // 存储当前选中的材质名和网格 + let currentMaterialName = ''; + let currentPickedMesh = null; + + kernel.on('model:click', (data) => { + console.log('模型点击事件', data); + console.log('模型控制类型:', data.modelControlType); + switch (data.modelControlType) { + case "color": + // DOM 2D转3D 示例：点击模型时显示信息框 + if (data.pickedMesh && data.pickedPoint) { + const meshName = data.pickedMesh.name; + const position = data.pickedPoint; // 使用点击位置的坐标 + currentMaterialName = data.materialName || ''; // 保存材质名 + currentPickedMesh = data.pickedMesh; // 保存网格对象 + + // 获取已创建的DOM元素 + const infoDiv = document.getElementById('model-info-box'); + // 更新信息内容 + document.getElementById('info-name').textContent = `名称: ${meshName}`; + document.getElementById('info-position').textContent = `坐标: [${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)}]`; + + // 显示颜色按钮，隐藏旋转按钮 + document.getElementById('color-buttons').style.display = 'flex'; + document.getElementById('rotation-buttons').style.display = 'none'; + + // 将DOM附加到点击的3D坐标（会自动显示） + kernel.domTo3D.attach('model-info', infoDiv, [position.x, position.y, position.z], { x: -2, y: -2 }); + } + break; + case "rotation": + // 显示旋转控制UI + if (data.pickedMesh && data.pickedPoint) { + const meshName = data.pickedMesh.name; + const position = data.pickedPoint; + currentPickedMesh = data.pickedMesh; // 保存网格对象 + + // 获取已创建的DOM元素 + const infoDiv = document.getElementById('model-info-box'); + // 更新信息内容 + document.getElementById('info-name').textContent = `名称: ${meshName}`; + document.getElementById('info-position').textContent = `坐标: [${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)}]`; + + // 显示旋转按钮，隐藏颜色按钮 + document.getElementById('rotation-buttons').style.display = 'flex'; + document.getElementById('color-buttons').style.display = 'none'; + + // 将DOM附加到点击的3D坐标（会自动显示） + kernel.domTo3D.attach('model-info', infoDiv, [position.x, position.y, position.z], { x: -2, y: -2 }); + } + break; + default: + break; + } + + }); + + // 暴露到全局，供 index.html 使用 + window.getCurrentMaterialName = () => currentMaterialName; + window.getCurrentPickedMesh = () => currentPickedMesh; + + // 暴露 kernel 到全局，方便调试 + + + kernel.on('hotspot:click', (event) => { + console.log('热点被点击:', event); + + const { id, name, payload } = event; + + if (payload && payload.skus && payload.skus.length > 0) { + console.log('热点关联的SKU列表:', payload.skus); + // 这里可以根据 SKU 列表做进一步处理，比如显示产品信息 + } else { + console.log('该热点没有关联SKU'); + } + + // if (name === "卷帘门") { + // kernel.door.toggle({ upY: 28, downY: 0, speed: 12 }); + + // // Y轴剖切，只作用于卷帘门网格，保留下方，剖掉上方 + // const clipHeight = 28; // 调整这个值找到合适的剖切高度 + // console.log('设置剖切:', clipHeight); + // kernel.clipping.setY(clipHeight, true, ['Box005.001', 'Box006.001']); + // } + }); diff --git a/index.js b/index.js index 08c6f27..e69de29 100644 --- a/index.js +++ b/index.js @@ -1,189 +0,0 @@ -import { kernel } from './src/main.ts'; -// import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js'; - -// const config = { -// container: document.querySelector('#renderDom'), -// modelUrlList: ['/assets/model.glb'], -// env: { envPath: '/assets/hdr.env', intensity: 1.2, rotationY: 0.3, background: false }, -// }; - -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); -}); - - -kernel.on('model:loaded', (data) => { - console.log('模型加载完成', data); - // 隐藏进度条 - const progressContainer = document.getElementById('progress-container'); - if (progressContainer) { - progressContainer.style.display = 'none'; - } -}); - -kernel.on('all:ready', (data) => { - console.log('所有模块加载完,', data); - kernel.material.apply({ - target: 'Material__2', - attribute: 'alpha', - value: 0.5, - }); - // kernel.hotspot.render([ - // { - // id: "h1", - // type: 'hotspot', - // name: "卷帘门", - // meshName: "Valve_01", - // icon: "https://bpic.588ku.com/element_pic/20/06/30/d1046b01afc0b9586844350d131f4daf.jpg!/fw/253/quality/90/unsharp/true/compress/true", - // position: [25, 25, 0], - // radius: 20, - // color: "#21c7ff", - // payload: { type: "valve", code: "A" }, - // }, - // ]); -}); - - -// 存储当前选中的材质名和网格 -let currentMaterialName = ''; -let currentPickedMesh = null; - -kernel.on('model:click', (data) => { - console.log('模型点击事件', data); - console.log('模型控制类型:', data.modelControlType); - switch (data.modelControlType) { - case "color": - // DOM 2D转3D 示例：点击模型时显示信息框 - if (data.pickedMesh && data.pickedPoint) { - const meshName = data.pickedMesh.name; - const position = data.pickedPoint; // 使用点击位置的坐标 - currentMaterialName = data.materialName || ''; // 保存材质名 - currentPickedMesh = data.pickedMesh; // 保存网格对象 - - // 获取已创建的DOM元素 - const infoDiv = document.getElementById('model-info-box'); - // 更新信息内容 - document.getElementById('info-name').textContent = `名称: ${meshName}`; - document.getElementById('info-position').textContent = `坐标: [${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)}]`; - - // 显示颜色按钮，隐藏旋转按钮 - document.getElementById('color-buttons').style.display = 'flex'; - document.getElementById('rotation-buttons').style.display = 'none'; - - // 将DOM附加到点击的3D坐标（会自动显示） - kernel.domTo3D.attach('model-info', infoDiv, [position.x, position.y, position.z], { x: -2, y: -2 }); - } - break; - case "rotation": - // 显示旋转控制UI - if (data.pickedMesh && data.pickedPoint) { - const meshName = data.pickedMesh.name; - const position = data.pickedPoint; - currentPickedMesh = data.pickedMesh; // 保存网格对象 - - // 获取已创建的DOM元素 - const infoDiv = document.getElementById('model-info-box'); - // 更新信息内容 - document.getElementById('info-name').textContent = `名称: ${meshName}`; - document.getElementById('info-position').textContent = `坐标: [${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)}]`; - - // 显示旋转按钮，隐藏颜色按钮 - document.getElementById('rotation-buttons').style.display = 'flex'; - document.getElementById('color-buttons').style.display = 'none'; - - // 将DOM附加到点击的3D坐标（会自动显示） - kernel.domTo3D.attach('model-info', infoDiv, [position.x, position.y, position.z], { x: -2, y: -2 }); - } - break; - default: - break; - } - -}); - -// 暴露到全局，供 index.html 使用 -window.getCurrentMaterialName = () => currentMaterialName; -window.getCurrentPickedMesh = () => currentPickedMesh; - -// 暴露 kernel 到全局，方便调试 - - -kernel.on('hotspot:click', (event) => { - console.log('热点被点击:', event); - - const { id, name, payload } = event; - - if (payload && payload.skus && payload.skus.length > 0) { - console.log('热点关联的SKU列表:', payload.skus); - // 这里可以根据 SKU 列表做进一步处理，比如显示产品信息 - } else { - console.log('该热点没有关联SKU'); - } - - // if (name === "卷帘门") { - // kernel.door.toggle({ upY: 28, downY: 0, speed: 12 }); - - // // Y轴剖切，只作用于卷帘门网格，保留下方，剖掉上方 - // const clipHeight = 28; // 调整这个值找到合适的剖切高度 - // console.log('设置剖切:', clipHeight); - // kernel.clipping.setY(clipHeight, true, ['Box005.001', 'Box006.001']); - // } -}); - -window.kernel = kernel; -// 添加模型到场景示例 -// await kernel.model.add({ modelId: '百叶1', modelUrl: 'https://sdk.zguiy.com/resurces/model/百叶1.glb', modelControlType: 'rotation' }); - -// 销毁模型 -// kernel.model.removeByName('car'); - -// 替换模型示例 -// await kernel.model.replace({ modelId: 'car', modelUrl: '/models/new-car.glb', modelControlType: 'color' }); - diff --git a/request.js b/request.js new file mode 100644 index 0000000..e69de29