3d 드론 모델 변경 및 애니메이션 추가

src/components/map/mapbox/MapBoxMap.js

@@ -2,7 +2,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-// import * as THREE from 'three';
+import * as THREE from 'three';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
 import { useEffect, useState, useRef, useLayoutEffect } from 'react';
@@ -30,7 +30,7 @@ import DronPlan from './dron/DronPlan';
 import DronToast from './dron/DronToast';
 
 // example 3d gltf 파일
-import Gltf from '../../../assets/images/3dpea.gltf';
+import UamGltf from './models/out.glb';
 
 const uamPosition = {
   type: 'FeatureCollection',
@@ -494,6 +494,12 @@ export default function MapBoxMap() {
     });
   };
 
+  let stats;
+  const animate = () => {
+    requestAnimationFrame(animate);
+    stats.update();
+  };
+
   const mapBoxMapInit = () => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
 
@@ -515,9 +521,12 @@ export default function MapBoxMap() {
       map,
       map.getCanvas().getContext('webgl'),
       {
+        defaultLights: true,
+        enableSelectingFeatures: true,
         enableSelectingObjects: true,
-        enableTooltips: true,
+        enableDraggingObjects: true,
-        defaultLights: true
+        enableRotatingObjects: true,
+        enableTooltips: true
       }
     ));
 
@@ -629,6 +638,7 @@ export default function MapBoxMap() {
       );
 
       /*************************************************************** 3D UAM Model Layer 추기 코드 start */
+
       // map.addLayer({
       //   id: 'custom-threebox-model',
       //   type: 'custom',
@@ -636,9 +646,9 @@ export default function MapBoxMap() {
       //   onAdd: function () {
       //     // 3d model option
       //     const options = {
-      //       obj: Gltf, // 3D Model 파일
+      //       obj: UamGltf, // 3D Model 파일
       //       type: 'gltf', // 3D Model 확장자 타입
-      //       scale: { x: 200, y: 200, z: 200 }, // 3D Model 크기 값
+      //       scale: { x: 50, y: 50, z: 50 }, // 3D Model 크기 값
       //       units: 'meters', // 높이 단위
       //       rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
       //     };
@@ -646,7 +656,7 @@ export default function MapBoxMap() {
       //     tb.loadObj(options, model => {
       //       let longitude = 127.81101412107547; // 3D Model 경도 값
       //       const latitude = 37.510357; // 3D Model 위도 값
-      //       let hei = 100; // 3D Model 높이 값
+      //       let hei = 0; // 3D Model 높이 값
 
       //       model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
       //       model.setRotation({ x: 0, y: 0, z: 241 }); // 3D Model 방향 각도 지정
@@ -657,7 +667,26 @@ export default function MapBoxMap() {
       //         longitude += 0.001; // 경도를 약간 증가시킵니다.
       //         hei += 50; // 높이값 증가
       //         model.setCoords([longitude, latitude, hei]);
-      //       }, 500);
+      //       }, 1000);
+
+      //       const mixer = new THREE.AnimationMixer(model);
+
+      //       // 애니메이션 클립 찾기
+      //       const clips = model.animations;
+      //       if (clips && clips.length) {
+      //         // 모든 애니메이션 클립 재생
+      //         clips.forEach(clip => {
+      //           mixer.clipAction(clip).play();
+      //         });
+      //       }
+
+      //       function update() {
+      //         mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
+      //         // tb.update();
+      //         requestAnimationFrame(update);
+      //       }
+      //       // 애니메이션 시작
+      //       update();
       //     });
       //   },