修改3D分布图 根据需求确认交换机和光猫、AC,光纤线和网线位置重新修改

src/assets/css/newicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4025145 */
-  src: url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff2?t=1684721703109') format('woff2'),
+  src: url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff2?t=1684836220462') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff?t=1684721703109') format('woff'),
+       url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff?t=1684836220462') format('woff'),
-       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.ttf?t=1684721703109') format('truetype');
+       url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.ttf?t=1684836220462') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhongduananquanjierukongzhiqi:before {
+  content: "\e649";
+}
+
+.icon-guangmao:before {
+  content: "\e612";
+}
+
 .icon-WIFI:before {
   content: "\e63f";
 }

src/views/FactoryView/statusBar.vue

@@ -31,9 +31,14 @@
               <div> &nbsp; 16/16</div>
             </li>
             <li>
-              <i class="iconfont icon-tuoputu_jiaohuanjizu icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              <i class="iconfont icon-guangmao icon-logo"></i> &nbsp;&nbsp;&nbsp;
-              交换机
+              光猫
-              <div> &nbsp; 10/10</div>
+              <div> &nbsp; 9/9</div>
+            </li>
+            <li>
+              <i class="iconfont icon-zhongduananquanjierukongzhiqi icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              AC
+              <div> &nbsp; 3/3</div>
             </li>
           </ul>
         </div>

src/views/FactoryView/threeMap.vue

@@ -67,7 +67,8 @@ const requires = {
     'door': require("@/assets/img/Factory/door.jpg"),
     'sky': require("@/assets/img/Factory/sky.jpg"),
     'titleFloor': require("@/assets/img/Factory/screen_title.png"),
-    'switch': require("@/assets/img/Factory/switch.jpg"),
+    'guangmao': require("@/assets/img/Factory/guangmao.jpg"),
+    'ac': require("@/assets/img/Factory/ac.jpg"),
 }
 
 const workerShopRoute = {
@@ -381,7 +382,7 @@ const init = () => {
     createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
     //放置服务器
     createGlb()
-    /*放置交换机************/
+    /*放置光猫************/
     //汽车军团
     createSwitch({ x: -287.44, y: 0, z: 19.24 })
     //精加车间
@@ -389,8 +390,6 @@ const init = () => {
     createSwitch({ x: -208.35, y: 0, z: 107.47 })
     //机加车间
     createSwitch({ x: -40.22, y: 0, z: 19.90 })
-    //服装军团
-    createSwitch({ x: -81.96, y: 0, z: -283.33 })
     //电控分厂
     createSwitch({ x: -232.96, y: 0, z: -64.48 })
     //大配套中心
@@ -401,7 +400,18 @@ const init = () => {
     createSwitch({ x: 88.55, y: 0, z: -214.89 })
     //二道岗
     createSwitch({ x: 306.5, y: 0, z: 5.43 })
-    /*交换机结束********************************* */
+    /*光猫结束********************************* */
+
+
+    /**创建ac */
+    createAc({x:52.56,y:0,z:52.24})
+    //服装军团
+    createAc({x:-88.39,y:0,z:-249.36})
+    createAc({x:82.99,y:0,z:-170.17})
+
+    /**创建AC结束 */
+
+
     /*创建wifi */
     //机加
     createWifi({ x: -46.96, y: 2, z: 156.57 })
@@ -418,8 +428,8 @@ 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: -119.3, y: 2, z: -114.15 })
-    createWifi({x:-176.45,y:2 ,z:-114.40})
+    createWifi({ x: -176.45, y: 2, z: -114.40 })
 
     //家纺 医防
     createWifi({ x: 140.83, y: 2, z: -197.34 })
@@ -429,30 +439,40 @@ const init = () => {
 
 
 
-    /*创建红线******************/
+    /*创建第一条线******************/
-    let redLine = 0xF47378;
+    let garyLine = 0x595959;
-    createLine(redLine, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }])
+    let whiteColor = 0xffffff;
+    createLine(whiteColor, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }], 1)
     //服装
