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 17:57:51 +08:00
parent c018649eb4
commit 34d5643bf3
6 changed files with 166 additions and 3037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
index.html
View File

@ -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']);
// }
});
</script>
</body>