唐润平：上线版,功能为待完善

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

@@ -45,9 +45,9 @@ export default class Demo {
       1000
     );
 
-    this.camera.position.z = -60;
-    this.camera.position.y = 20;
-    this.camera.position.x = -30;
+    this.camera.position.z = 1.24;
+    this.camera.position.y = 9.14;
+    this.camera.position.x = -63.79;
 
     this.camera.lookAt(0, 0, 1000);
     // 初始化渲染器
@@ -58,6 +58,7 @@ export default class Demo {
     this.renderer.setSize(window.innerWidth, window.innerHeight);
     this.renderer.domElement.style.position = "absolute";
     this.mountedElement.appendChild(this.renderer.domElement);
+    console.log(this.renderer.domElement);
     // 创建渲染帧
     this.render = () => {
       this.__renderScope();
@@ -101,6 +102,10 @@ export default class Demo {
     if (this.intoPointAnimation) {
       this.intoPointAnimation.update();
     }
+    // 隧道颜色渐变动画
+    if (this.opacityTween) {
+      this.opacityTween.update();
+    }
   }
 
   // 添加世界坐标系
@@ -133,6 +138,8 @@ export default class Demo {
           gltf.scene.traverse((child) => {
             this._forModels(child);
           });
+          // 初始化场景位置
+          gltf.scene.position.set(-5, 0, 10);
           this.scene.add(gltf.scene);
           // 加载完后可执行函数
           this._afterLoaded(gltf.scene);
@@ -156,14 +163,14 @@ export default class Demo {
     this._ClickModel(this.points);
   }
 
-  // 在此方法中对模型批量操作
+  // 在此方法中对模型批量操作，这里遍历附着点
   _forModels(child) {
     // 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
     if (child.isMesh && /^point+/.test(child.name)) {
       this.points.push(child);
       // 改变为基础材质
       child.material = new this.THREE.MeshBasicMaterial();
-
+      child.scale.set(0.01, 0.01, 0.01);
       // 遍历一个属性是否存在设备
       child.hasDevice = false; //初始化
     }
@@ -178,7 +185,7 @@ export default class Demo {
       this.camera,
       this.renderer.domElement
     );
-
+    this.orbitControls.object.position.set(-27.285, 16.356, -54.925);
     //限制轨道控制器的视角变化
     this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
     // 监听控制器变化
@@ -242,6 +249,7 @@ export default class Demo {
   }
   // 处理点击2次触发事件事件
   __handleListenerDBLClickEvent(isClickModels, e) {
+    e.preventDefault();
     // 如果监听到双击则清空单次点击事件
     clearTimeout(this.EventTimer);
     //最后一个是监听器默认参数
@@ -263,6 +271,7 @@ export default class Demo {
 
   // 处理点击左右键触发的事件
   __handleListenerClickRLEvent(isClickModels, e) {
+    e.preventDefault();
     clearTimeout(this.EventTimer);
     this.EventTimer = setTimeout(() => {
       const mouse = new this.THREE.Vector2();
@@ -276,9 +285,9 @@ export default class Demo {
       this.setBoxHelper(intersects[0].object);
 
       // 处理点击左右键事件
-      if (e.button === 0) {
+      if (e.button === 2) {
         this._handleLClick(intersects[0].object);
-      } else if (e.button === 2) {
+      } else if (e.button === 0) {
         this._handleRClick(intersects[0].object);
       }
     }, 400);
@@ -309,18 +318,12 @@ export default class Demo {
     this.tagCSS2DObj.element.style.display = "none";
     this.tag2CSS2DObj.element.style.display = "none";
     this.tag3CSS2DObj.element.style.display = "none";
-
     this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
     this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
-    this.tag3CSS2DObj.scale.set(0.1, 0.1, 0.1);
-    this.tag3CSS2DObj.position.y = 1000;
-
-
-    this.tagCSS2DObj.scale.set(3, 3, 3);
-
+    this.tag3CSS2DObj.scale.set(0.025, 0.025, 0.025); //编辑框
+    this.tag3CSS2DObj.position.set(10, 0, 10);
+    this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
   }
-
-
   clearTagsObj() {
     if (this.preDBLModel) {
       this.preDBLModel.remove(this.tagCSS2DObj);
@@ -378,9 +381,64 @@ export default class Demo {
   setDistance(distance = 10) {
     this.distance = distance;
   }
-  loadBackground(backColorSet) {
-    this.scene.background = new this.THREE.TextureLoader().load("/images/background/background.png", function (texture) {
-      texture.encoding = backColorSet;
-    });
+  loadBackground(hdrLoader, backColorSet) {
+    // hdrLoader.load("/images/background/background.hdr", (texture) => {
+    //   texture.mapping = this.THREE.EquirectangularReflectionMapping;
+    //   this.scene.background = texture;
+    //   this.scene.environment = texture;
+    // })
+    this.scene.background = new this.THREE.TextureLoader().load(
+      "/images/background/background.png",
+      function (texture) {
+        texture.encoding = backColorSet;
+      }
+    );
+  }
+  /**
+   *
+   * @param {Boolean} option 是否禁用轨道控制器
+   */
+  isControlOrbit(option = true) {
+    this.orbitControls.enabled = option;
+
+    const mesh = this.scene.getObjectByName("chanel");
+    const mesh2 = this.scene.getObjectByName("chanel_1");
+    const mesh3 = this.scene.getObjectByName("chanel_2");
+    const mesh4 = this.scene.getObjectByName("chanel_3");
+
+    const opacityTween = (startVal, endVal, isNeedLookAt = false) => {
+      this.opacityTween = new this.TWEEN.Tween({
+        opacity: startVal,
+        lookX: this.orbitControls.target.x,
+        lookY: this.orbitControls.target.y,
+        lookZ: this.orbitControls.target.z,
+      });
+      this.opacityTween.to(
+        {
+          opacity: endVal,
+          lookX: 0,
+          lookY: 0,
+          lookZ: 0,
+        },
+        500
+      );
+      this.opacityTween.start();
+      this.opacityTween.onUpdate((obj) => {
+        mesh.material.opacity = obj.opacity;
+        mesh2.material.opacity = obj.opacity;
+        mesh3.material.opacity = obj.opacity;
+        mesh4.material.opacity = obj.opacity;
+        if (!isNeedLookAt) return;
+        this.camera.lookAt(obj.lookX, obj.lookY, obj.lookZ);
+        this.orbitControls.target.set(obj.lookX, obj.lookY, obj.lookZ);
+      });
+    };
+    if (!option) {
+      // 显示编辑框隧道颜色
+      opacityTween(0.5, 0.1);
+    } else {
+      // 退出编辑框什么颜色
+      opacityTween(0.1, 0.5, true);
+    }
   }
 }