修改大屏分布图 添加网络分布

src/views/FactoryView/threeMap.vue

@@ -11,6 +11,7 @@ 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 { useFactoryStore } from "@/store/module/Factory"
 import { useRouter } from 'vue-router';
 import { updateCoordinateByPoint } from "@/http/AerialView/index"
@@ -369,7 +370,72 @@ const init = () => {
 
 
     createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
+    //放置服务器
+    createGlb()
 
+    //创建红线
+    let redLine = 0xff0000;
+    createLine(redLine,[{x:-346.00,y:23.6,z:59.40},{x:-160.50,y:0,z:134.08}])
+    //服装
+    createLine(redLine,[
+        {x:-345.65,y:23.3,z:36.40},
+        {x:22.67,y:2,z:36.40},
+        {x:22.67,y:2,z:-25.70},
+        {x:-47.67,y:2,z:-25.70},
+        {x:-47.67,y:2,z:-248.85},
+        {x:-221.76,y:2,z:-248.85}
+    ])
+    createLine(redLine,[{x:-47.67,y:2,z:-117.33},{x:-174.65,y:2,z:-117.33}])
+    //汽车军团
+    createLine(redLine,[{x:-293.44,y:0,z:52.52},{x:-293.44,y:19.28,z:36.40},{x:-235.84,y:0,z:-30.87}])
+    //机加
+    createLine(redLine,[
+        {x:-114.64,y:2,z:36.40},
+        {x:-114.64,y:2,z:52.42},
+        {x:-46.13,y:2,z:52.90},
+        {x:-46.13,y:2,z:153.05}
+    ])
+    //家纺医防
+    createLine(redLine,[
+        {x:27.47,y:2,z:-26.11},
+        {x:27.47,y:2,z:-248.85},
+        {x:69.26,y:2,z:-248.85},
+        {x:69.26,y:2,z:-180.29},
+        {x:85.51,y:2,z:-180.29},
+        {x:141.66,y:2,z:-200.86},
+        {x:260.42,y:2,z:-200.86},
+        {x:260.42,y:2,z:-115.33},
+        {x:141.66,y:2,z:-115.33},
+        {x:141.66,y:2,z:-200.86},
+    ])
+
+    //创建黄线
+    let yellowLine = 0xffff00;
+    //横线 主干道
+    createLine(yellowLine,[
+        {x:-341.87,y:2,z:30.98},
+        {x:111.97,y:2,z:30.98},
+        {x:111.97,y:2,z:175.55},
+        {x:294.54,y:2,z:175.55},
+        {x:294.54,y:2,z:40.43},
+        {x:306.56,y:2,z:40.43},
+        {x:306.56,y:2,z:235.28}
+    ])
+    //电控
+    createLine(yellowLine,[
+        {x:-292.24,y:2,z:30.98},
+        {x:-242.61,y:2,z:-30.90}
+    ])
+    //家纺 医防
+    createLine(yellowLine,[
+        {x:18.30,y:2,z:30.98},
+        {x:18.30,y:2,z:-28.94},
+        {x:25.64,y:2,z:-28.94},
+        {x:25.64,y:2,z:-251.40},
+        {x:71.44,y:2,z:-251.40},
+        {x:71.44,y:2,z:-183.05},
+        {x:83.96,y:2,z:-183.05}
+    ])
 
     setTipDom()
     sethoveMesh()
@@ -422,8 +488,8 @@ const init = () => {
             var selected = intersects[0]; //取第一个物体
             console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}");
             let workerShop = intersects[0]?.object?.name
-            if (workerShopRoute.hasOwnProperty(workerShop)&&!edit) {
-                router.push({ path: workerShopRoute[workerShop] })
+            if (workerShopRoute.hasOwnProperty(workerShop) && !edit) {
+                //router.push({ path: workerShopRoute[workerShop] })
             }
 
         }
@@ -535,6 +601,41 @@ const init = () => {
 
 
 
+//创建线
+function createLine(color: number,pointsList: any) {
+    const material = new THREE.LineBasicMaterial({ color: color });
+    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);
+
+}
+//创建服务器
+function createGlb() {
+    const loader = new GLTFLoader();
+
+    loader.load('/models/glb/server.glb', function (gltf) {
+        const mesh = gltf.scene.children[0];
+
+        const s = 0.12;
+        mesh.scale.set(s, s, s);
+        mesh.position.set(-346, 0, 51);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        scene.add(mesh);
+
+    }, undefined, function (error) {
+
+        console.error(error);
+
+    });
+}
+
 
 
 type positionType = {