diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index a97bd94f..aceb90b2 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/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 (