廖杰：路牌更新

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

@@ -11,7 +11,7 @@ import addFunction from "./addEvent";
 import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
-import StreetSignTag from "./utils/StreetSignTag";
+import { StreetSignTag } from "./utils/StreetSignTag.js";
 export default class Demo {
   // 摄像机看向位置
   origin = null;

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 function StreetSignTag(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),
+    });
+}