修改3D分布大屏 网络连线宽度

src/views/FactoryView/threeMap.vue

@@ -9,9 +9,11 @@ import * as TWEEN from '@tweenjs/tween.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
 import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 import { DragControls } from "@/utils/DragControls";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { Line2 } from 'three/examples/jsm/lines/Line2'
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
 import { useFactoryStore } from "@/store/module/Factory"
 import { useRouter } from 'vue-router';
 import { updateCoordinateByPoint } from "@/http/AerialView/index"
@@ -409,6 +411,9 @@ const init = () => {
     createWifi({ x: -89.13, y: 4, z: -245.33 })
     createWifi({ x: -132.07, y: 2, z: -245.33 })
     createWifi({ x: -222.31, y: 2, z: -245.33 })
+    createWifi({x:-87.78,y:2 ,z:-114.15})
+    createWifi({x:-176.45,y:2 ,z:-114.40})
+
     //家纺 医防
     createWifi({ x: 140.83, y: 2, z: -197.34 })
     createWifi({ x: 259.37, y: 2, z: -197.34 })
@@ -668,17 +673,37 @@ const init = () => {
 
 //创建线
 function createLine(color: number, pointsList: any) {
-    const material = new THREE.LineBasicMaterial({ color: color });
+    // const material = new THREE.LineBasicMaterial({ color: color });
-    const points = [];
+    // const points = [];
+    // pointsList.forEach(element => {
+    //     points.push(new THREE.Vector3(element.x, element.y, element.z));
+    // });
+
+    // const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    // const line = new THREE.Line(geometry, material);
+    // scene.add(line);
+    // renderer.render(scene, camera);
+
+    const geometry = new LineGeometry()
+    let pointList = []
     pointsList.forEach(element => {
-        points.push(new THREE.Vector3(element.x, element.y, element.z));
+        let {x,y,z} = element
+        let arr = [x,y,z]
+        pointList.push(...arr)
     });
+    geometry.setPositions(pointList)
     
-    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new LineMaterial({
-    const line = new THREE.Line(geometry, material);
+        color: color,
-    scene.add(line);
+        linewidth: 5
-    renderer.render(scene, camera);
+    })
-
+    material.resolution.set(iw, ih)
+    // 5. 创建 Line2
+    var line = new Line2(geometry, material);
+    // 6. 计算下线条长度
+    line.computeLineDistances();
+    // 7. 添加到场景
+    scene.add(line)
 }
 
 //创建wifi
@@ -687,7 +712,6 @@ function createWifi(position: positionType) {
 
     loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
         const mesh = gltf.scene.children[0];
-        console.log(mesh);
 
         const s = 0.3;
         mesh.scale.set(s, s, s);