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-04-24 19:17:31 +08:00
parent 6c94559383
commit 01fdc0ee37
18 changed files with 696 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
index.html
View File

@ -265,7 +265,7 @@
</div>
</div>
<!-- 百叶 (多选) -->
<!-- 百叶 (单选) -->
<div class="config-category">
<div class="category-header" data-category="louver">
<span class="category-title">百叶</span>
@ -273,22 +273,10 @@
</div>
<div class="category-content">
<div class="option-group">
<div class="option-checkbox">
<input type="checkbox" id="louver-1" data-option="louver-1">
<label for="louver-1">百叶1</label>
</div>
<div class="option-checkbox">
<input type="checkbox" id="louver-2" data-option="louver-2">
<label for="louver-2">百叶2</label>
</div>
<div class="option-checkbox">
<input type="checkbox" id="louver-3" data-option="louver-3">
<label for="louver-3">百叶3</label>
</div>
<div class="option-checkbox">
<input type="checkbox" id="louver-4" data-option="louver-4">
<label for="louver-4">百叶4</label>
</div>
<button class="option-btn" data-option="louver-1">百叶1</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>
</div>
</div>
</div>
@ -311,6 +299,69 @@
</div>
</div>
<!-- 模型信息框（用于2D转3D显示） -->
<div id="model-info-box" style="display: none;">
<div style="
background: rgba(255, 255, 255, 0.95);
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
font-size: 14px;
color: #333;
min-width: 200px;
">
<div style="font-weight: bold; margin-bottom: 8px; color: #4CAF50;">模型信息</div>
<div id="info-name" style="margin-bottom: 5px;">名称: -</div>
<div id="info-position" style="margin-bottom: 10px; font-size: 12px; color: #666;">坐标: -</div>
<div style="display: flex; gap: 8px; margin-bottom: 8px;">
<button id="color-btn-1" style="
flex: 1;
padding: 8px;
background: #FFFFFF;
color: #333;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
">白色</button>
<button id="color-btn-2" style="
flex: 1;
padding: 8px;
background: #000000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
">黑色</button>
</div>
<div style="display: flex; gap: 8px;">
<button id="remove-model-btn" style="
flex: 1;
padding: 8px;
background: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
">移除</button>
<button id="close-info-btn" style="
flex: 1;
padding: 8px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
">关闭</button>
</div>
</div>
</div>
<script type="module" src="./index.js"></script>
<script type="module">
import { kernel } from './src/main.ts';
@ -332,7 +383,7 @@
// 单选按钮逻辑
document.querySelectorAll('.option-btn').forEach(btn => {
btn.addEventListener('click', function () {
btn.addEventListener('click', async function () {
const optionGroup = this.parentElement;
const category = this.closest('.config-category');
const categoryName = category.querySelector('.category-header').dataset.category;
@ -360,6 +411,19 @@
value: this.dataset.option,
text: this.textContent
});
// 百叶模型替换逻辑
if (categoryName === "louver") {
const currentText = this.textContent;
const modelUrl = `https://sdk.zguiy.com/resurces/model/${currentText}.glb`;
console.log('替换百叶模型:', modelUrl);
try {
await kernel.model.replace('百叶', modelUrl);
console.log(`百叶模型已替换为 ${currentText}`);
} catch (error) {
console.error(`百叶模型替换失败:`, error);
}
}
});
});
@ -396,26 +460,6 @@
checked: this.checked,
currentValue: this.dataset.option
});
// 百叶模型加载/卸载逻辑
if (categoryName === "louver") {
const currentText = this.nextElementSibling.textContent;
const modelUrl = `https://sdk.zguiy.com/resurces/model/${currentText}.glb`;
console.log(modelUrl);
if (checked) {
// 加载模型
try {
await kernel.model.add(currentText, modelUrl);
console.log(`模型 ${currentText} 加载成功`);
} catch (error) {
console.error(`模型 ${currentText} 加载失败:`, error);
}
} else {
// 卸载模型
kernel.model.remove(currentText);
console.log(`模型 ${currentText} 已卸载`);
}
}
});
});
@ -434,6 +478,52 @@
// });
// }
});
// ========== 模型信息框按钮事件 ==========
// 关闭按钮事件
document.getElementById('close-info-btn').addEventListener('click', () => {
kernel.domTo3D.detach('model-info');
});
// 白色按钮事件
document.getElementById('color-btn-1').addEventListener('click', () => {
const materialName = window.getCurrentMaterialName();
if (materialName) {
console.log('切换为白色，材质名:', materialName);
kernel.material.color(materialName, '#FFFFFF');
} else {
console.log('没有选中材质');
}
});
// 黑色按钮事件
document.getElementById('color-btn-2').addEventListener('click', () => {
const materialName = window.getCurrentMaterialName();
if (materialName) {
console.log('切换为黑色，材质名:', materialName);
kernel.material.color(materialName, '#000000');
} else {
console.log('没有选中材质');
}
});
// 移除按钮事件
document.getElementById('remove-model-btn').addEventListener('click', () => {
const pickedMesh = window.getCurrentPickedMesh();
if (pickedMesh) {
const success = kernel.model.remove(pickedMesh);
if (success) {
console.log('模型已移除');
// 关闭信息框
kernel.domTo3D.detach('model-info');
} else {
console.log('移除失败：未找到该网格所属的模型');
}
} else {
console.log('没有选中的网格');
}
});
</script>
</body>