This article is suitable for novices who have never been in touch with 3D development. The part of finding solutions is more detailed. There are configuration files of related packages at the bottom of the article. You can skip this part and use it directly.
install vite
Vite is a front-end construction tool, we use vite to build the project infrastructure.
Documentation:
Start {#getting-started} | Vite Chinese Website
Install:
# 使用 NPM
$ npm init vite@latest
# 使用 Yarn
$ yarn create vite
# 使用 PNPM
$ pnpm create viteUse vite to build vue3 + ts project
Install:
# npm 6.x
npm init vite@latest my-vue-app --template vue-ts
# npm 7+, 需要额外的双横线
npm init vite@latest my-vue-app -- --template vue-ts
# yarn
yarn create vite my-vue-app --template vue-ts
# pnpm
pnpm create vite my-vue-app -- --template vue-tsIf you need to install other templates, please refer to the documentation.
Load 3dTiles file
Since I took over 3D development for the first time, I didn't know which solutions were more suitable, so I encountered many problems at the beginning stage. The following is the general process of finding a solution.
Solution 1: three.js
When developing web3d, the first thing I thought of was to use three.js. When referring to the article " threejs loads 3dtiles (oblique photography) data ", the data loading was successfully completed, but the model interface could not be displayed. Comments have the same problem.
For me, who has 0 experience in 3d development, I can only search for relevant documents and try to solve it. It took a few hours, but I still can't solve it, but I also learned that the 3d framework of cesium is more suitable for loading 3dTiles. During project development, you can’t hang yourself on a tree within a limited time. Switching direction in time can save more time, and finally give up three after comparing the two documents.
Relevant information:
Threejs loads 3dtiles (oblique photography) data
three-loader-3dtiles
GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js
3DTilesRendererJS
Solution 2: cesium.js
Cesium naturally supports the 3dTiles format. Loading 3dTiles is very simple, but additional configuration is required.
There are a lot of vue configuration tutorials using cesium on the Internet, but most of them are configured using webpack, and the vue2 version is mostly, and the content of various materials is uneven, which has caused additional time costs for this project, and for novices. Said very unfriendly.
After I tried to configure, I found that it was always invalid, and I couldn't understand the meaning of these configurations. I finally gave up using cesium directly and continued to look for a more convenient vue + cesium solution.
cesium.js Chinese documentation
Solution 3: vue-cesium
After some searching, I finally chose vue-cesium. Vue-cesium supports vue3 and typescript. I call it the 3d version of element-ui. It works out of the box and is very convenient, eliminating all kinds of headaches and time-consuming The configuration process is very friendly to novices.
Documentation:
VueCesium - Vue 2.x & Vue 3.x components for CesiumJS.
Install:
# NPM
$ npm install vue-cesium@next --save
# Yarn
$ yarn add vue-cesium@next
# pnpm
$ pnpm install vue-cesium@nextuse:
After the installation is complete, you can choose to import completely or import on demand, because I only use a few of the components, so I chose to import on demand, and use the VcPrimitiveTileset component to import 3dTiles files.
For the implementation of other specific businesses, just check the documentation. If you have used element-ui, then you will definitely use vue-cesium.
Problems found during use:
1. Document VcOverlayHtml component description error
Import the style file correctly: import 'vue-cesium/dist/index.css'
If the display is correct when you open the document, it means that the document has been updated.
2. build package error
When packaging, there will be ts errors in the vue-cesium source code, almost all of which are not found by Cesium. This needs to ignore the check in node_modules in tsconfig.json. You can configure only to ignore the vue-cesium package. I am all ignored.
// tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true,
...
},
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/",
"./node_modules/@types/node/index.d.ts",
…
],
}Note: If tsconfig.json is not configured in your project root directory, you need to add this file first, refer to: tsconfig.json · TypeScript Chinese Network · TypeScript——a superset of JavaScript
In the file that references the vue-cesium component, ts will also cause an error that Cesiu is not found. You can configure ts to ignore this file only.
// ExampleComponent.vue
<script lang="ts">
// @ts-nocheck
…
</script>If the above error occurs when you use the same version of vue-cesium as mine, don’t panic. We see that the global configuration component VcConfigProvider uses CDN to import a certain version of cesium for vue-cesium instead of modular import. .
<vc-config-provider
:cesium-path='https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js'>
</ vc-config-provider>Since I haven't seen the source code implementation of vue-cesium, I guess the reason is this, because it doesn't affect the implementation of any functions, I directly use // @ts-nocheck to ignore the ts check of the entire file.
Summarize
Each package used by the project and its version number:
// package.json
"dependencies": {
"vue": "^3.2.25",
"vue-cesium": "^3.0.9",
…
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"typescript": "^4.5.4",
"vite": "^2.8.3",
"vue-tsc": "^0.29.8"
…
}