pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

3d 모델 드론 스케일 수정, uam(아라벳길) 회랑 높이 150m 적용, 버티포트 3d 모델 추가

master
김장현 9 months ago
parent
db4f15bfd5
commit
b2b8971c98
3 changed files with 325 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 431
      src/components/map/mapbox/MapBoxMap.js
  2. 27
      src/components/map/mapbox/feature/FeatureAirZone.js
  3. BIN
      src/components/map/mapbox/models/scene.glb

431
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -20,6 +20,8 @@ import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
import gimPoGrid from '../../../components/map/geojson/airportAirArea.json'; import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
// 김포 선형 공역 // 김포 선형 공역
import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
// uam 회랑
import uamRoute from '../../map/geojson/uamRouteArea.json';
import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions'; import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions';
import * as THREE from 'three'; import * as THREE from 'three';
@ -31,8 +33,155 @@ import * as THREE from 'three';
* drone-1.glb : 드론 3D Model * drone-1.glb : 드론 3D Model
* out.glb : UAM 3D Model * out.glb : UAM 3D Model
*/ */
import UamGltf from './models/boeing_777_airplane.glb'; import uamGltf from './models/drone-1.glb';
import uamVertipad from './models/scene.glb';
const buffer = [
[126.6238280624428, 37.564054382187464, 150],
[126.62380067423932, 37.56411591628361, 150],
[126.62378474611053, 37.56417995533479, 150],
[126.62378061257233, 37.56424515453873, 150],
[126.6237883604588, 37.56431014472685, 150],
[126.6238078270962, 37.56437356111632, 150],
[126.62732637084741, 37.5730511544423, 150],
[126.62735773537004, 37.57311260229055, 150],
[126.62740009559104, 37.57316971869807, 150],
[126.62745253331413, 37.57322126558242, 150],
[126.62751391189128, 37.573266125586436, 150],
[126.6275829008607, 37.57330332629931, 150],
[126.6310262460951, 37.57487889004297, 150],
[126.6311005070863, 37.57490735776204, 150],
[126.63117917555974, 37.57492693911049, 150],
[126.6312605831535, 37.574937218816025, 150],
[126.63134300341268, 37.574937978871155, 150],
[126.63142468840485, 37.574929203156806, 150],
[126.64795456355091, 37.57216433020499, 150],
[126.66064609063244, 37.573287735663136, 150],
[126.66073135497469, 37.57329012862925, 150],
[126.71219610879939, 37.57163150905567, 150],
[126.71228541231419, 37.57162291700238, 150],
[126.7123718776867, 37.57160317203693, 150],
[126.71245332079684, 37.57157277291867, 150],
[126.71252768439354, 37.57153248753101, 150],
[126.71259309006285, 37.57148333348379, 150],
[126.71264788567753, 37.571426552407196, 150],
[126.72361603679022, 37.55796529876466, 150],
[126.74227560152673, 37.551779117463816, 150],
[126.7522040720733, 37.55337217735081, 150],
[126.75229129293449, 37.55338062802695, 150],
[126.7523791055154, 37.55337822666518, 150],
[126.75246539247529, 37.5533650311671, 150],
[126.7525480732611, 37.55334135970284, 150],
[126.75579364309328, 37.55217829789471, 150],
[126.75587070921613, 37.55214472546204, 150],
[126.75594031949056, 37.55210206049736, 150],
[126.75600079604776, 37.5520513313947, 150],
[126.75605068118615, 37.55199376092348, 150],
[126.76760589086275, 37.53615038008557, 150],
[126.7676438204641, 37.5360876464801, 150],
[126.76766915789482, 37.53602100786133, 150],
[126.76768129795232, 37.53595205602986, 150],
[126.7676799506836, 37.53588243803773, 150],
[126.76766514830807, 37.53581381684507, 150],
[126.76763724444433, 37.53574783159705, 150],
[126.76759690565989, 37.53568605847025, 150],
[126.76754509554623, 37.535629973023376, 150],
[126.76748305169939, 37.535580914951915, 150],
[126.76290194626132, 37.53247981789287, 150],
[126.76283115783357, 37.53243895709915, 150],
[126.76275330879855, 37.53240727079065, 150],
[126.76267025862583, 37.53238551581021, 150],
[126.76258399101054, 37.53237421178551, 150],
[126.76249656649381, 37.53237362871809, 150],
[126.76241007324829, 37.53238378053468, 150],
[126.76232657720405, 37.53240442475447, 150],
[126.76224807270525, 37.53243506828064, 150],
[126.76217643487661, 37.53247497917769, 150],
[126.74069262521496, 37.54652770230293, 150],
[126.72105613762403, 37.55331395924351, 150],
[126.72097009222837, 37.55335102626893, 150],
[126.72089335254, 37.553399339183436, 150],
[126.72082821258904, 37.55345745374941, 150],
[126.72077661966293, 37.55352363272091, 150],
[126.7105550480309, 37.56958294101868, 150],
[126.66089003046397, 37.57103223184973, 150],
[126.65014220764405, 37.570104447257165, 150],
[126.63441483345441, 37.55518901290653, 150],
[126.63434836939835, 37.555135703657484, 150],
[126.63427170362114, 37.555091927023575, 150],
[126.6341869673753, 37.55505889995413, 150],
[126.63409651625435, 37.55503754056923, 150],
[126.63400286471169, 37.555028442638, 150],
[126.63390861616429, 37.55503185907338, 150],
[126.62880364618123, 37.55555880057077, 150],
[126.62872224261918, 37.555572099756354, 150],
[126.62864416342086, 37.55559474708482, 150],
[126.62857109246927, 37.55562625413686, 150],
[126.62850460564319, 37.55566594142098, 150],
[126.62844613683232, 37.55571295302701, 150],
[126.62839694701388, 37.555766275084146, 150],
[126.62835809705736, 37.55582475762566, 150],
[126.6238280624428, 37.564054382187464, 150],
[126.62495091356033, 37.56425948073808, 150],
[126.62926632180132, 37.55641957645043, 150],
[126.63374703115862, 37.55595707199735, 150],
[126.64942152536467, 37.57082243176737, 150],
[126.6494819929003, 37.57087159202163, 150],
[126.64955116006975, 37.57091285020618, 150],
[126.64962741370097, 37.57094524405693, 150],
[126.64970897533686, 37.570968018051374, 150],
[126.64979394271542, 37.57098064103046, 150],
[126.66080873003172, 37.57193148030834, 150],
[126.66089030862557, 37.57193380561681, 150],
[126.71093005399068, 37.570473520518696, 150],
[126.7110155200376, 37.570465802242325, 150],
[126.7110985296507, 37.57044786442179, 150],
[126.71117716556726, 37.570420121365, 150],
[126.71124961154851, 37.57038321384983, 150],
[126.71131419433043, 37.57033799432348, 150],
[126.71136942227176, 37.570285507212816, 150],
[126.71141401980613, 37.57022696480039, 150],
[126.72169390796309, 37.5540757881264, 150],
[126.74121589806943, 37.54732905907567, 150],
[126.74128561673987, 37.547300221836394, 150],
[126.7413496462557, 37.54726397318036, 150],
[126.76252938140514, 37.533410153819155, 150],
[126.76639001938337, 37.53602356058272, 150],
[126.7551633910013, 37.551416100325476, 150],
[126.75224937646537, 37.55246034604165, 150],
[126.74232959475833, 37.55086866548583, 150],
[126.74224635295539, 37.55086035633522, 150],
[126.74216248299645, 37.55086193774384, 150],
[126.74207982856083, 37.55087337494807, 150],
[126.742000206609, 37.550894416528266, 150],
[126.7230191831106, 37.55718716011606, 150],
[126.7229434377238, 37.55721776091386, 150],
[126.72287429905668, 37.55725704285292, 150],
[126.72281332488005, 37.55730412087391, 150],
[126.72276188901834, 37.557357934262605, 150],
[126.71185752948423, 37.5707407582132, 150],
[126.6607286127792, 37.572388503067096, 150],
[126.64798953962035, 37.571260882439994, 150],
[126.64789967413597, 37.5712586421025, 150],
[126.64781049681692, 37.57126775684084, 150],
[126.63140325396725, 37.57401214044211, 150],
[126.62833651270446, 37.57260890346539, 150],
[126.62495091356033, 37.56425948073808, 150]
];
const ghlfkd = [
[126.6243464, 37.5642352],
[126.62469825999999, 37.565102957777775],
[126.62505012, 37.56597071555556],
[126.62540197999999, 37.566838473333334],
[126.62575384, 37.56770623111111],
[126.6261057, 37.568573988888886],
[126.62645755999999, 37.56944174666667],
[126.62680942, 37.570309504444445],
[126.62716128, 37.57117726222222],
[126.62751314, 37.572045020000004],
[126.627865, 37.57291277777778]
];
let gridCoords = []; let gridCoords = [];
let altitudeMarker = []; let altitudeMarker = [];
let linerAltitude = [ let linerAltitude = [
@ -142,7 +291,7 @@ export default function MapBoxMap() {
map.removeLayer('maine'); map.removeLayer('maine');
map.removeSource('maine'); map.removeSource('maine');
} }
console.log(mapControl.areaType);
if (altitudeMarker.length > 0) { if (altitudeMarker.length > 0) {
altitudeMarker.map(i => { altitudeMarker.map(i => {
i.remove(); i.remove();
@ -293,12 +442,6 @@ export default function MapBoxMap() {
}); });
}; };
let stats;
const animate = () => {
requestAnimationFrame(animate);
stats.update();
};
// 맵박스 지도 초기 셋팅 // 맵박스 지도 초기 셋팅
const mapBoxMapInit = () => { const mapBoxMapInit = () => {
mapboxgl.accessToken = MAPBOX_TOKEN; mapboxgl.accessToken = MAPBOX_TOKEN;
@ -314,11 +457,15 @@ export default function MapBoxMap() {
const language = new MapboxLanguage(); const language = new MapboxLanguage();
map.addControl(language); map.addControl(language);
// 거리 축적 // 거리 축적
// map.addControl(new mapboxgl.ScaleControl()); map.addControl(new mapboxgl.ScaleControl());
// 드래그 제한 2d // 드래그 제한 2d
// map.dragRotate.disable(); // map.dragRotate.disable();
map.on('click', e => {
console.log(e);
});
const tb = (window.tb = new threebox.Threebox( const tb = (window.tb = new threebox.Threebox(
map, map,
map.getCanvas().getContext('webgl'), map.getCanvas().getContext('webgl'),
@ -441,62 +588,104 @@ export default function MapBoxMap() {
/*************************************************************** 3D UAM Model Layer 추기 코드 start */ /*************************************************************** 3D UAM Model Layer 추기 코드 start */
// map.addLayer({ map.addLayer({
// id: 'custom-threebox-model', id: 'custom-threebox-model',
// type: 'custom', type: 'custom',
// renderingMode: '3d', renderingMode: '3d',
// onAdd: function () { onAdd: function () {
// // 3d model option // 3d model option
// const options = { const options = {
// obj: UamGltf, // 3D Model 파일 obj: uamGltf, // 3D Model 파일
// type: 'gltf', // 3D Model 확장자 타입 type: 'gltf', // 3D Model 확장자 타입
// scale: { x: 0, y: 0, z: 0 }, // 3D Model 크기 값 scale: { x: 0, y: 0, z: 0 }, // 3D Model 크기 값
// units: 'meters', // 높이 단위 units: 'meters', // 높이 단위
// rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값 rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
// }; };
// tb.loadObj(options, model => { tb.loadObj(options, model => {
// let longitude = 127.81101412107547; // 3D Model 경도 값 let longitude = 126.6243464; // 3D Model 경도 값
// const latitude = 37.510357; // 3D Model 위도 값 const latitude = 37.5642352; // 3D Model 위도 값
// let hei = 0; // 3D Model 높이 값 let hei = 150; // 3D Model 높이 값
// model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정 model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
// model.setRotation({ x: 0, y: 0, z: 90 }); // 3D Model 방향 각도 지정 model.setRotation({ x: 0, y: 0, z: 90 }); // 3D Model 방향 각도 지정
// tb.add(model); tb.add(model);
let index = 0;
// // 0.5초마다 모델의 위치를 변경 // 0.5초마다 모델의 위치를 변경
// setInterval(() => { setInterval(() => {
// longitude += 0.001; // 경도를 약간 증가시킵니다. // longitude += 0.001; // 경도를 약간 증가시킵니다.
model.setCoords([ghlfkd[index][0], ghlfkd[index][1], hei]);
index++;
if (index === ghlfkd.length) {
// 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
index = 0;
}
// hei += 50; // 높이값 증가 // hei += 50; // 높이값 증가
// model.setCoords([longitude, latitude, hei]); }, 1000);
// }, 1000);
// const mixer = new THREE.AnimationMixer(model);
// // 애니메이션 클립 찾기
// const clips = model.animations;
// console.log(clips);
// if (clips && clips.length) {
// // 모든 애니메이션 클립 재생
// clips.forEach(clip => {
// mixer.clipAction(clip).play();
// });
// }
// function update() { const mixer = new THREE.AnimationMixer(model);
// mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
// // tb.update(); // 애니메이션 클립 찾기
// requestAnimationFrame(update); const clips = model.animations;
// }
// // 애니메이션 시작 if (clips && clips.length) {
// update(); // 모든 애니메이션 클립 재생
// }); clips.forEach(clip => {
// }, mixer.clipAction(clip).play();
});
}
// render: function () { function update() {
mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
// tb.update(); // tb.update();
// } requestAnimationFrame(update);
// }); }
// 애니메이션 시작
update();
});
},
render: function () {
tb.update();
}
});
const uamRouteArr = [
...uamRoute.features[0].geometry.coordinates,
[126.8045935, 37.56016, 150]
];
for (let i = 0; i < uamRouteArr.length; i++) {
map.addLayer({
id: `custom-threebox-model_${i}`,
type: 'custom',
renderingMode: '3d',
onAdd: function () {
// 3d model option
const options = {
obj: uamVertipad, // 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 방향 각도 초기 값
};
tb.loadObj(options, model => {
let longitude = uamRouteArr[i][0]; // 3D Model 경도 값
const latitude = uamRouteArr[i][1]; // 3D Model 위도 값
let hei = 0; // 3D Model 높이 값
model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
model.setRotation({ x: 0, y: 0, z: 90 }); // 3D Model 방향 각도 지정
tb.add(model);
});
},
render: function () {
tb.update();
}
});
}
/*************************************************************** 3D UAM Model Layer 추기 코드 end */ /*************************************************************** 3D UAM Model Layer 추기 코드 end */
// 김포 3d 공역 // 김포 3d 공역
@ -518,43 +707,65 @@ export default function MapBoxMap() {
}); });
tb.add(line); tb.add(line);
} }
// const scene = new THREE.Scene(); },
// const geojsonGeometry = new THREE.Geometry(); render: function () {
// gimPo.features.forEach(feature => { tb.update();
// 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 // uam 회랑
// tb.add(geojsonLines); map.addLayer({
// // Adjust position if needed id: 'uamRoute',
// // geojsonLines.position.set(0, 0, 0); type: 'custom',
renderingMode: '3d',
onAdd: function () {
const uamRouteLoad = uamRoute.features.filter(
i => i.geometry.type === 'LineString'
);
for (let i = 0; i < uamRouteLoad.length; i++) {
let line;
// // Create a filled mesh (optional) for (
// const filledGeometry = new THREE.Geometry(); let j = 0;
// // Add vertices and faces to filledGeometry to fill between the lines j < uamRouteLoad[i].geometry.coordinates.length;
j++
) {
uamRouteLoad[i].geometry.coordinates[j].push(150);
}
// const fillMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Color for fill const options = {
// const geojsonFill = new THREE.Mesh(filledGeometry, fillMaterial); path: uamRouteLoad[i].geometry.coordinates
// tb.add(geojsonFill); };
let lineGeometry = options.path;
line = tb.line({
geometry: lineGeometry,
width: 2,
color: 'red'
});
tb.add(line);
}
},
render: function () {
tb.update();
}
});
// buffer
map.addLayer({
id: 'uamBuffers',
type: 'custom',
renderingMode: '3d',
onAdd: function () {
let line;
const options = {
path: buffer
};
let lineGeometry = options.path;
line = tb.line({
geometry: lineGeometry,
width: 2,
color: 'black'
});
tb.add(line);
}, },
render: function () { render: function () {
tb.update(); tb.update();
@ -615,38 +826,6 @@ export default function MapBoxMap() {
}); });
setMapObject(map); setMapObject(map);
dispatch(mapInitAction(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 ( return (

27
src/components/map/mapbox/feature/FeatureAirZone.js
Unescape View File

@ -53,6 +53,7 @@ export const FeatureAirZone = props => {
...uamGeoJson, ...uamGeoJson,
features: [...uamGeoJson.features, bufferGeoJson] features: [...uamGeoJson.features, bufferGeoJson]
}; };
setUamGeoJson(obj); setUamGeoJson(obj);
props.map.getSource('uam').setData(obj); props.map.getSource('uam').setData(obj);
} }
@ -374,7 +375,6 @@ export const FeatureAirZone = props => {
const path = [buffer.x, buffer.y]; const path = [buffer.x, buffer.y];
paths.push(path); paths.push(path);
}); });
const bufferObj = { const bufferObj = {
type: 'Feature', type: 'Feature',
geometry: { geometry: {
@ -413,7 +413,6 @@ export const FeatureAirZone = props => {
) )
.addTo(props.map); .addTo(props.map);
}); });
// uam 관련 Source, Layer // uam 관련 Source, Layer
props.map.addSource('uam', { props.map.addSource('uam', {
type: 'geojson', type: 'geojson',
@ -449,18 +448,18 @@ export const FeatureAirZone = props => {
}, },
filter: ['==', ['get', 'type'], 'routeBuffer'] filter: ['==', ['get', 'type'], 'routeBuffer']
}); });
props.map.addLayer({ // props.map.addLayer({
id: 'routePoint', // id: 'routePoint',
type: 'circle', // type: 'circle',
source: 'uam', // source: 'uam',
paint: { // paint: {
'circle-radius': 5, // 'circle-radius': 5,
'circle-color': '#ffffff', // 'circle-color': '#ffffff',
'circle-stroke-color': '#000000', // 'circle-stroke-color': '#000000',
'circle-stroke-width': 1 // 'circle-stroke-width': 1
}, // },
filter: ['==', ['get', 'type'], 'routePoint'] // filter: ['==', ['get', 'type'], 'routePoint']
}); // });
props.map.addLayer({ props.map.addLayer({
id: 'towerLine', id: 'towerLine',
type: 'line', type: 'line',

BIN
src/components/map/mapbox/models/scene.glb
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save