Merge pull request 'LJ' (#61) from LJ into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/61

src/components/content/tunnelScene/TunnelScene.vue

@@ -1,12 +1,7 @@
 <template>
   <div id="scene" ref="content">
     <dev-info ref="info" :devInfo="devInfo" />
-    <edit-dev
-      ref="edit"
-      @addDev="handleAddDev"
-      @removeDev="handleRemoveDev"
-      :hasDev="hasDevice"
-    />
+    <edit-dev ref="edit" @addDev="handleAddDev" @removeDev="handleRemoveDev" :hasDev="hasDevice" />
   </div>
 </template>
 
@@ -25,7 +20,7 @@ import {
   CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"
 import DevInfo from "./childComp/DevInfo.vue";
 import EditDev from "./childComp/EditDev.vue";
 import { onMounted, reactive, ref } from "vue";
@@ -38,20 +33,23 @@ const edit = ref(null);
 const num = 10000;
 let demo; //定义demo全局变量
 const loader = new OBJLoader();
+let hdrLoader = new RGBELoader();
+let backColorSet = three.sRGBEncoding;
 // 模版挂载后
 onMounted(handleMounted);
 // 处理回调
 async function handleMounted() {
   const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
-  demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.glb");
+  demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
   demo.setDistance(10);
   lClickCallback(demo); //左键回调
   rClickCallback(demo); //右键回调
-
+  //加载HDR背景图片
+  demo.loadBackground(hdrLoader, backColorSet)
   // 初始化设备模型
   try {
     const deviceList = [];
@@ -80,7 +78,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => {},
+      (xhr) => { },
       (err) => {
         reject(err);
       }

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

@@ -41,13 +41,13 @@ export default class Demo {
     this.camera = new this.THREE.PerspectiveCamera(
       75,
       window.innerWidth / window.innerHeight,
-      0.1,
+      1,
       1000
     );
 
-    this.camera.position.z = 130;
-    this.camera.position.y = 35;
-    this.camera.position.x = 40;
+    this.camera.position.z = -60;
+    this.camera.position.y = 20;
+    this.camera.position.x = -30;
 
     this.camera.lookAt(0, 0, 1000);
     // 初始化渲染器
@@ -73,6 +73,7 @@ export default class Demo {
     // 轨道控制器更新
     if (this.orbitControls) {
       this.orbitControls.update();
+      // console.log(this.camera.position);
     }
 
     // 摄像头移动动画
@@ -127,13 +128,12 @@ export default class Demo {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "/tunnelModel/chanel.glb",
+        "/tunnelModel/chanel.gltf",
         (gltf) => {
           gltf.scene.traverse((child) => {
             this._forModels(child);
           });
           this.scene.add(gltf.scene);
-
           // 加载完后可执行函数
           this._afterLoaded(gltf.scene);
           resolve(gltf);
@@ -372,4 +372,14 @@ export default class Demo {
   setDistance(distance = 10) {
     this.distance = distance;
   }
+  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;
+    });
+  }
 }