换模型+背景

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