3d glb model code 제거

src/components/map/mapbox/MapBoxMap.js

@@ -22,10 +22,6 @@ import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 
 import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions';
-import * as THREE from 'three';
-
-// example 3d gltf 파일
-import UamGltf from './models/out.glb';
 
 let gridCoords = [];
 let altitudeMarker = [];
@@ -424,65 +420,6 @@ export default function MapBoxMap() {
         labelLayerId
       );
 
-      /*************************************************************** 3D UAM Model Layer 추기 코드 start */
-
-      // map.addLayer({
-      //   id: 'custom-threebox-model',
-      //   type: 'custom',
-      //   renderingMode: '3d',
-      //   onAdd: function () {
-      //     // 3d model option
-      //     const options = {
-      //       obj: UamGltf, // 3D Model 파일
-      //       type: 'gltf', // 3D Model 확장자 타입
-      //       scale: { x: 50, y: 50, z: 50 }, // 3D Model 크기 값
-      //       units: 'meters', // 높이 단위
-      //       rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
-      //     };
-
-      //     tb.loadObj(options, model => {
-      //       let longitude = 127.81101412107547; // 3D Model 경도 값
-      //       const latitude = 37.510357; // 3D Model 위도 값
-      //       let hei = 0; // 3D Model 높이 값
-
-      //       model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
-      //       model.setRotation({ x: 0, y: 0, z: 241 }); // 3D Model 방향 각도 지정
-      //       tb.add(model);
-
-      //       // 0.5초마다 모델의 위치를 변경
-      //       setInterval(() => {
-      //         longitude += 0.001; // 경도를 약간 증가시킵니다.
-      //         hei += 50; // 높이값 증가
-      //         model.setCoords([longitude, latitude, hei]);
-      //       }, 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();
-      //     });
-      //   },
-
-      //   render: function () {
-      //     tb.update();
-      //   }
-      // });
-      /*************************************************************** 3D UAM Model Layer 추기 코드 end */
-
       // 김포 3d 공역
       map.addLayer({
         id: 'route',
@@ -502,43 +439,6 @@ export default function MapBoxMap() {
             });
             tb.add(line);
           }
-          // const scene = new THREE.Scene();
-          // const geojsonGeometry = new THREE.Geometry();
-          // gimPo.features.forEach(feature => {
-          //   const coordinates = feature.geometry.coordinates;
-
-          //   for (let i = 0; i < coordinates.length; i++) {
-          //     const coordinate = coordinates[i];
-          //     const height = coordinate[2]; // Get the height from the GeoJSON
-
-          //     // Create a vertex for each coordinate with height
-          //     const vertex = new THREE.Vector3(
-          //       coordinate[0],
-          //       coordinate[1],
-          //       height
-          //     );
-          //     geojsonGeometry.vertices.push(vertex);
-          //   }
-          // });
-          // console.log(tb);
-          // // Create Line Material
-          // const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // Color for lines
-
-          // // Create Line Mesh
-          // const geojsonLines = new THREE.Line(geojsonGeometry, lineMaterial);
-
-          // // Add the lines to Threebox
-          // tb.add(geojsonLines);
-          // // Adjust position if needed
-          // // geojsonLines.position.set(0, 0, 0);
-
-          // // Create a filled mesh (optional)
-          // const filledGeometry = new THREE.Geometry();
-          // // Add vertices and faces to filledGeometry to fill between the lines
-
-          // const fillMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Color for fill
-          // const geojsonFill = new THREE.Mesh(filledGeometry, fillMaterial);
-          // tb.add(geojsonFill);
         },
         render: function () {
           tb.update();
@@ -599,38 +499,6 @@ export default function MapBoxMap() {
     });
     setMapObject(map);
     dispatch(mapInitAction(map));
-
-    // map.on('style.load', () => {
-    //   map.addLayer({
-    //     id: 'custom-threebox-model',
-    //     type: 'custom',
-    //     renderingMode: '3d',
-    //     onAdd: function () {
-    //       // Creative Commons License attribution:  Metlife Building model by https://sketchfab.com/NanoRay
-    //       // https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
-    //       const scale = -20;
-    //       const options = {
-    //         obj: './src/components/map/mapbox/diorama/scene.gltf',
-    //         // obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
-    //         type: 'gltf',
-    //         units: 'meters',
-    //         scale: 1,
-    //         anchor: 'center',
-    //         rotation: { x: 90, y: 0, z: 0 }
-    //       };
-
-    //       tb.loadObj(options, model => {
-    //         model.setCoords([127.85101412107547, 37.520357, 1000]);
-    //         model.setRotation({ x: 0, y: 0, z: 241 });
-    //         tb.add(model);
-    //       });
-    //     },
-
-    //     render: function () {
-    //       tb.update();
-    //     }
-    //   });
-    // });
   };
 
   return (