|
|
@ -2,7 +2,7 @@ import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
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 MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { useEffect, useState, useRef, useLayoutEffect } from 'react'; |
|
|
|
import { useEffect, useState, useRef, useLayoutEffect } from 'react'; |
|
|
@ -30,7 +30,7 @@ import DronPlan from './dron/DronPlan'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
|
|
|
|
|
|
|
|
// example 3d gltf 파일
|
|
|
|
// example 3d gltf 파일
|
|
|
|
import Gltf from '../../../assets/images/3dpea.gltf'; |
|
|
|
import UamGltf from './models/out.glb'; |
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = { |
|
|
|
const uamPosition = { |
|
|
|
type: 'FeatureCollection', |
|
|
|
type: 'FeatureCollection', |
|
|
@ -494,6 +494,12 @@ export default function MapBoxMap() { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let stats; |
|
|
|
|
|
|
|
const animate = () => { |
|
|
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
|
|
stats.update(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const mapBoxMapInit = () => { |
|
|
|
const mapBoxMapInit = () => { |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
|
|
|
|
|
|
|
@ -515,9 +521,12 @@ export default function MapBoxMap() { |
|
|
|
map, |
|
|
|
map, |
|
|
|
map.getCanvas().getContext('webgl'), |
|
|
|
map.getCanvas().getContext('webgl'), |
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
defaultLights: true, |
|
|
|
|
|
|
|
enableSelectingFeatures: true, |
|
|
|
enableSelectingObjects: 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 */ |
|
|
|
/*************************************************************** 3D UAM Model Layer 추기 코드 start */ |
|
|
|
|
|
|
|
|
|
|
|
// map.addLayer({
|
|
|
|
// map.addLayer({
|
|
|
|
// id: 'custom-threebox-model',
|
|
|
|
// id: 'custom-threebox-model',
|
|
|
|
// type: 'custom',
|
|
|
|
// type: 'custom',
|
|
|
@ -636,9 +646,9 @@ export default function MapBoxMap() { |
|
|
|
// onAdd: function () {
|
|
|
|
// onAdd: function () {
|
|
|
|
// // 3d model option
|
|
|
|
// // 3d model option
|
|
|
|
// const options = {
|
|
|
|
// const options = {
|
|
|
|
// obj: Gltf, // 3D Model 파일
|
|
|
|
// obj: UamGltf, // 3D Model 파일
|
|
|
|
// type: 'gltf', // 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', // 높이 단위
|
|
|
|
// units: 'meters', // 높이 단위
|
|
|
|
// rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
|
|
|
|
// rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
|
|
|
|
// };
|
|
|
|
// };
|
|
|
@ -646,7 +656,7 @@ export default function MapBoxMap() { |
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
// let longitude = 127.81101412107547; // 3D Model 경도 값
|
|
|
|
// let longitude = 127.81101412107547; // 3D Model 경도 값
|
|
|
|
// const latitude = 37.510357; // 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.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 241 }); // 3D Model 방향 각도 지정
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 241 }); // 3D Model 방향 각도 지정
|
|
|
@ -657,7 +667,26 @@ export default function MapBoxMap() { |
|
|
|
// longitude += 0.001; // 경도를 약간 증가시킵니다.
|
|
|
|
// longitude += 0.001; // 경도를 약간 증가시킵니다.
|
|
|
|
// hei += 50; // 높이값 증가
|
|
|
|
// hei += 50; // 높이값 증가
|
|
|
|
// model.setCoords([longitude, latitude, hei]);
|
|
|
|
// 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();
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|