zhengte.babylonjs-sdk/index.js

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: [],
    env: { envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env', intensity: 1.2, rotationY: 0.3, background: true },
    gizmo: {
        position: true,
        rotation: true,
        scale: true
    },
    outline: {
        enable: true,
        color: "#2196F3",
        thickness: 1,
        occlusionStrength: 0.1,
        occlusionThreshold: 0.0002
    }
};

kernel.init(config);

const response = await fetch('http://localhost:3001/api/models/auto-load/list')
const data = await response.json()
const models = data.data  // 这就是模型列表

models.forEach(model => {
    console.log(model);
    // kernel.dropZone.setData(model.placement_zone);
    kernel.model.add({
        modelId: model.id,
        modelUrl: model.file_url,
        modelControlType: model.model_control_type,

    });
})

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",
    //         position: [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.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元素
                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)}]`;

                // 显示颜色按钮，隐藏旋转按钮
                document.getElementById('color-buttons').style.display = 'flex';
                document.getElementById('rotation-buttons').style.display = 'none';

                // 将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; // 保存网格对象

                // 获取已创建的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)}]`;

                // 显示旋转按钮，隐藏颜色按钮
                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 使用
window.getCurrentMaterialName = () => currentMaterialName;
window.getCurrentPickedMesh = () => currentPickedMesh;

// 暴露 kernel 到全局，方便调试


kernel.on('hotspot:click', (event) => {
    console.log('热点被点击:', event);

    const { id, name, payload } = event;

    if (payload && payload.skus && payload.skus.length > 0) {
        console.log('热点关联的SKU列表:', payload.skus);
        // 这里可以根据 SKU 列表做进一步处理，比如显示产品信息
    } else {
        console.log('该热点没有关联SKU');
    }

    // 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({ modelId: '百叶1', modelUrl: 'https://sdk.zguiy.com/resurces/model/百叶1.glb', modelControlType: 'rotation' });

// 销毁模型
// kernel.model.removeByName('car');

// 替换模型示例
// await kernel.model.replace({ modelId: 'car', modelUrl: '/models/new-car.glb', modelControlType: 'color' });