diff --git a/public/models/glb/server.glb b/public/models/glb/server.glb new file mode 100644 index 0000000..9ffa746 Binary files /dev/null and b/public/models/glb/server.glb differ diff --git a/src/views/FactoryView/threeMap.vue b/src/views/FactoryView/threeMap.vue index 885d615..5b2168f 100644 --- a/src/views/FactoryView/threeMap.vue +++ b/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 = { @@ -894,7 +995,7 @@ function sethoveMesh() { ); if (!edit) { - dragControls.deactivate(); + dragControls.deactivate(); } dragControls.addEventListener("hoveron", function (event: any) { saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')