更新路牌显示

src/components/content/tunnelScene/PreviewScene.vue

@@ -63,7 +63,7 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLen", "tunnelName"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 
 
@@ -143,6 +143,7 @@ async function handleMounted() {
         modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
         // console.log("init", params.tunnelId);
         demo.previewtunnelModeInit(toRaw(modelList.value));
+        demo.SignsInf(params.tunnelName, String(params.tunnelLen.value))
         // watch(
         //     () => params.tunnelId,
         //     (now) => {

src/components/content/tunnelScene/TunnelScene.vue

@@ -71,6 +71,7 @@ watch(
     params.tunnelLength = now;
     console.log(params.tunnelLength);
     pointGap = now / 20;
+    console.log(params.form.tunnelName);
   },
   { deep: true }
 );
@@ -113,6 +114,7 @@ async function handleMounted() {
     // modelList.value = await initData(params.tunnelId, params.form);
     console.log("test", modelList.value);
     demo.editTunnelInit(toRaw(modelList.value));
+    demo.SignsInf(params.form.tunnelName, String(params.tunnelLength))
   } catch (err) {
     console.log(err);
     ElMessage({
@@ -196,6 +198,10 @@ function rClickCallback(demo) {
   demo.addFunction("editDev", editDev);
 }
 
+// function streetSigns(){
+
+// }
+
 // 场景添加设备
 function handleAddEqu(formInfo) {
   demo.addEquipment(targetP.value, formInfo);

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

@@ -11,6 +11,7 @@ import addFunction from "./addEvent";
 import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
+import StreetSignTag from "./utils/StreetSignTag";
 export default class Demo {
   // 摄像机看向位置
   origin = null;
@@ -19,6 +20,7 @@ export default class Demo {
   //设备模型数组
   deviceModels = [];
   constructor(three, mountedElement) {
+    this._StreetSignTag = StreetSignTag
     this._handleLClick = handleLClick;
     this._handleRClick = handleRClick;
     this._handleDBLClick = handleDBLClick;
@@ -36,6 +38,8 @@ export default class Demo {
     this.mountedElement = mountedElement;
     //初始化场景
     this.scene = new this.THREE.Scene();
+    //初始化光影
+    this.ambientLight = new this.THREE.AmbientLight(0xffffff, 2); //设置环境光
     // 初始化摄像机
     this.camera = new this.THREE.PerspectiveCamera(
       75,
@@ -66,6 +70,7 @@ export default class Demo {
     this.render();
     this.canvasResize();
     this.addXYZ();
+    this.addLight();
   }
   //渲染函数作用域(这里主要写渲染帧内操作)
   __renderScope() {
@@ -116,6 +121,9 @@ export default class Demo {
     // const axesHelper = new this.THREE.AxesHelper(100);
     // this.scene.add(axesHelper);
   }
+  addLight() {
+    this.scene.add(this.ambientLight); //将环境光添加到场景中
+  }
 
   // 屏幕自适应
   canvasResize() {
@@ -136,7 +144,7 @@ export default class Demo {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall修改版.gltf",
+        "/tunnelModel/chanel-have-wall优化版.gltf",
         (gltf) => {
           gltf.scene.traverse((child) => {
             this._forModels(child);
@@ -166,6 +174,8 @@ export default class Demo {
     this._ClickModel(this.points);
     //将墙壁进行隐藏
     this.WallInit()
+    //对路牌进行相关操作
+    // this.SignsInf()
   }
 
   // 在此方法中对模型批量操作，这里遍历附着点
@@ -180,6 +190,8 @@ export default class Demo {
       // 遍历一个属性是否存在设备
       child.hasDevice = false; //初始化
     }
+    // child.material.emissive = child.material.color
+    // child.material.emissiveMap = child.material.map
   }
 
   // 添加轨道控制器
@@ -401,7 +413,7 @@ export default class Demo {
     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("white");
+      v.material.color = new this.THREE.Color(0xababab);
     });
     // 初始标签面板
     const tag = new this.THREE.Mesh(
@@ -498,4 +510,26 @@ export default class Demo {
       }
     }
   }
+  SignsInf(tunnelName, tunnelLength) {
+    let Signs = this.scene.getObjectByName('streetSigns');
+    console.log(Signs);
+    const tag = new this.THREE.Mesh(
+      new this.THREE.PlaneGeometry(100, 76),
+      new this.THREE.MeshBasicMaterial({ color: "white" })
+    );
+    //对标签进行一些操作
+    // Signs.rotation.x += Math.PI / 2;
+    Signs.add(tag);
+    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(3);
+    tag.translateY(40);
+
+
+    let EquipmentTag = this._StreetSignTag(tunnelName, tunnelLength);
+    Signs.getObjectByName("tag").material = EquipmentTag;
+  }
 }

src/components/content/tunnelScene/sceneClass/utils/StreetSignTag.JS

@@ -0,0 +1,26 @@
+import * as THREE from "three";/**
+* 返回一个带有文字的的#3D材质
+* 把输入的文字转化为base64的img图片
+* @param {String} text
+* @param {String} param 传感器实时检测参数
+*/
+export default function (text = "", param = "", width = 250, height = 150) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = "#003BA8";
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = "white";
+    ctx.font = "15px serif";
+    ctx.fillText('隧道简称:' + text, (100 - text.length * 1) / 50, 40);
+    ctx.fillText('隧道长度:' + param + 'm', (100 - param.length * 1) / 50, 115);
+    ctx.strokeStyle = "white";
+    ctx.moveTo(0, 75);
+    ctx.lineTo(30000, 120);
+    ctx.stroke();
+    const base64 = canvas.toDataURL();
+    return new THREE.MeshBasicMaterial({
+        map: new THREE.TextureLoader().load(base64),
+    });
+}

src/views/tunnel/index.vue

@@ -33,8 +33,8 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
 
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :tunnelLen="tunnelLen"></preview-scene>
+      :tunnelName="tunnelName"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
         :close-on-click-modal="false" :close-on-press-escape="false">
@@ -87,6 +87,7 @@ import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/lar
 import { ElMessage, ElMessageBox } from "element-plus";
 import { getUserInfo } from "@/api/login";
 import { initSceneData } from "@/api/tunnelScene";
+import { reactive } from "vue";
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
@@ -111,14 +112,10 @@ const tunnelId = ref(0);
 const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
-// const form = ref({
-//   tunnelName: "",
-//   serialNumber: "",
-//   totalLength: "",
-//   isDefault: false,
-//   remarks: "",
-// });
 let socket = reactive("");
+let tunnelName = reactive("")
+
+
 
 const btnList = ref([
   {
@@ -256,6 +253,8 @@ const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
       getScreenInfo(res.data[0]?.value)
+      tunnelName = res.data[0].label
+      console.log(res.data[0].label);
     }
   });
 }
@@ -282,7 +281,7 @@ const manageSelect = (index) => {
     }
   } else if (index == '隧道管理') {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/byHome/'+ currentUserId.value);
+      router.push("/tunnel/" + currentSiteId.value + '/byHome/' + currentUserId.value);
     }
   } else if (index == '用户管理') {
     if (currentSiteId.value) {