合并

src/components/content/tunnelScene/sceneClass/demo.js

@@ -8,9 +8,9 @@ import {
 } from "./handleOrbitControlsChange";
 import { saveState, resetState } from "./viewBack";
 import addFunction from "./addEvent";
+import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
-import { Group } from "three/examples/jsm/libs/tween.module";
 export default class Demo {
   // 摄像机看向位置
   origin = null;
@@ -28,6 +28,7 @@ export default class Demo {
     this.addEquipment = addEquipment;
     this.removeEquipment = removeEquipment;
     this.previewtunnelModeInit = previewtunnelModeInit;
+    this.editTunnelInit = editTunnelInit;
 
     // 外部可添加函数
     this.addFunction = addFunction;
@@ -173,6 +174,7 @@ export default class Demo {
       // 改变为基础材质
       child.material = new this.THREE.MeshBasicMaterial();
       child.scale.set(0.01, 0.01, 0.01);
+      if (/b[rl]$/.test(child.name)) child.translateZ(2);
       // 遍历一个属性是否存在设备
       child.hasDevice = false; //初始化
     }
@@ -380,10 +382,10 @@ export default class Demo {
         // console.log(v);
       }
     });
-    const axesHelper = new this.THREE.AxesHelper(100);
+    // const axesHelper = new this.THREE.AxesHelper(100);
     // 改变叶子旋转中心
     let x = 0,
-      y = -0.2,
+      y = -0.2099,
       z = 0;
     const wrapper = new this.THREE.Object3D();
     wrapper.position.set(x, y, z);
@@ -395,24 +397,23 @@ export default class Demo {
     this.equMap.get("equ_fan").add(wrapper);
 
     // 初其他传感器机颜色
-    this.equMap.get("equ_sensors").scale.set(0.1, 0.1, 0.1);
+    this.equMap.get("equ_sensors").scale.set(0.2, 0.2, 0.2);
     this.equMap.get("equ_sensors").traverse((v) => {
       v.material = new this.THREE.MeshBasicMaterial();
-      v.material.color = new this.THREE.Color("#7e7b7b");
+      v.material.color = new this.THREE.Color("white");
     });
     // 初始标签面板
     const tag = new this.THREE.Mesh(
-      new this.THREE.PlaneGeometry(10, 4),
+      new this.THREE.PlaneGeometry(7, 5),
       new this.THREE.MeshBasicMaterial({ color: "white" })
     );
-
+    this.equMap.get("equ_sensors").rotation.x += Math.PI / 2;
     this.equMap.get("equ_sensors").add(tag);
-    // const axesHelper = new this.THREE.AxesHelper(100);
-    // this.equMap.get("equ_sensors").add(axesHelper);
     tag.name = "tag";
     tag.rotation.x = Math.PI / 2;
     tag.rotation.z = Math.PI / 2; //旋转这里改变文字顺序
     tag.rotation.y = Math.PI;
+    tag.rotation.z -= Math.PI / 2;
     tag.translateZ(2.0);
   }
 
