1

index.js

@@ -10,33 +10,19 @@ import { kernel } from './src/main.ts';
 
 const config = {
     container: document.querySelector('#renderDom'),
-    modelUrlList: ['https://sdk.zguiy.com/resurces/model/model.glb'],
+    modelUrlList: ['https://sdk.zguiy.com/resurces/model/框架.glb'],
     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);
-
-
-
-    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)}%`;
-    }
 });
 
 
@@ -65,6 +51,7 @@ kernel.on('all:ready', (data) => {
     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",
@@ -77,12 +64,43 @@ kernel.on('all:ready', (data) => {
 });
 
 
+// 存储当前选中的材质名和网格
+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
@@ -96,7 +114,7 @@ kernel.on('hotspot:click', (data) => {
     }
 });
 
-
+window.kernel = kernel;
 // 添加模型到场景
 // await kernel.model.add('https://sdk.zguiy.com/resurces/model/百叶1.glb');