更新路牌显示

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