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

This commit is contained in:
hzz 2023-05-23 18:47:28 +08:00
parent 0f9feb98df
commit 672983f2ad
5 changed files with 123 additions and 50 deletions

View File

@ -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";
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -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>

View File

@ -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:-176.45,y:2 ,z:-114.40})
createWifi({ x: -119.3, y: 2, z: -114.15 })
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;
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()
@ -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 arr = [x,y,z]
let { x, y, z } = element
let arr = [x, y, z]
pointList.push(...arr)
});
geometry.setPositions(pointList)
const material = new LineMaterial({
color: color,
transparent:true,
opacity: 0.5,
dashed:true,
transparent: true,
// opacity: 0.5,
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.castShadow = shadow;
wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z);
//
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);
//1xz-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);