@@ -430,11 +431,6 @@ export default class Demo {
     this.distance = distance;
   }
   loadBackground(hdrLoader, backColorSet) {
-    // hdrLoader.load("/images/background/background.hdr", (texture) => {
-    //   texture.mapping = this.THREE.EquirectangularReflectionMapping;
-    //   this.scene.background = texture;
-    //   this.scene.environment = texture;
-    // })
     this.scene.background = new this.THREE.TextureLoader().load(
       "/images/background/background.png",
       function (texture) {

src/components/content/tunnelScene/sceneClass/editEquipment/index.js

@@ -5,20 +5,20 @@ import EquipmentTag from "../utils/EquipmentTag";
  * @param {String} equType  "fan" "sensors"
  */
 //formInfo需要的信息这里包括了
-//equipmentType、
+//equipmentType
 
 function addEquipment(targetPoint, formInfo) {
   if (targetPoint.hasDevice) {
-    alert("已添加设备");
     return;
   }
+
   switch (formInfo.equipmentType) {
-    case "fan":
-      handleFanEqu.call(this, targetPoint);
+    case "frequency":
+      handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
       break;
-    case "sensors":
-    case "sensors_2":
-      handleOtherEqu.call(this, targetPoint, formInfo.equipmentType);
+    case "windPressure":
+    case "sensor":
+      handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
       break;
     default:
       break;
@@ -28,47 +28,50 @@ function addEquipment(targetPoint, formInfo) {
   this.clearTagsObj();
 }
 // 其他传感器
-function handleOtherEqu(targetPoint, EqeName) {
+function handleOtherEqu(targetPoint, equipmentInfo) {
   const equMesh = this.equMap.get("equ_sensors").clone();
   const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
   equMesh.position.copy(worldP);
 
   //设备添加标签
-  const tag = EquipmentTag(EqeName === "sensors" ? "风压传感器" : "普通传感器");
+  const tag = EquipmentTag(equipmentInfo.label);
+  console.log(equipmentInfo);
   equMesh.getObjectByName("tag").material = tag;
   if (/tr$/.test(targetPoint.name)) {
-    equMesh.rotation.z = -(3 * Math.PI) / 4;
-    targetPoint.scale.set(0.03, 0.03, 0.03);
-    equMesh.getObjectByName("tag").rotation.z += Math.PI; ///注意在原来的基础上加
+    equMesh.rotation.z = -Math.PI / 2;
+    equMesh.rotation.y -= Math.PI / 4;
+    equMesh.getObjectByName("tag").rotation.z += Math.PI; // 注意在原来的基础上加
   } else if (/tl$/.test(targetPoint.name)) {
-    equMesh.rotation.z = -(5 * Math.PI) / 4;
-    targetPoint.scale.set(0.03, 0.03, 0.03);
+    equMesh.rotation.z = Math.PI / 2;
+    equMesh.rotation.y += Math.PI / 4;
+    equMesh.getObjectByName("tag").rotation.z += Math.PI;
   } else if (/tc$/.test(targetPoint.name)) {
     equMesh.rotation.z = Math.PI;
-    targetPoint.scale.set(0.03, 0.03, 0.03);
+    equMesh.getObjectByName("tag").rotation.z += Math.PI;
   } else if (/br$/.test(targetPoint.name)) {
     equMesh.rotation.z = -Math.PI / 2;
-    equMesh.translateX(-1);
-    equMesh.getObjectByName("tag").rotation.z += Math.PI; ///注意在原来的基础上加
-    targetPoint.scale.set(0.03, 0.03, 0.075);
+    equMesh.getObjectByName("tag").rotation.z += Math.PI;
   } else if (/bl$/.test(targetPoint.name)) {
     equMesh.rotation.z = Math.PI / 2;
-    equMesh.translateX(1);
-
-    targetPoint.scale.set(0.03, 0.03, 0.075);
+    equMesh.getObjectByName("tag").rotation.z += Math.PI;
   }
-
+  targetPoint.scale.set(0.03, 0.06, 0.05);
   this.scene.add(equMesh);
   targetPoint.visible = false;
 
-  // 保存该设备id，后期直接从附附着点进行删除
+  // 保存该设备模型id，后期直接从附附着点进行删除
   targetPoint.info = {
     id: equMesh.id,
+    ...equipmentInfo,
   };
 }
 
 // 风机
-function handleFanEqu(targetPoint, speed = Math.random().toFixed(1) * 1000) {
+function handleFanEqu(
+  targetPoint,
+  equipmentInfo,
+  speed = Math.random().toFixed(1) * 1000
+) {
   // 由于风机比较多，每个风机转速不一直，保存在一个数中遍历
   if (!this.fanSpinArray) {
     this.fanSpinArray = [];
@@ -84,6 +87,7 @@ function handleFanEqu(targetPoint, speed = Math.random().toFixed(1) * 1000) {
   // 保存该设备id，后期直接从附附着点进行删除
   targetPoint.info = {
     id: equMesh.id, //模型在场景id
+    ...equipmentInfo,
   };
 
   // 定义风机旋转
@@ -107,5 +111,6 @@ function removeEquipment(targetPoint) {
   targetPoint.visible = true;
   targetPoint.hasDevice = false;
   targetPoint.scale.set(0.01, 0.01, 0.01);
+  delete targetPoint.info; // 清空设备信息
 }
 export { addEquipment, removeEquipment };

src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js

@@ -0,0 +1,10 @@
+export function editTunnelInit(equipmentList) {
+  equipmentList.forEach((item) => {
+    const formInfo = {
+      equipmentType: item.equipmentType, //设备类型
+      chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
+      threshold: item.threshold,
+    };
+    this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
+  });
+}

src/components/content/tunnelScene/sceneClass/utils/EquipmentTag.js

@@ -1,18 +1,25 @@
 import * as THREE from "three";
 /**
- * 返回一个带有文字的几何平面
- * @param {String} text 把输入的文字转化为base64的img图片
+ * 返回一个带有文字的的#3D材质
+ * 把输入的文字转化为base64的img图片
+ * @param {String} text
+ * @param {String} param 传感器实时检测参数
  */
-export default function (text, width = 100, height = 50) {
+export default function (text = "", param = "50", width = 80, height = 50) {
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext("2d");
-  ctx.fillStyle = "white";
+  ctx.fillStyle = "#00b8ec";
   ctx.fillRect(0, 0, width, height);
-  ctx.fillStyle = "black";
-  ctx.font = "16px serif";
-  ctx.fillText(text, (100 - text.length * 16.6) / 2, 30);
+  ctx.fillStyle = "white";
+  ctx.font = "12px serif";
+  ctx.fillText(text, (100 - text.length * 15) / 2, 20);
+  ctx.fillText(param, (100 - param.length * 10) / 2, 40);
+  ctx.strokeStyle = "white";
+  ctx.moveTo(0, 26);
+  ctx.lineTo(100, 26);
+  ctx.stroke();
   const base64 = canvas.toDataURL();
   return new THREE.MeshBasicMaterial({
     map: new THREE.TextureLoader().load(base64),