修改大屏

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

@@ -8,7 +8,7 @@ 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";
+import {CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
 
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@@ -89,38 +89,27 @@ export default {
     }
     // loadF(['quanzidongchaobaojizhaungpeixian'])
     // loadF(['1-1'])
-    loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8'])
+    loadF(['1-1', '1-2', '1-3'])
+    // loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8'])
     // loadF(['1-1','1-2','1-3','1-4','1changfang','2-1-1','2-2-1','2-2-2','2-3-1','3-1','3-2','3-2-1 200','3-3','3-4','3-5','3-6','3-7','3-8',])
 
 
-// 渲染循环
-    function animate() {
-      requestAnimationFrame(animate);
-      renderer.render(scene, camera);
-    }
-
-    setInterval(() => {
-      // console.log(camera)
-    }, 1000)
-
-    animate();
-
     const labelRenderer = new CSS2DRenderer();
     labelRenderer.setSize(window.innerWidth, window.innerHeight);
     labelRenderer.domElement.style.position = 'absolute';
     labelRenderer.domElement.style.top = 0;
+    labelRenderer.domElement.style.pointerEvents = 'none';
     document.body.appendChild(labelRenderer.domElement);
 
 // 创建CSS2DObject
     const label = document.createElement('div');
-    label.style.color = 'red';
+    label.style.color = '#fff';
     label.innerHTML = '这是提示窗口';
     const labelObject = new CSS2DObject(label);
-    labelObject.position.set(0, 1, 0); // 根据需要调整位置
+    labelObject.position.set(289, 1559, 1298); // 根据需要调整位置
     scene.add(labelObject);
 
 
-
     // 创建一个raycaster实例
     var raycaster = new THREE.Raycaster();
 
@@ -154,6 +143,20 @@ export default {
       }
     }, false);
 
+
+// 渲染循环
+    function animate() {
+      requestAnimationFrame(animate);
+      renderer.render(scene, camera);
+      labelRenderer.render(scene, camera);
+    }
+
+    setInterval(() => {
+      // console.log(camera)
+    }, 1000)
+
+    animate();
+
   },
   methods: {}
 }