From f870d451d852bc19a926ae4cb4d7def265d8d202 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Fri, 22 Dec 2023 12:33:11 +0900 Subject: [PATCH] =?UTF-8?q?=EC=97=AC=EC=9D=98=EB=8F=84=20uam=20=EA=B8=B0?= =?UTF-8?q?=EC=B2=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 161 +++++++++++++++++++++++-- 1 file changed, 152 insertions(+), 9 deletions(-) diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 1c13bc2..3b23d21 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -38,7 +38,7 @@ import * as THREE from 'three'; import uamGltf from './models/out.glb'; import uamVertipad from './models/scene.glb'; -const ghlfkd = [ +const arabetgilRoute = [ [126.6243464, 37.5642352, 0], [126.6243464, 37.5642352, 30], [126.6243464, 37.5642352, 60], @@ -72,6 +72,38 @@ const ghlfkd = [ [126.62751314, 37.572045020000004, 600], [126.627865, 37.57291277777778, 600] ]; +const yeouidoRoute = [ + [126.9184781388889, 37.52345361111111, 0], + [126.9184781388889, 37.52345361111111, 30], + [126.9184781388889, 37.52345361111111, 60], + [126.9184781388889, 37.52345361111111, 90], + [126.9184781388889, 37.52345361111111, 120], + [126.9184781388889, 37.52345361111111, 150], + [126.9184781388889, 37.52345361111111, 180], + [126.9184781388889, 37.52345361111111, 210], + [126.9184781388889, 37.52345361111111, 240], + [126.9184781388889, 37.52345361111111, 270], + [126.9184781388889, 37.52345361111111, 300], + [126.9184781388889, 37.52345361111111, 330], + [126.9184781388889, 37.52345361111111, 360], + [126.9184781388889, 37.52345361111111, 390], + [126.9184781388889, 37.52345361111111, 420], + [126.9184781388889, 37.52345361111111, 450], + [126.9184781388889, 37.52345361111111, 480], + [126.9184781388889, 37.52345361111111, 510], + [126.9184781388889, 37.52345361111111, 540], + [126.9184781388889, 37.52345361111111, 570], + [126.9184781388889, 37.52345361111111, 600], + [126.91982516666667, 37.52435527777777, 600], + [126.92117219444445, 37.525256944444436, 600], + [126.92251922222222, 37.52615861111111, 600], + [126.92386625, 37.52706027777778, 600], + [126.92521327777779, 37.52796194444444, 600], + [126.92656030555555, 37.528863611111106, 600], + [126.92790733333334, 37.52976527777778, 600], + [126.9292543611111, 37.53066694444445, 600], + [126.93060138888889, 37.53156861111111, 600] +]; let gridCoords = []; let altitudeMarker = []; let linerAltitude = [ @@ -477,9 +509,9 @@ export default function MapBoxMap() { ); /*************************************************************** 3D UAM Model Layer 추기 코드 start */ - + // 아라벳길 기체 map.addLayer({ - id: 'custom-threebox-model', + id: 'arabetgil-model', type: 'custom', renderingMode: '3d', onAdd: function () { @@ -533,10 +565,121 @@ export default function MapBoxMap() {
- ${ghlfkd[index][2]} M + ${arabetgilRoute[index][2]} M + 40.5 m/s + + ${arabetgilRoute[index][0].toFixed( + 6 + )} ${arabetgilRoute[index][1].toFixed(6)} + +
+
+ + `, + false + ); + + model.tooltip.visible = true; + model.setCoords([ + arabetgilRoute[index][0], + arabetgilRoute[index][1], + arabetgilRoute[index][2] + ]); + index++; + if (index === arabetgilRoute.length) { + // 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다. + index = 0; + } + // hei += 50; // 높이값 증가 + }, 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(); + } + }); + + // 여의도 기체 + map.addLayer({ + id: 'yeouido-model', + type: 'custom', + renderingMode: '3d', + onAdd: function () { + // 3d model option + const options = { + obj: uamGltf, // 3D Model 파일 + type: 'gltf', // 3D Model 확장자 타입 + scale: { x: 0, y: 0, z: 0 }, // 3D Model 크기 값 + units: 'meters', // 높이 단위 + rotation: { x: 90, y: -90, z: 0 }, // // 3D Model 방향 각도 초기 값 + anchor: 'center' + }; + + tb.loadObj(options, model => { + const longitude = 126.92962013888891; // 3D Model 경도 값 + const latitude = 37.53533861111111; // 3D Model 위도 값 + + model.addTooltip( + ` +
+
+ UAM +
+
+
+ 0 M + 0 km + + 37.52345361111111 126.9184781388889 + +
+
+
+ `, + false + ); + model.tooltip.visible = true; + + model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정 + model.setRotation({ x: 0, y: 0, z: 220 }); // 3D Model 방향 각도 지정 + tb.add(model); + + let index = 0; + // 0.5초마다 모델의 위치를 변경 + setInterval(() => { + model.addTooltip( + ` +
+
+ UAM +
+
+
+ ${yeouidoRoute[index][2]} M 40.5 m/s - ${ghlfkd[index][0].toFixed(6)} ${ghlfkd[ + ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[ index ][1].toFixed(6)} @@ -549,12 +692,12 @@ export default function MapBoxMap() { model.tooltip.visible = true; model.setCoords([ - ghlfkd[index][0], - ghlfkd[index][1], - ghlfkd[index][2] + yeouidoRoute[index][0], + yeouidoRoute[index][1], + yeouidoRoute[index][2] ]); index++; - if (index === ghlfkd.length) { + if (index === yeouidoRoute.length) { // 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다. index = 0; }