3dTiles를 로드하려면 도시 vue3 + vite + ts를 정복하세요.

이 글은 3D 개발을 접해본 적이 없는 초보자에게 적합합니다. 솔루션 찾기에 대한 부분은 글 하단에 관련 패키지의 구성 파일이 있습니다. 이 부분은 건너뛰셔도 됩니다. 그리고 직접 사용해 보세요.

Vite는 프런트엔드 구축 도구입니다. 우리는 vite를 사용하여 프로젝트 인프라를 구축합니다.

시작 {#getting-started} | Vite 중국어 웹사이트

다른 템플릿을 설치해야 하는 경우 설명서를 확인하세요.

3D 개발을 처음 맡는 터라 어떤 솔루션이 더 적합한지 몰라 초반에 많은 어려움을 겪었습니다. 일반적인 솔루션을 찾는 과정은 다음과 같습니다.

web3d를 개발할 때 가장 먼저 떠오르는 것이 three.js를 사용하는 것입니다. "3js가 3dtiles(비스듬한 사진) 데이터를 로드합니다."라는 기사를 참조하면 데이터 로딩이 성공적으로 완료되었지만 모델 인터페이스를 표시할 수 없습니다. 이 기사의 이 댓글과 동일한 문제가 발생한 것으로 추정됩니다.

3D 개발 경험이 전혀 없는 저로서는 문제를 해결하기 위해 관련 문서를 계속 검색할 수밖에 없는데 몇 시간을 투자해도 여전히 해결이 안 되지만, 또 배웠습니다. 3D 프레임워크인 세슘이 3dTiles 로딩에 더 적합합니다. 프로젝트 개발 중에는 제한된 시간 내에 나무에 매달릴 수 없으므로 시간에 맞춰 방향을 바꾸면 시간을 더 절약할 수 있습니다. 결국 두 문서를 비교한 결과 세 개는 결정적으로 포기되었습니다.

관련 정보:

threejs는 3dtiles(경사 사진) 데이터를 로드합니다.

threejs는 3dtiles(경사 사진) 데이터를 로드합니다. data_Always(always)의 블로그-CSDN Blog_ threejs Oblique 사진

three-loader-3dtiles

GitHub - NASA-AMMOS/3DTilesRendererJS: three.js를 사용하는 Javascript의 3D 타일용 렌더러

3DTilesRendererJS

GitHub - nytimes/3-loader-3dtiles: 이것은 Cesium에서 생성된 OGC 3D 타일을 처리하기 위한 Three.js 로더 모듈입니다. 현재 두 가지 주요 형식인 배치 3D 모델(b3dm) - glTF 포인트 기반을 지원합니다. cloud.

세슘은 자연스럽게 3dTiles 형식을 지원합니다. 3dTiles를 로드하는 것은 매우 간단하지만 추가 구성이 필요합니다.

인터넷에 세슘을 사용한 Vue 구성 튜토리얼이 많이 있지만 대부분 webpack을 사용하여 구성하고 있으며, 대부분 vue2 버전이고, 다양한 자료의 내용이 고르지 않아 추가적인 문제가 발생합니다. 이 프로젝트는 초보자에게 시간 비용이 매우 비우호적입니다.

구성을 시도한 결과 항상 유효하지 않다는 것을 알았고 이러한 구성의 의미를 이해할 수 없었습니다. 마침내 세슘을 직접 사용하는 것을 포기하고 vue의 더 편리한 솔루션을 계속 찾았습니다. + 세슘.

cesium.js 중국어 문서

카메라 - Cesium 문서

몇 번의 검색 끝에 마침내 vue3 및 typescript를 지원하는 vue-cesium을 선택했습니다. Element-UI의 3D 버전으로, 즉시 사용이 매우 편리하고 모든 종류의 골치 아픈 작업과 시간 소모적인 구성 프로세스가 제거되었으며 초보자에게 매우 친숙합니다.

문서:

VueCesium - CesiumJS용 Vue 2.x 및 Vue 3.x 구성 요소

설치:

사용:

설치가 완료된 후 완전히 가져오거나 요청 시 가져올 수 있습니다. 저는 몇 가지 구성 요소만 사용했기 때문에 요청 시 3dTiles 파일을 가져오도록 선택했습니다. VcPrimitiveTileset 구성요소.

다른 특정 비즈니스 구현에 대해서는 문서를 확인하세요. element-ui를 사용한 적이 있다면 반드시 vue-cesium을 사용하게 될 것입니다.

사용 중 발견된 문제:

1. 문서 VcOverlayHtml 구성 요소 설명이 잘못되었습니다.

스타일 파일을 올바르게 소개합니다: import 'vue-cesium/dist/index .css'

문서를 열었을 때 문서가 올바르게 표시되면 문서가 업데이트되었음을 ​​의미합니다.

2. 빌드 패키징 오류

패키징 시 vue-cesium 소스 코드에 ts 오류가 발생하는데, 대부분 Cesium에서 발견할 수 없는 오류입니다. tsconfig.json에서는 무시됩니다. node_modules에서 확인하려면 vue-cesium 패키지만 무시하도록 구성할 수 있지만 저는 모두 무시했습니다.

참고: 프로젝트 루트 디렉터리에 tsconfig.json이 구성되지 않은 경우 먼저 파일을 추가해야 합니다. 참조: tsconfig.json · TypeScript 중국 네트워크 · TypeScript - JavaScript의 상위 집합

vue-cesium 구성 요소를 참조하는 파일에서 ts는 Cesiu를 찾을 수 없음 오류도 수신합니다. ts가 파일을 무시하기만 하도록 구성할 수 있습니다.

나와 동일한 버전의 vue-cesium을 사용할 때 위의 오류가 발생하더라도 당황하지 마십시오. 전역 구성 구성 요소 VcConfigProvider가 CDN을 사용하여 vue에 대한 특정 버전의 세슘을 가져오는 것을 볼 수 있습니다. - 모듈형 수입품이 아닌 세슘.

vue-cesium의 소스 코드 구현을 본 적이 없기 때문에 이것이 어떤 함수의 구현에도 영향을 미치지 않기 때문에 //@ts-nocheck를 직접 사용하여 무시합니다. 전체 파일에 대한 ts 검사.

프로젝트에서 사용하는 각 패키지 및 버전 번호: