1
This commit is contained in:
120
examples/index.js
Normal file
120
examples/index.js
Normal file
@ -0,0 +1,120 @@
|
||||
import { kernel } from './index copy.js';
|
||||
|
||||
// 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: [],
|
||||
env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
|
||||
};
|
||||
|
||||
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.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,
|
||||
});
|
||||
kernel.hotspot.render([
|
||||
{
|
||||
id: "h1",
|
||||
type: 'hotspot',
|
||||
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" },
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
// 存储当前选中的材质名和网格
|
||||
let currentMaterialName = '';
|
||||
let currentPickedMesh = null;
|
||||
|
||||
kernel.on('model:click', (data) => {
|
||||
console.log('模型点击事件', data);
|
||||
console.log(data);
|
||||
|
||||
// DOM 2D转3D 示例:点击模型时显示信息框
|
||||
if (data.pickedMesh && data.pickedPoint) {
|
||||
const meshName = data.pickedMesh.name;
|
||||
const position = data.pickedPoint; // 使用点击位置的坐标
|
||||
currentMaterialName = data.materialName || ''; // 保存材质名
|
||||
currentPickedMesh = data.pickedMesh; // 保存网格对象
|
||||
|
||||
console.log('点击位置的3D坐标:', position);
|
||||
console.log('材质名:', currentMaterialName);
|
||||
|
||||
// 获取已创建的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 });
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露到全局,供 index.html 使用
|
||||
window.getCurrentMaterialName = () => currentMaterialName;
|
||||
window.getCurrentPickedMesh = () => currentPickedMesh;
|
||||
|
||||
// 暴露 kernel 到全局,方便调试
|
||||
|
||||
|
||||
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']);
|
||||
}
|
||||
});
|
||||
|
||||
window.kernel = kernel;
|
||||
// 添加模型到场景
|
||||
// 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');
|
||||
|
||||
Reference in New Issue
Block a user