refactor(tunnelScene): 优化代码结构和添加注释

重构模型加载和控制器初始化逻辑，添加详细代码注释
调整代码格式和参数对齐，提高可读性

src/components/content/tunnelScene/PreviewScene.vue

@@ -312,7 +312,7 @@ async function handleMounted() {
   let tunnelasync = await demo.loadModel(
     GLTFLoader,
     "/tunnelModel/chanel-have-wall-now-use.gltf",
-  );
+  );//初始化轨道控制器
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);

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

@@ -10,7 +10,11 @@ import {
 import { saveState, resetState } from "./viewBack";
 import addFunction from "./addEvent";
 import { editTunnelInit } from "./editTunnelInit";
-import { addEquipment, removeEquipment,clearTunnelEquipments } from "./editEquipment";
+import {
+  addEquipment,
+  removeEquipment,
+  clearTunnelEquipments,
+} from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit";
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
 import { realTimeRenderData } from "./realTimeRerender";
@@ -23,6 +27,8 @@ export default class Demo {
   //设备模型数组
   deviceModels = [];
   constructor(three, mountedElement) {
+    // 初始化 Three.js 场景、相机、渲染器
+    // 绑定各种功能模块
     this._StreetSignTag = StreetSignTag;
     this._handleLClick = handleLClick;
     this._handleLHover = handleLHover;
@@ -50,7 +56,7 @@ export default class Demo {
       75,
       window.innerWidth / window.innerHeight,
       1,
-      1000
+      1000,
     );
 
     this.camera.position.z = 1.24;
@@ -142,37 +148,46 @@ export default class Demo {
 
   // 模型加载
   /**
-   * @param {Object}  GLTFLoader 模型加载器
+   * 加载 GLTF 格式的 3D 模型
-   * @param {String} path 模型资源路径
+   * @param {Object} GLTFLoader Three.js 的 GLTF 模型加载器类
+   * @param {String} path 模型文件的相对路径
+   * @param {Boolean} isedit 是否为编辑模式，影响加载后的交互行为
+   * @returns {Promise} 返回 Promise 对象，支持 async/await 调用
    */
   loadModel(GLTFLoader, path, isedit) {
+    // 返回一个Promise对象，支持异步调用
     return new Promise((resolve, reject) => {
+      // 创建GLTF加载器实例
       this.gltfloader = new GLTFLoader();
+      // 调用加载器加载模型
       this.gltfloader.load(
-        //下面是模型加载的路径
+        path, // 模型文件路径
-        path,
+        (gltf) => { // 加载成功的回调函数
-        (gltf) => {
+          // 遍历模型场景中的所有子对象
-          // console.log(isedit);
           gltf.scene.traverse((child) => {
+            // 对每个子模型执行处理操作
             this._forModels(child);
           });
-          // 初始化模型缩放倍率
+          // 设置模型缩放比例为0.75倍
           gltf.scene.scale.set(0.75, 0.75, 0.75);
-          // 初始化场景位置
+          // 设置模型位置坐标
           gltf.scene.position.set(-5, 0, 10);
+          // 将模型添加到场景中
           this.scene.add(gltf.scene);
-          // 加载完后可执行函数
+          // 执行模型加载后的初始化操作
-          // console.log(isedit);
           this._afterLoaded(gltf.scene, isedit);
+          // 将加载的模型对象传递给Promise的resolve
           resolve(gltf);
         },
-        (xhr) => {
+        (xhr) => { // 加载进度的回调函数
-          // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+          // console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); // 可选：打印加载进度百分比
         },
-        (error) => {
+        (error) => { // 加载失败的回调函数
+          // 在控制台输出错误信息
           console.log(error);
+          // 将错误传递给Promise的reject
           reject(error);
-        }
+        },
       );
     });
   }
@@ -219,7 +234,7 @@ export default class Demo {
   addOrbitControls(OrbitControls, isedit) {
     this.orbitControls = new OrbitControls(
       this.camera,
-      this.renderer.domElement
+      this.renderer.domElement,
     );
     //初始化轨道控制器
     this.orbitControls.object.position.set(-29, 18, -50);
@@ -261,7 +276,12 @@ export default class Demo {
       const intersects = raycaster.intersectObjects(hoverModels);
 
       if (intersects.length > 0) {
-        if(Object.keys(intersects[0].object).includes('enableHover') && !intersects[0].object.enableHover && !isedit)return;
+        if (
+          Object.keys(intersects[0].object).includes("enableHover") &&
+          !intersects[0].object.enableHover &&
+          !isedit
+        )
+          return;
         if (!this.preHover) {
           this.preHover = intersects[0].object;
         } else {
@@ -277,7 +297,7 @@ export default class Demo {
         intersects[0].object.material.color.set("red");
 
         const tagP = intersects[0].object.getWorldPosition(
-          new this.THREE.Vector3()
+          new this.THREE.Vector3(),
         );
         // if (isedit != false) {
         this._checkAnimation(tagP);
@@ -303,12 +323,12 @@ export default class Demo {
     // 点击两次处理事件
     this.renderer.domElement.addEventListener(
       "dblclick",
-      this.__handleListenerDBLClickEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
+      this.__handleListenerDBLClickEvent.bind(this, isClickModels), //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
     );
     // 点击一次时处理时间
     this.renderer.domElement.addEventListener(
       "mousedown",
-      this.__handleListenerClickRLEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
+      this.__handleListenerClickRLEvent.bind(this, isClickModels), //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
     );
   }
   // 处理点击2次触发事件事件
@@ -471,7 +491,7 @@ export default class Demo {
     // 初始标签面板
     const tag = new this.THREE.Mesh(
       new this.THREE.PlaneGeometry(7, 5),
-      new this.THREE.MeshBasicMaterial({ color: "white" })
+      new this.THREE.MeshBasicMaterial({ color: "white" }),
     );
     this.equMap.get("equ_sensors").rotation.x += Math.PI / 2;
     this.equMap.get("equ_sensors").add(tag);
@@ -501,7 +521,7 @@ export default class Demo {
       "/images/background/background.png",
       function (texture) {
         texture.encoding = backColorSet;
-      }
+      },
     );
   }
   /**
@@ -530,7 +550,7 @@ export default class Demo {
           lookY: 0,
           lookZ: 0,
         },
-        500
+        500,
       );
       this.opacityTween.start();
       this.opacityTween.onUpdate((obj) => {
@@ -568,7 +588,7 @@ export default class Demo {
     // console.log(Signs);
     const tag = new this.THREE.Mesh(
       new this.THREE.PlaneGeometry(100, 76),
-      new this.THREE.MeshBasicMaterial({ color: "white" })
+      new this.THREE.MeshBasicMaterial({ color: "white" }),
     );
     Signs.add(tag);
     tag.name = "tag";