Traditional Culture Encyclopedia - Photography and portraiture - Attack the city slightly, vue3+vite+ts loads 3dTiles.

Attack the city slightly, vue3+vite+ts loads 3dTiles.

This article is suitable for novices who have never been exposed to 3d development. The part of finding solutions is more detailed. There are configuration files of related packages at the bottom of the article, so you can skip this part and use it directly.

Vite is a front-end building tool, and we use Vite to build the project infrastructure.

Start {# Getting Started} | Vite Chinese Website

If you need to install other templates, you can read the documentation.

As I took over 3d development for the first time, I didn't know which solutions were suitable, so I encountered many problems in the early stage. The following is the general process of finding a solution.

When developing web3d, the first thing that comes to mind is to use Three.js. When referring to the article "threejs Loads 3dtiles Data", the data is loaded successfully, but the model interface cannot be displayed. It is estimated that the same problem has appeared in this comment under this article.

For me who has experience in 3d development, I can only search related documents and try to solve them. It took several hours, but I still can't figure it out, but I also know that cesium, a 3d framework, is more suitable for loading 3dTiles. When developing a project, you can't hang yourself from a tree in a limited time. Changing the direction in time can save more time. Finally, compare the two documents and give up three decisively.

Related information:

Threejs loads 3dtiles data.

Threejs Load 3dtiles Data _Always Blog -CSDN Blog _threejs Tilt Photography

San loader-3 d tile

GitHub-National Aeronautics and Space Administration--AMMOS/3DTilesRendererJS: Using three.js to render 3D tiles in Javascript.

3DTilesRendererJS

Github-NYTimes/Three-Loader-3D Tiles: This is a Three.js loader module for processing OGC 3D Tiles created by cesium. It currently supports two main formats, batch 3D model (b3dm)-point cloud based on glTF.

Cesium naturally supports 3dTiles format, and loading 3dTiles is simple, but it requires additional configuration.

There are many online tutorials on the configuration of vue using cesium, but most of them are configured by webpack, and most of them are in vue2 version. The contents of various materials are uneven, which causes the extra time cost of this project and is very unfriendly to novices.

I tried to configure it, but it was always invalid, and I couldn't understand the meaning of these configurations. Finally, I gave up using cesium directly and continued to look for a more convenient scheme of vue+ cesium.

Cesium.js Chinese document

Camera-cesium file

After some searching, I finally chose vue- Cesium to support vue3 and typescript. I call it 3d version of element-ui, which is very convenient to unpack, eliminating all kinds of troublesome and time-consuming configuration processes, and is very friendly to novices.

Documentation:

VueCesium-Vue 2 . x & amp; Vue 3.x component of CesiumJS.

Installation:

Use:

After the installation is completed, you can choose to import completely or import on demand. Because I only use a few components, I chose to import on demand. You can import 3dTiles files with this component, VcPrimitiveTileset.

See the document for the realization of other specific services. If you have used element-ui, you will definitely use vue- Cesium.

Problems found during use:

1. Document VcOverlayHtml component description error.

Import style file correctly: import' vue-cecils/dist/index. CSS'

If the document is displayed correctly when it is opened, it means that the document has been updated.

2. Build packages to report errors

When packaging, there will be ts errors in the source code of vue- Cesium, almost all of which are errors that Cesium has not found. You need to ignore the check of node_modules in tsconfig.json. You can configure to ignore only this package of vue- cesium, but I have ignored it.

Note: If your project root directory is not configured with tsconfig.json, you need to add this file first. Please refer to: TSConfig. JSON TypeScript Chinese TypeScript-a superset of JavaScript.

In the file that references the vue- Cesium component, ts will also find errors that Cesiu did not find. You can configure ts to ignore only this file.

If you get the above error when using the same version of vue- Cesium as me, don't panic. We see that the global configuration component VcConfigProvider uses CDN to import a version of cesium for vue- cesium instead of modular import.

Since I didn't see the source code implementation of vue- Cesium, I guess this is the reason. Because it didn't affect the realization of any functions, I directly ignored the ts check of the whole file with // @ts-nocheck.

Each package used by the project and its version number: