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

2023-05-23 18:47:28 +08:00 · 2023-05-23 18:47:28 +08:00 · 672983f2ad
commit 672983f2ad
parent 0f9feb98df
5 changed files with 123 additions and 50 deletions
--- a/src/assets/css/newicon/iconfont.css
+++ b/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'),
-       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff?t=1684721703109') format('woff'),
-       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.ttf?t=1684721703109') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff2?t=1684836220462') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4025145_25o1en7emhw.woff?t=1684836220462') format('woff'),
+       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";
 }
--- a/src/assets/img/Factory/ac.jpg
+++ b/src/assets/img/Factory/ac.jpg
--- a/src/assets/img/Factory/guangmao.jpg
+++ b/src/assets/img/Factory/guangmao.jpg
--- a/src/views/FactoryView/statusBar.vue
+++ b/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;
-              交换机
-              <div> &nbsp; 10/10</div>
+              <i class="iconfont icon-guangmao icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              光猫
+              <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>
--- a/src/views/FactoryView/threeMap.vue
+++ b/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,7 +428,7 @@ 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 })

    //家纺 医防
@ -429,30 +439,40 @@ const init = () => {



-    /*创建红线******************/
-    let redLine = 0xF47378;
-    createLine(redLine, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }])
+    /*创建第一条线******************/
+    let garyLine = 0x595959;
+    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, [
-        { x: -0.71, y: 2, z: 30.98 },
-        { x: -0.71, y: 2, z: 53.16 },
+    createLine(garyLine, [
+    { 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:-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()
@ -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 => {
@ -703,12 +746,12 @@ function createLine(color: number, pointsList: any) {
    const material = new LineMaterial({
        color: color,
        transparent: true,
-        opacity: 0.5,
-        dashed:true,
+        // opacity: 0.5,
+        dashed: width !== 1?true:false,
        dashScale: 1,
        dashSize: 3,
        gapSize: 1,
-        linewidth: 4
+        linewidth: width
    })
    //console.log(material,'material');

@ -769,7 +812,7 @@ function createWifi(position: positionType) {

 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,
@ -781,8 +824,25 @@ 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.castShadow = shadow;
+    // 将立方体添加到场景中
+    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,
+    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, 5 + boxposition.y, boxposition.z);
 // 将立方体添加到场景中
 group.add(wallMesh)
 return wallMesh