diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index d5975ca..2721671 100644 --- a/src/components/content/tunnelScene/sceneClass/demo.js +++ b/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; diff --git a/src/components/content/tunnelScene/sceneClass/utils/StreetSignTag.js b/src/components/content/tunnelScene/sceneClass/utils/StreetSignTag.js new file mode 100644 index 0000000..d0f8e64 --- /dev/null +++ b/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), + }); +} \ No newline at end of file