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-22 13:33:13 +08:00
parent c504fca3de
commit 84c8752e0b
17 changed files with 361939 additions and 921 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
examples/app-global.js
View File

@ -15,6 +15,9 @@ const initApp = (kernel) => {
return kernelInstance;
};
//全局唯一棚子sku
let pergolaSku = ""
/**
* 获取当前 kernel 实例
*/
@ -32,7 +35,7 @@ const init = async (customConfig = {}) => {
const defaultConfig = {
container: document.querySelector('#renderDom'),
modelUrlList: [],
env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
env: { envPath: 'https://cdn.files.zguiy.com/zt/environment.env', intensity: 1.2, rotationY: 0.3, background: false },
gizmo: {
position: false,
rotation: false,
@ -57,15 +60,15 @@ const getAutoLoadModelList = async () => {
const kernel = getKernel();
const url = getApiUrl('/api/models/auto-load/list')
console.log('API URL:', url)
const response = await fetch(url)
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,
@ -78,6 +81,7 @@ const getAutoLoadModelList = async () => {
}
kernel.model.add({
modelName: model.name + '_' + model.category,
modelId: model.category,
modelUrl: model.file_url,
modelControlType: model.model_control_type,
@ -88,7 +92,45 @@ const getAutoLoadModelList = async () => {
//获取放置区域
const getPlacementZone = async (sku) => {
//pergolaSku 是需要在加载棚子的时取其引用，传进来的sku则是配件的sku，根据配件的sku来判断放置区域
const kernel = getKernel();
let division_include = []
// 同时包含10和13
const only10_13 = /(?=.*10)(?=.*13)/.test(pergolaSku)
// 只包含10 无13 无12
const only10 = /(?=.*10)(?!.*13)(?!.*12)/.test(pergolaSku)
// 同时包含10和12
const only10_12 = /(?=.*10)(?=.*12)/.test(pergolaSku)
// 1. 只要字符串里包含 10，就返回 true
const has10 = /10/.test(sku);
// 2. 只要字符串里包含 13，就返回 true
const has13 = /13/.test(sku);
// 2. 只要字符串里包含 12，就返回 true
const has12 = /12/.test(sku);
//棚子包含10，不包含13 并且配件是10 说明是正方体 或者是10*20的
if (only10 && has10) {
division_include.push('前', '后', '左', '右', "前1", "后1", "前2", "后2")
}
//棚子同时包10和13的并且含配件是10
if (only10_13 && has10) {
division_include.push('左', '右')
}
//棚子同时包10和13的并且含配件是13
if (only10_13 && has13) {
division_include.push('前', '后')
}
//棚子同时包10和12的并且含配件是12
if (only10_12 && has12) {
division_include.push('前', '后')
}
//棚子同时包10和12的并且含配件是10
if (only10_12 && has10) {
division_include.push('左', '右')
}
const response = await fetch(getApiUrl(`/api/product-configs/by-sku/${sku}`));
const result = await response.json();
@ -97,11 +139,14 @@ const getPlacementZone = async (sku) => {
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);
const filteredDivisions = wall_divisions.filter(item => division_include.includes(item.name))
console.log(filteredDivisions);
// 只清除旧的放置区域网格，不清除模型
kernel.dropZone.clearZones();
const divisions = wall_divisions.map(wall => ({
name: wall.name, // 获取最后一个下划线后的部分
const divisions = filteredDivisions.map(wall => ({
name: wall.name,
divisions: wall.divisions
}))
@ -114,6 +159,7 @@ const getPlacementZone = async (sku) => {
//执行事件
const getEvent = async (dropzone_data, sku) => {
// 将模型放置到该区域
try {
const response = await fetch(getApiUrl(`/api/product-configs/by-sku/${sku}`));
@ -124,7 +170,7 @@ const getEvent = async (dropzone_data, sku) => {
console.log('关联事件:', result.data.events);
// 使用 for...of 循环以支持 await
await executeEvent(dropzone_data, result)
await executeEvent(dropzone_data, result, sku)
} else {
console.log(`未查询到数据`);
}
@ -133,15 +179,17 @@ const getEvent = async (dropzone_data, sku) => {
}
}
//点击放置区域执行事件
const executeEvent = async (dropzone_data, result) => {
const kernel = getKernel();
//点击放置区域执行事件 一般是换配件
const executeEvent = async (dropzone_data, result, sku) => {
const kernel = getKernel();
const { wallName, index, transform } = dropzone_data;
const { position, rotation } = transform;
let modelId = null; // 在外部声明，用于在两个循环之间传递
let modelName = null;
let pergolaSku = null; // 用于存储棚子的 SKU
// 第一次循环：处理 change_model
for (const event of result.data.events) {
if (event.event_type === 'change_model') {
@ -191,6 +239,18 @@ const executeEvent = async (dropzone_data, result) => {
console.log(`百叶模型颜色已替换为 ${color}`);
}
}
// 查找棚子的 SKU（从已加载的模型中查找 model_control_type 为 'pergola' 的模型）
const allModels = kernel.model.getAllMetadata();
for (const model of allModels) {
if (model.modelControlType === 'pergola') {
// 棚子模型找到了，可以在这里做其他处理
console.log('找到棚子模型:', model.modelId);
break;
}
}
return pergolaSku;
}
/**
@ -205,7 +265,7 @@ const isModelExists = (modelId) => {
}
//一般是换棚子/换颜色/设置放置区域
const executeEvent2 = async (result) => {
const executeEvent2 = async (result, sku) => {
const kernel = getKernel();
// 检查是否有模型更换事件
@ -221,19 +281,18 @@ const isModelExists = (modelId) => {
console.log(`检查模型 ${name + '_' + category} 是否存在:`, modelAlreadyExists);
}
}
kernel.dropZone.hide();
// 只有在需要更换模型且模型不存在时才清除
if (hasModelChange && !modelAlreadyExists) {
console.log('模型不存在，执行清除操作');
kernel.model.removeAll();
} else if (modelAlreadyExists) {
kernel.dropZone.hide();
console.log('模型已存在，跳过清除操作，仅更新材质');
}
// 先处理所有 change_model 事件
for (const event of result.data.events) {
console.log(event);
if (event.event_type === 'change_model') {
const { target_data } = event;
console.log(event.target_data);
@ -338,12 +397,19 @@ const getProductConfig = async (sku) => {
if (result.code === 200) {
console.log(result.data);
const { enable_placement_zone } = result.data;
// await initPlacementZoneConfig();
//如果触发的是配件，需要显示放置区域
if (enable_placement_zone) {
if (pergolaSku === "") {
console.error("请先加载棚子模型")
return;
}
getPlacementZone(sku)
}
//如果触发的是换棚子模型
else {
executeEvent2(result)
pergolaSku = sku;
executeEvent2(result, sku)
}
}
} catch (error) {