feat(board): 更新机场模型并添加交互功能

- 导入 OrbitControls、CSS2DRenderer 和 CSS2DObject 模块
- 添加环境光和轨道控制器
- 调整相机位置和旋转角度
- 优化渲染循环和场景设置

src/views/board/model/AirportModel.vue

@@ -6,6 +6,10 @@
 import * as THREE from 'three';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'// 导入CSS2DRenderer类，用于在Three.js场景中渲染CSS元素
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'// 导入CSS2DObject类，用于将CSS元素作为对象添加到Three.js场景中
 
 export default {
   name: 'AirportModel',
@@ -25,7 +29,7 @@ export default {
           // 创建一个新的 Three.js 场景
           const scene = new THREE.Scene();
           // 创建一个透视相机，参数为视角、宽高比、近裁剪面和远裁剪面
-          const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+          const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 100000000);
           // 创建一个 WebGL 渲染器并启用抗锯齿
           const renderer = new THREE.WebGLRenderer({ antialias: true });
           // 设置渲染器的尺寸为容器的宽度和高度
@@ -33,38 +37,54 @@ export default {
           // 将渲染器的 DOM 元素添加到容器中
           container.appendChild(renderer.domElement);
 
-          // 设置光源
+          // 创建一个新的平行光源，颜色为白色（0xffffff），强度为1
           const light = new THREE.DirectionalLight(0xffffff, 1);
+          // 创建一个新的环境光，颜色为白色（0xffffff），强度为1
+          const ambient = new THREE.AmbientLight(0xffffff, 1);
           // 设置光源位置并归一化
           light.position.set(5, 3, 5);
           // 将光源添加到场景中
           scene.add(light);
+          scene.add(ambient);
+          // 创建OrbitControls对象，用于控制相机的旋转、缩放和平移
+          const controls = new OrbitControls(camera, renderer.domElement);
+          // 设置OrbitControls的目标点，即相机围绕的中心点
+          controls.target = new THREE.Vector3(-433, 300, -217);
+          // 更新OrbitControls的状态，使其生效
+          controls.update();
 
           // 加载 MTL 文件
           const mtlLoader = new MTLLoader();
-          mtlLoader.load('/model/jiaodongjichang.mtl', (materials) => {
+          // 加载MTL文件，并设置材质
+          mtlLoader.load('/model/daxingjichang.mtl', (materials) => {
+            // 预加载材质
             materials.preload();
+            // 创建OBJLoader实例
             const objLoader = new OBJLoader();
+            // 设置OBJLoader的材质
             objLoader.setMaterials(materials);
-            objLoader.load('/model/jiaodongjichang.obj', (object) => {
+            // 加载OBJ模型文件
+            objLoader.load('/model/daxingjichang.obj', (object) => {
+              // 设置模型在场景中的Y轴位置
               object.position.y = -1;
+              // 将模型添加到场景中
               scene.add(object);
             });
           }  );
+          
+          camera.position.set(-379.67901969707856, 1591.6047450835238, -1302.6577410405184);// 设置相机位置  
+          camera.rotation.set(-1302.6577410405184,-1302.6577410405184,3.104032443868015);// 设置相机旋转角度
 
-          // 设置相机位置
-          camera.position.z = 5;
       // 渲染循环
       const animate = () => {
         // 请求下一帧动画
         requestAnimationFrame(animate);
         // 渲染场景和相机
+        console.log(camera);
         renderer.render(scene, camera);
       };
       // 开始渲染循环
       animate();
-
-
         }
   }
 };