更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

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

@@ -1,5 +1,6 @@
 import { handleLClick } from "./handleRLclick/handleLclick";
 import { handleRClick } from "./handleRLclick/handleRclick";
+import { handleLHover } from "./handleRLclick/handleLhover.js"
 import { handleDBLClick } from "./handleDBLclick";
 import { checkAnimation } from "./checkTag";
 import {
@@ -12,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
+// import { ref } from "vue";
 export default class Demo {
   // 摄像机看向位置s
   origin = null;
@@ -22,6 +24,7 @@ export default class Demo {
   constructor(three, mountedElement) {
     this._StreetSignTag = StreetSignTag
     this._handleLClick = handleLClick;
+    this._handleLHover = handleLHover;
     this._handleRClick = handleRClick;
     this._handleDBLClick = handleDBLClick;
     this._checkAnimation = checkAnimation;
@@ -140,12 +143,14 @@ export default class Demo {
    * @param {Object}  GLTFLoader 模型加载器
    * @param {String} path 模型资源路径
    */
-  loadModel(GLTFLoader, path) {
+  loadModel(GLTFLoader, path, isedit) {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall优化版.gltf",
+        //下面是模型加载的路径
+        path,
         (gltf) => {
+          // console.log(isedit);
           gltf.scene.traverse((child) => {
             this._forModels(child);
           });
@@ -153,7 +158,8 @@ export default class Demo {
           gltf.scene.position.set(-5, 0, 10);
           this.scene.add(gltf.scene);
           // 加载完后可执行函数
-          this._afterLoaded(gltf.scene);
+          // console.log(isedit);
+          this._afterLoaded(gltf.scene, isedit);
           resolve(gltf);
         },
         (xhr) => {
@@ -167,11 +173,15 @@ export default class Demo {
     });
   }
   // 模型加载完函数
-  _afterLoaded() {
+  _afterLoaded(scene, isedit) {
+    console.log(isedit);
     // 可以进行选中
-    this._hoverModel(this.points);
+    this._hoverModel(this.points, isedit);
     // 可以进行点击
-    this._ClickModel(this.points);
+    if (isedit == true) {
+      console.log('dada')
+      this._ClickModel(this.points);
+    }
     //将墙壁进行隐藏
     this.WallInit()
     //对路牌进行相关操作
@@ -198,14 +208,21 @@ export default class Demo {
   /**
    * @param {Object} OrbitControls 轨道控制器
    */
-  addOrbitControls(OrbitControls) {
+  addOrbitControls(OrbitControls, isedit) {
     this.orbitControls = new OrbitControls(
       this.camera,
       this.renderer.domElement
     );
     //初始化轨道控制器
     this.orbitControls.object.position.set(-29, 18, -50);
-    this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    // this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    //下面的设置是使隧道的上下不进行旋转，只左右旋转即可
+    if (isedit == true) {
+      this.orbitControls.maxPolarAngle = (3.69 * Math.PI) / 7;
+    } else {
+      this.orbitControls.maxPolarAngle = (4 * Math.PI) / 8.5;
+      this.orbitControls.minPolarAngle = (4 * Math.PI) / 8.5;
+    }
     this.orbitControls.minDistance = 5;
     this.orbitControls.maxDistance = 87;
     // 监听控制器变化
@@ -224,7 +241,7 @@ export default class Demo {
    * 鼠标移入可以高亮的模型
    *@param {Array} hoverModels 需要高亮的模型
    */
-  _hoverModel(hoverModels) {
+  _hoverModel(hoverModels, isedit) {
     this.renderer.domElement.addEventListener("mousemove", (e) => {
       const mouse = new this.THREE.Vector2();
       mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
@@ -236,10 +253,17 @@ export default class Demo {
         if (!this.preHover) {
           this.preHover = intersects[0].object;
         } else {
+          if (isedit != true) {
+            console.log(isedit);
+            this._handleLHover(intersects[0].object);
+
+          }
+
           this.preHover.material.color.set("white");
           this.preHover = intersects[0].object;
         }
         intersects[0].object.material.color.set("red");
+
         const tagP = intersects[0].object.getWorldPosition(
           new this.THREE.Vector3()
         );
@@ -249,6 +273,10 @@ export default class Demo {
         if (!this.preHover) return;
         this.preHover.material.color.set("white");
       }
+      // this._handleLHover(intersects[0].object);
+      // this._handleLClick(intersects[0].object);
+
+
     });
   }
   /**
@@ -315,7 +343,7 @@ export default class Demo {
   // 添加css3Renderer
   addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
     this.CSS2Renderer = new CSS2Renderer();
-    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
     this.CSS2Renderer.render(this.scene, this.camera);
 
     this.mountedElement.appendChild(this.CSS2Renderer.domElement);
@@ -335,11 +363,16 @@ export default class Demo {
     // // 设置该标签初始化透明
     // this.tagCSS2DObj.element.style.opacity = "1";
     // this.tag2CSS2DObj.element.style.opacity = "1";
-
+    // 下面是3D的，下面把它注释，之后方便来修正
     this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
-
     this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
     this.tag3CSS2DObj.position.set(10, 0, 10);
+    // 下面是2D的显示方案
+    // this.tagCSS2DObj.scale.set(0.001, 0.001, 0.001);
+
+
+    // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
+    // this.tag3CSS2DObj.position.set(1, 0, 1);
   }
   clearTagsObj() {
     if (this.preDBLModel) {

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js

@@ -0,0 +1,54 @@
+export function handleLHover(targetPoint) {
+  // 保存进入状态
+  this._saveState();
+  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+
+  // 设置标签位置
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+  this.isControlOrbit(false);
+  this.position = worldPosition;
+  if (/tr$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tc$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(0);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-6);
+    intoAnimation.call(this);
+  } else if (/br$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  } else if (/bl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  }
+  this.scene.add(this.tag3CSS2DObj);
+  // 返回给编辑组件的回调函数
+  this.editDev(targetPoint);
+}
+
+function intoAnimation() {
+  this.tag3CSS2DObj.element.style.opacity = "1";
+  this.tag3CSS2DObj.element.style.display = "block";
+}