模型文件

src/components/ThreeViewerDebug.vue

@@ -15,7 +15,7 @@
           <button @click="copyPosition">复制坐标</button>
         </div>
       </div>
-      <div class="mesh-list">
+      <div class="mesh-list" @click="save">
         <h4>模型部件列表:</h4>
         <ul>
           <li v-for="(mesh, index) in meshList" :key="index">
@@ -39,6 +39,7 @@ import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPa
 import TextureName from '../../public/models/textureName.json'
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
 import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
+import { cloneDeep } from 'lodash';
 
 export default {
   name: 'ThreeViewerDebug',
@@ -54,6 +55,10 @@ export default {
     debugMode: {
       type: Boolean,
       default: false
+    },
+    viewStr: {
+      type: Object,
+      default: () => ({})
     }
   },
   computed: {
@@ -348,6 +353,7 @@ export default {
           // this.controls.maxPolarAngle = Math.PI / 2; // 限制向上旋转的角度
 
       this.controls.update();
+      this.loadCameraState()
       
       // 调整地面位置到模型底部
       if (this.ground) {
@@ -647,6 +653,37 @@ export default {
         });
       }
     },
+
+    save() {
+      let str =  {
+        position: this.camera.position.toArray(), // 保存位置
+        quaternion: this.camera.quaternion.toArray(), // 保存朝向
+        fov: this.camera.fov, // 如果是透视摄像机，保存焦距
+        target: this.controls.target.toArray(), // 控制器目标点
+      };
+      console.log(9999, JSON.stringify(str))
+    },
+    
+    loadCameraState() {
+      const cameraData = this.viewStr ? this.viewStr : {};
+      console.log('cameraData', cameraData)
+      if(cameraData && cameraData.position && cameraData.quaternion) {
+        console.log(888, cameraData, cloneDeep(this.camera.position))
+        this.camera.position.fromArray(cameraData.position); // 恢复位置
+        this.camera.quaternion.fromArray(cameraData.quaternion); // 恢复朝向
+        if (this.camera instanceof THREE.PerspectiveCamera) { // 如果是透视摄像机，恢复焦距
+          this.camera.fov = cameraData.fov;
+          this.camera.updateProjectionMatrix(); // 更新投影矩阵
+        }
+        this.controls.target.fromArray(cameraData.target); // 恢复目标点
+        this.controls.update(); // 更新控制器状态以应用新的目标点（如果有的话）
+        
+      } else {
+        this.camera.position.z = this.maxDim * 1;
+        this.camera.position.x = 0;
+        this.camera.position.y = 0;
+      }
+    }
   }
 }
 </script>