zhengte/zhengte.babylonjs-sdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
zguiy
2026-05-16 20:04:02 +08:00
parent 34d5643bf3
commit f76b19697c
5 changed files with 234 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
index.html
View File

@ -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();
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 initPlacementZoneConfig();
}
// 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],
endPoint: [1.73, baseY, -1.45],
startPoint: [-1.45, 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],
endPoint: [-1.37, baseY, 1.45],
startPoint: [1.45, baseY, 1.45],
endPoint: [-1.45, baseY, 1.45],
height: height,
divisions: divisions,
offset: wallOffset
},
{
name: 'left',
startPoint: [-1.75, baseY, 1.45],
endPoint: [-1.75, baseY, -1.45],
startPoint: [-1.45, baseY, 1.45],
endPoint: [-1.45, baseY, -1.45],
height: height,
divisions: divisions,
offset: wallOffset
},
{
name: 'right',
startPoint: [1.75, baseY, -1.45],
endPoint: [1.75, baseY, 1.45],
startPoint: [1.45, 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);
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);
}
executeEvent(dropzone_data,sku)
});