feat(board): 添加机场模型标签渲染功能

- 在 AirportModel 组件中添加了 CSS2DRenderer用于渲染 HTML 标签
- 创建了 CSS2DObject 对象并添加到场景中，用于显示模型信息
- 调整了标签的位置并设置了相关样式- 在渲染循环中添加了标签渲染逻辑

src/views/board/model/AirportModel.vue

@@ -1,7 +1,9 @@
 <template>
-  <div ref="modelContainer" class="model-container"
-
-  ></div>
+  <div ref="modelContainer" class="model-container">
+    <div ref="modelInfo" class="model" style="display: inline-block">
+        DEMO展示<!--      TODO-->
+    </div>
+  </div>
 
 </template>
 
@@ -11,8 +13,8 @@ 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场景中
+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',
@@ -28,7 +30,6 @@ export default {
     initThree() {
           // 获取模型容器的引用
           const container = this.$refs.modelContainer;
-
           // 创建一个新的 Three.js 场景
           const scene = new THREE.Scene();
           // 创建一个透视相机，参数为视角、宽高比、近裁剪面和远裁剪面
@@ -39,7 +40,7 @@ export default {
           renderer.setSize(container.clientWidth, container.clientHeight);
           // 将渲染器的 DOM 元素添加到容器中
           container.appendChild(renderer.domElement);
-
+          const labelRenderer = new CSS2DRenderer() // 创建一个CSS2D渲染器，用于在3D场景中渲染HTML标签
           // 创建一个新的平行光源，颜色为白色（0xffffff），强度为1
           const light = new THREE.DirectionalLight(0xffffff, 1);
           // 创建一个新的环境光，颜色为白色（0xffffff），强度为1
@@ -50,9 +51,23 @@ export default {
           scene.add(light);
           scene.add(ambient);
 
+          // 设置标签渲染器大小为窗口大小
+          labelRenderer.setSize(window.innerWidth, window.innerHeight)
+          // 设置标签渲染器元素位置为绝对定位
+          labelRenderer.domElement.style.position = 'absolute'
+          // 设置标签渲染器元素顶部位置为0
+          labelRenderer.domElement.style.top = '0'
+          // 设置标签渲染器元素指针事件为无
+          labelRenderer.domElement.style.pointerEvents = 'none'
+          // 将标签渲染器元素添加到文档中
+          document.body.appendChild(labelRenderer.domElement);
+          let css2DObject = new  CSS2DObject(this.$refs.modelInfo);
+          //TODO: 模型位置需要调整
+          css2DObject.position.set(-430.7033258028898,  302.2550016498,-220.19044239352576);
+          scene.add(css2DObject);
+
           // 创建OrbitControls对象，用于控制相机的旋转、缩放和平移
           const controls = new OrbitControls(camera, renderer.domElement);
-
           //是否开启右键拖拽
           controls.enablePan = true;
 /*          //是否自动旋转
@@ -61,7 +76,6 @@ export default {
           controls.enableZoom = true;
 /*          // 使动画循环使用时阻尼或自转 意思是否有惯性
           controls.enableDamping = true;*/
-
           // 设置OrbitControls的目标点，即相机围绕的中心点
           controls.target = new THREE.Vector3(-433, 300, -217);
           // 更新OrbitControls的状态，使其生效
@@ -99,6 +113,8 @@ export default {
         console.log(camera);*/
         // 渲染场景和相机
         renderer.render(scene, camera);
+        // 渲染标签
+        labelRenderer.render(scene, camera);
       };
       // 开始渲染循环
       animate();