修改3D分布大屏 网络连线宽度
This commit is contained in:
hzz
parent
e7974b1e49
commit
c8f6fe23b6
@ -9,9 +9,11 @@ import * as TWEEN from '@tweenjs/tween.js';
|
|||||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||||
import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
|
import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
|
||||||
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.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 { DragControls } from "@/utils/DragControls";
|
||||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
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 { useFactoryStore } from "@/store/module/Factory"
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { updateCoordinateByPoint } from "@/http/AerialView/index"
|
import { updateCoordinateByPoint } from "@/http/AerialView/index"
|
||||||
@ -374,46 +376,49 @@ const init = () => {
|
|||||||
createGlb()
|
createGlb()
|
||||||
/*放置交换机************/
|
/*放置交换机************/
|
||||||
//汽车军团
|
//汽车军团
|
||||||
createSwitch({x:-287.44,y:0 ,z:19.24})
|
createSwitch({ x: -287.44, y: 0, z: 19.24 })
|
||||||
//精加车间
|
//精加车间
|
||||||
createSwitch({x:-158.01,y:0 ,z:107.47})
|
createSwitch({ x: -158.01, y: 0, z: 107.47 })
|
||||||
createSwitch({x:-208.35,y:0 ,z:107.47})
|
createSwitch({ x: -208.35, y: 0, z: 107.47 })
|
||||||
//机加车间
|
//机加车间
|
||||||
createSwitch({x:-40.22,y:0 ,z:19.90})
|
createSwitch({ x: -40.22, y: 0, z: 19.90 })
|
||||||
//服装军团
|
//服装军团
|
||||||
createSwitch({x:-81.96,y:0 ,z:-283.33})
|
createSwitch({ x: -81.96, y: 0, z: -283.33 })
|
||||||
//电控分厂
|
//电控分厂
|
||||||
createSwitch({x:-232.96,y:0 ,z:-64.48})
|
createSwitch({ x: -232.96, y: 0, z: -64.48 })
|
||||||
//大配套中心
|
//大配套中心
|
||||||
createSwitch({x:29.01,y:0 ,z:-60.75})
|
createSwitch({ x: 29.01, y: 0, z: -60.75 })
|
||||||
//大件车间
|
//大件车间
|
||||||
createSwitch({x:5.29,y:0 ,z:19.00})
|
createSwitch({ x: 5.29, y: 0, z: 19.00 })
|
||||||
//家纺 医防
|
//家纺 医防
|
||||||
createSwitch({x:88.55,y:0 ,z:-214.89})
|
createSwitch({ x: 88.55, y: 0, z: -214.89 })
|
||||||
//二道岗
|
//二道岗
|
||||||
createSwitch({x:306.5,y:0,z:5.43})
|
createSwitch({ x: 306.5, y: 0, z: 5.43 })
|
||||||
/*交换机结束********************************* */
|
/*交换机结束********************************* */
|
||||||
/*创建wifi */
|
/*创建wifi */
|
||||||
//机加
|
//机加
|
||||||
createWifi({x:-46.96,y:2 ,z:156.57})
|
createWifi({ x: -46.96, y: 2, z: 156.57 })
|
||||||
//大件
|
//大件
|
||||||
createWifi({x:52.60,y:2 ,z:96.44})
|
createWifi({ x: 52.60, y: 2, z: 96.44 })
|
||||||
createWifi({x:52.60,y:2 ,z:157.07})
|
createWifi({ x: 52.60, y: 2, z: 157.07 })
|
||||||
//精饰
|
//精饰
|
||||||
createWifi({x:133.14,y:2 ,z:107.43})
|
createWifi({ x: 133.14, y: 2, z: 107.43 })
|
||||||
createWifi({x:133.14,y:2 ,z:156.25})
|
createWifi({ x: 133.14, y: 2, z: 156.25 })
|
||||||
//焊接
|
//焊接
|
||||||
createWifi({x:305.73,y:2 ,z:110.45})
|
createWifi({ x: 305.73, y: 2, z: 110.45 })
|
||||||
createWifi({x:305.73,y:2 ,z:238.67})
|
createWifi({ x: 305.73, y: 2, z: 238.67 })
|
||||||
//服装
|
//服装
|
||||||
createWifi({x:-89.13,y:4 ,z:-245.33})
|
createWifi({ x: -89.13, y: 4, z: -245.33 })
|
||||||
createWifi({x:-132.07,y:2 ,z:-245.33})
|
createWifi({ x: -132.07, y: 2, z: -245.33 })
|
||||||
createWifi({x:-222.31,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: 140.83, y: 2, z: -197.34 })
|
||||||
createWifi({x:259.37,y:2 ,z:-197.34})
|
createWifi({ x: 259.37, y: 2, z: -197.34 })
|
||||||
createWifi({x:140.83,y:2 ,z:-111.84})
|
createWifi({ x: 140.83, y: 2, z: -111.84 })
|
||||||
createWifi({x:259.50,y:2 ,z:-111.81})
|
createWifi({ x: 259.50, y: 2, z: -111.81 })
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -467,22 +472,22 @@ const init = () => {
|
|||||||
])
|
])
|
||||||
//精加
|
//精加
|
||||||
createLine(yellowLine, [
|
createLine(yellowLine, [
|
||||||
{x:-164.26,y:2,z:30.98},
|
{ x: -164.26, y: 2, z: 30.98 },
|
||||||
{x:-164.26,y:2,z:140.05},
|
{ x: -164.26, y: 2, z: 140.05 },
|
||||||
{x:-214.35,y:2,z:140.05}
|
{ x: -214.35, y: 2, z: 140.05 }
|
||||||
|
|
||||||
])
|
])
|
||||||
//大件 总---精饰
|
//大件 总---精饰
|
||||||
createLine(yellowLine, [
|
createLine(yellowLine, [
|
||||||
{x:-0.71,y:2,z:30.98},
|
{ x: -0.71, y: 2, z: 30.98 },
|
||||||
{x:-0.71,y:2,z:53.16},
|
{ x: -0.71, y: 2, z: 53.16 },
|
||||||
{x:133.97,y:2,z:53.16},
|
{ x: 133.97, y: 2, z: 53.16 },
|
||||||
{x:133.97,y:2,z:154.31}
|
{ x: 133.97, y: 2, z: 154.31 }
|
||||||
])
|
])
|
||||||
//大件 分
|
//大件 分
|
||||||
createLine(yellowLine, [
|
createLine(yellowLine, [
|
||||||
{x:53.43,y:2,z:53.16},
|
{ x: 53.43, y: 2, z: 53.16 },
|
||||||
{x:53.43,y:2,z:154.31}
|
{ x: 53.43, y: 2, z: 154.31 }
|
||||||
])
|
])
|
||||||
|
|
||||||
//电控
|
//电控
|
||||||
@ -550,8 +555,8 @@ const init = () => {
|
|||||||
const intersects = raycaster.intersectObjects(scene.children);
|
const intersects = raycaster.intersectObjects(scene.children);
|
||||||
if (intersects.length > 0) {
|
if (intersects.length > 0) {
|
||||||
var selected = intersects[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)+ "}");
|
console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}");
|
||||||
console.log("非正常坐标", "{x:" + (+selected.point.x-0.83).toFixed(2) + ",y:2 ,z:" + (selected.point.z+3.52).toFixed(2)+ "}");
|
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
|
let workerShop = intersects[0]?.object?.name
|
||||||
if (workerShopRoute.hasOwnProperty(workerShop) && !edit) {
|
if (workerShopRoute.hasOwnProperty(workerShop) && !edit) {
|
||||||
//router.push({ path: workerShopRoute[workerShop] })
|
//router.push({ path: workerShopRoute[workerShop] })
|
||||||
@ -668,17 +673,37 @@ const init = () => {
|
|||||||
|
|
||||||
//创建线
|
//创建线
|
||||||
function createLine(color: number, pointsList: any) {
|
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 => {
|
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
|
//创建wifi
|
||||||
@ -687,7 +712,6 @@ function createWifi(position: positionType) {
|
|||||||
|
|
||||||
loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
|
loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
|
||||||
const mesh = gltf.scene.children[0];
|
const mesh = gltf.scene.children[0];
|
||||||
console.log(mesh);
|
|
||||||
|
|
||||||
const s = 0.3;
|
const s = 0.3;
|
||||||
mesh.scale.set(s, s, s);
|
mesh.scale.set(s, s, s);
|
||||||
@ -705,7 +729,7 @@ function createWifi(position: positionType) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//创建交换机
|
//创建交换机
|
||||||
function createSwitch(position: positionType,scale:number=0.2) {
|
function createSwitch(position: positionType, scale: number = 0.2) {
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
|
|
||||||
loader.load('/models/gltf/scene.gltf', function (gltf) {
|
loader.load('/models/gltf/scene.gltf', function (gltf) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user