-    createLine(redLine, [
+    createLine(whiteColor, [
         { x: -345.65, y: 2, z: 36.40 },
         { x: 22.67, y: 2, z: 36.40 },
         { x: 22.67, y: 2, z: -25.70 },
+    ], 1)
+    createLine(garyLine, [
+        { 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(garyLine, [{x:-88.73,y:2,z:-249.01},{x:-88.73,y:2,z:-117.33} , { x: -174.65, y: 2, z: -117.33 }])
     //汽车军团
-    createLine(redLine, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }])
+    createLine(whiteColor, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }], 1)
     //机加
-    createLine(redLine, [
+    createLine(whiteColor, [
         { x: -114.64, y: 2, z: 36.40 },
         { x: -114.64, y: 2, z: 52.42 },
         { x: -46.13, y: 2, z: 52.90 },
+    ], 1)
+
+    createLine(garyLine, [
+        { x: -46.13, y: 2, z: 52.90 },
         { x: -46.13, y: 2, z: 153.05 }
     ])
     //家纺医防
-    createLine(redLine, [
+    createLine(garyLine, [
         { x: 27.47, y: 2, z: -26.11 },
         { x: 27.47, y: 2, z: -248.85 },
         { x: 69.26, y: 2, z: -248.85 },
@@ -465,46 +485,65 @@ const init = () => {
         { x: 141.66, y: 2, z: -200.86 },
     ])
 
-    //创建黄线
+
-    let yellowLine = 0xFFF766;
+    //创建第二条线
     //横线 主干道
-    createLine(yellowLine, [
+    createLine(whiteColor, [
         { 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 }
+    ], 1)
+    createLine(garyLine, [
         { x: 306.56, y: 2, z: 40.43 },
         { x: 306.56, y: 2, z: 235.28 }
     ])
     //精加
-    createLine(yellowLine, [
+    createLine(whiteColor, [
         { x: -164.26, y: 2, z: 30.98 },
+        { x: -164.26, y: 2, z: 140.05 }
+
+    ],1)
+    createLine(garyLine, [
         { x: -164.26, y: 2, z: 140.05 },
         { x: -214.35, y: 2, z: 140.05 }
 
     ])
     //大件 总---精饰
-    createLine(yellowLine, [
+    createLine(garyLine, [
-        { x: -0.71, y: 2, z: 30.98 },
+    { x: 26.61, y: 2, z: -27.08 },
-        { x: -0.71, y: 2, z: 53.16 },
+        { x: 26.61, y: 2, z: 39.27 },
+        { x: -0.90, y: 2, z: 39.27 },
+        {x:-0.90,y:2,z:52.24},
         { x: 133.97, y: 2, z: 53.16 },
         { x: 133.97, y: 2, z: 154.31 }
     ])
     //大件 分
-    createLine(yellowLine, [
+    createLine(garyLine, [
         { x: 53.43, y: 2, z: 53.16 },
         { x: 53.43, y: 2, z: 154.31 }
     ])
-
+/**
+ * 
+        { x: 26.61, y: 2, z: -27.08 },
+        { x: 26.61, y: 2, z: 39.27 },
+        { x: -0.90, y: 2, z: 39.27 },
+        { x: 53.43, y: 2, z: 154.31 }
+ */
     //电控
-    createLine(yellowLine, [
+    createLine(whiteColor, [
         { x: -292.24, y: 2, z: 30.98 },
         { x: -242.61, y: 2, z: -30.90 }
-    ])
+    ], 1)
     //家纺 医防
-    createLine(yellowLine, [
+    createLine(whiteColor, [
         { x: 18.30, y: 2, z: 30.98 },
+        { x: 18.30, y: 2, z: -28.94 }
+    ], 1)
+    //家纺 医防
+    createLine(garyLine, [
         { x: 18.30, y: 2, z: -28.94 },
         { x: 25.64, y: 2, z: -28.94 },
         { x: 25.64, y: 2, z: -251.40 },
@@ -512,6 +551,10 @@ const init = () => {
         { x: 71.44, y: 2, z: -183.05 },
         { x: 83.96, y: 2, z: -183.05 }
     ])
+    createLine(whiteColor, [
+        { x: 18.30, y: 2, z: 30.98 },
+        { x: 18.30, y: 2, z: -28.94 }
+    ],1)
 
     setTipDom()
     sethoveMesh()
@@ -562,7 +605,7 @@ const init = () => {
         const intersects = raycaster.intersectObjects(scene.children);
         if (intersects.length > 0) {
             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) + "}",selected.object.name);
+            console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}", selected.object.name);
             // console.log("非正常坐标", "{x:" + (+selected.point.x - 0.83).toFixed(2) + ",y:2 ,z:" + (selected.point.z + 3.52).toFixed(2) + "}");
             let workerShop = intersects[0]?.object?.name
             if (workerShopRoute.hasOwnProperty(workerShop) && !edit) {
@@ -679,7 +722,7 @@ const init = () => {
 
 
 //创建线
-function createLine(color: number, pointsList: any) {
+function createLine(color: number, pointsList: any, width: number = 4) {
     // const material = new THREE.LineBasicMaterial({ color: color });
     // const points = [];
     // pointsList.forEach(element => {
@@ -694,21 +737,21 @@ function createLine(color: number, pointsList: any) {
     const geometry = new LineGeometry()
     let pointList = []
     pointsList.forEach(element => {
-        let {x,y,z} = element
+        let { x, y, z } = element
-        let arr = [x,y,z]
+        let arr = [x, y, z]
         pointList.push(...arr)
     });
     geometry.setPositions(pointList)
 
     const material = new LineMaterial({
         color: color,
-        transparent:true,
+        transparent: true,
-        opacity: 0.5,
+        // opacity: 0.5,
-        dashed:true,
+        dashed: width !== 1?true:false,
         dashScale: 1,
         dashSize: 3,
         gapSize: 1,
-        linewidth: 4
+        linewidth: width
     })
     //console.log(material,'material');
 
@@ -767,9 +810,28 @@ function createWifi(position: positionType) {
 //     });
 // }
 
-const createSwitch = ( boxposition: positionType, shadow: boolean = true): object => {
+const createSwitch = (boxposition: positionType, shadow: boolean = true): object => {
 
-const wallTexture = new THREE.TextureLoader().load(requires.switch);
+    const wallTexture = new THREE.TextureLoader().load(requires.guangmao);
+    const wall = new THREE.BoxGeometry(15, 5, 10);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: 0xe7e7e7,
+        transparent: true,
+    });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    // 物体移动位置
+    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+    wallMesh.position.set(boxposition.x - 6, 5 + boxposition.y, boxposition.z + 33.73);
+    // 将立方体添加到场景中
+    group.add(wallMesh)
+    return wallMesh
+}
+
+const createAc = (boxposition: positionType, shadow: boolean = true): object => {
+
+const wallTexture = new THREE.TextureLoader().load(requires.ac);
 const wall = new THREE.BoxGeometry(15, 5, 10);
 const wallMaterial = new THREE.MeshPhongMaterial({
     map: wallTexture,
@@ -780,9 +842,7 @@ const wallMaterial = new THREE.MeshPhongMaterial({
 const wallMesh = new THREE.Mesh(wall, wallMaterial);
 // 物体移动位置
 // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
-wallMesh.position.set(boxposition.x-6, 5 + boxposition.y, boxposition.z+33.73);
+wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z);
-// 对象是否渲染到阴影贴图当中
-wallMesh.castShadow = shadow;
 // 将立方体添加到场景中
 group.add(wallMesh)
 return wallMesh
@@ -985,7 +1045,7 @@ function createFloor(houseName: string, baseWidth: number, baseLength: number, p
     const texture = new THREE.TextureLoader().load(requires.wood);
     //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2
     const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength);
-    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true});
+    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
     const mesh = new THREE.Mesh(floor, material);
     const { x, y, z } = position
     mesh.position.set(x, y + 1 / 2, z);