109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import { kernel } from './src/main.ts';
|
||
|
||
// import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js';
|
||
|
||
// const config = {
|
||
// container: document.querySelector('#renderDom'),
|
||
// modelUrlList: ['/assets/model.glb'],
|
||
// env: { envPath: '/assets/hdr.env', intensity: 1.2, rotationY: 0.3, background: false },
|
||
// };
|
||
|
||
const config = {
|
||
container: document.querySelector('#renderDom'),
|
||
modelUrlList: ['https://sdk.zguiy.com/resurces/model/model.glb'],
|
||
env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
|
||
};
|
||
|
||
kernel.init(config);
|
||
|
||
|
||
|
||
kernel.on('model:load:progress', (data) => {
|
||
console.log('模型加载事件', data);
|
||
|
||
|
||
|
||
const progress = data.progress || 0;
|
||
const progressBar = document.getElementById('progress-bar');
|
||
const progressText = document.getElementById('progress-text');
|
||
const progressContainer = document.getElementById('progress-container');
|
||
|
||
if (progressContainer) {
|
||
progressContainer.style.display = 'block';
|
||
}
|
||
if (progressBar) {
|
||
progressBar.style.width = `${progress * 100}%`;
|
||
}
|
||
if (progressText) {
|
||
progressText.textContent = `${Math.round(progress * 100)}%`;
|
||
}
|
||
});
|
||
|
||
|
||
|
||
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,
|
||
});
|
||
|
||
|
||
kernel.hotspot.render([
|
||
{
|
||
id: "h1",
|
||
name: "卷帘门",
|
||
meshName: "Valve_01",
|
||
icon: "https://bpic.588ku.com/element_pic/20/06/30/d1046b01afc0b9586844350d131f4daf.jpg!/fw/253/quality/90/unsharp/true/compress/true",
|
||
offset: [25, 25, 0],
|
||
radius: 20,
|
||
color: "#21c7ff",
|
||
payload: { type: "valve", code: "A" },
|
||
},
|
||
]);
|
||
});
|
||
|
||
|
||
kernel.on('model:click', (data) => {
|
||
console.log('模型点击事件', data);
|
||
console.log(data);
|
||
|
||
});
|
||
|
||
kernel.on('hotspot:click', (data) => {
|
||
console.log('热点被点击:', data);
|
||
const { id, name } = data
|
||
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']);
|
||
}
|
||
});
|
||
|
||
|
||
// 添加模型到场景
|
||
// await kernel.model.add('https://sdk.zguiy.com/resurces/model/百叶1.glb');
|
||
|
||
// 销毁模型
|
||
// kernel.model.destroy('car');
|
||
|
||
// 替换模型
|
||
// await kernel.model.replace('car', '/models/new-car.glb');
|
||
|