修改大屏

hw-ui/src/views/board/model/index.vue

@@ -8,11 +8,12 @@ import * as THREE from 'three';
 import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
 import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js';
 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
+import {CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
 
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 let a = 0
-let aa = true
+let lastModel = null
 export default {
   name: 'Model',
   components: {},
@@ -104,6 +105,21 @@ export default {
 
     animate();
 
+    const labelRenderer = new CSS2DRenderer();
+    labelRenderer.setSize(window.innerWidth, window.innerHeight);
+    labelRenderer.domElement.style.position = 'absolute';
+    labelRenderer.domElement.style.top = 0;
+    document.body.appendChild(labelRenderer.domElement);
+
+// 创建CSS2DObject
+    const label = document.createElement('div');
+    label.style.color = 'red';
+    label.innerHTML = '这是提示窗口';
+    const labelObject = new CSS2DObject(label);
+    labelObject.position.set(0, 1, 0); // 根据需要调整位置
+    scene.add(labelObject);
+
+
 
     // 创建一个raycaster实例
     var raycaster = new THREE.Raycaster();
@@ -112,7 +128,7 @@ export default {
     var mouse = new THREE.Vector2();
 
 // 监听鼠标点击事件
-    document.addEventListener('click', function (event) {
+    document.addEventListener('dblclick', function (event) {
       // 将鼠标位置转换为二维向量
       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
@@ -128,6 +144,11 @@ export default {
         // 获取第一个交点的对象
         var obj = intersects[0].object;
         console.log('Clicked object:', obj);
+        outlineObj(obj.parent)
+        // obj.parent.children.forEach(e => {
+        //   e.material.color.set(0xff0000);
+        // })
+        // obj.material.color.set(0xff0000);
         alert(obj.parent?.name || obj.name)
         // 你可以在这里添加你想要的逻辑，比如高亮被点击的模型等
       }