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-30 14:46:01 +08:00
parent 604dcdf3fb
commit 4207fcf7c2
15 changed files with 1038 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
index.js
View File

@ -12,13 +12,40 @@ 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: false
},
outline: {
enable: true,
color: "#2196F3",
thickness:1,
occlusionStrength:0.1,
occlusionThreshold:0.0002
}
};
kernel.init(config);
kernel.model.add("卷帘大", "https://sdk.zguiy.com/resurces/model/框架.glb")
kernel.model.add("卷帘大", "https://sdk.zguiy.com/resurces/model/卷帘大.glb")
kernel.model.add("卷帘小", "https://sdk.zguiy.com/resurces/model/卷帘小.glb")
kernel.model.add("小桌", "https://sdk.zguiy.com/resurces/model/小桌.glb")
kernel.model.add({
modelId: "框架",
modelUrl: "https://sdk.zguiy.com/resurces/model/框架.glb"
});
kernel.model.add({
modelId: "卷帘大",
modelUrl: "https://sdk.zguiy.com/resurces/model/卷帘大.glb",
modelControlType: "color"
});
kernel.model.add({
modelId: "卷帘小",
modelUrl: "https://sdk.zguiy.com/resurces/model/卷帘小.glb",
modelControlType: "color"
});
kernel.model.add({
modelId: "小桌",
modelUrl: "https://sdk.zguiy.com/resurces/model/小桌.glb",
modelControlType: "rotation"
});
kernel.on('model:load:progress', (data) => {
console.log('模型加载事件', data);
@ -64,28 +91,55 @@ let currentPickedMesh = null;
kernel.on('model:click', (data) => {
console.log('模型点击事件', 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 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)}]`;
console.log('点击位置的3D坐标:', position);
console.log('材质名:', currentMaterialName);
// 显示颜色按钮，隐藏旋转按钮
document.getElementById('color-buttons').style.display = 'flex';
document.getElementById('rotation-buttons').style.display = 'none';
// 获取已创建的DOM元素
const infoDiv = document.getElementById('model-info-box');
// 将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; // 保存网格对象
// 更新信息内容
document.getElementById('info-name').textContent = `名称: ${meshName}`;
document.getElementById('info-position').textContent = `坐标: [${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)}]`;
// 获取已创建的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)}]`;
// 将DOM附加到点击的3D坐标（会自动显示）
kernel.domTo3D.attach('model-info', infoDiv, [position.x, position.y, position.z], { x: -2, y: -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 使用
@ -109,12 +163,12 @@ kernel.on('hotspot:click', (data) => {
});
window.kernel = kernel;
// 添加模型到场景
// await kernel.model.add('https://sdk.zguiy.com/resurces/model/百叶1.glb');
// 添加模型到场景示例
// await kernel.model.add({ modelId: '百叶1', modelUrl: 'https://sdk.zguiy.com/resurces/model/百叶1.glb', modelControlType: 'rotation' });
// 销毁模型
// kernel.model.destroy('car');
// kernel.model.removeByName('car');
// 替换模型
// await kernel.model.replace('car', '/models/new-car.glb');
// 替换模型示例
// await kernel.model.replace({ modelId: 'car', modelUrl: '/models/new-car.glb', modelControlType: 'color' });