[街を包囲] vue3 + vite + ts load 3dTiles

この記事は 3D 開発に触れたことがない初心者に適しています. 解決策を見つける部分はより詳細です. 記事の下部に関連パッケージの構成ファイルがあります. この部分をスキップして直接使用できます.

viteをインストールする

Vite はフロントエンドの構築ツールです。vite を使用してプロジェクトインフラストラクチャを構築します。

ドキュメンテーション：

インストール：

# 使用 NPM
$ npm init vite@latest

# 使用 Yarn
$ yarn create vite

# 使用 PNPM
$ pnpm create vite

vite を使用して vue3 + ts プロジェクトをビルドする

インストール：

# 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-ts

他のテンプレートをインストールする必要がある場合は、ドキュメントを参照してください。

3dTiles ファイルを読み込む

初めて 3D 開発を引き継いだので、どのソリューションがより適しているか分からず、最初の段階で多くの問題に遭遇しました. 以下は、ソリューションを見つける一般的なプロセスです.

解決策 1: three.js

web3dを開発するにあたり、まずthree.jsを使おうと思ったのですが、記事「threejsが3dtiles(斜め写真)のデータを読み込む」を参考にしたら、データの読み込みは無事完了しましたが、モデルのインターフェースが表示できませんでした。同じ問題があります。

3D開発の経験がゼロの私にとっては、関連するドキュメントを検索して解決しようとすることしかできず、数時間かかりましたが、まだ解決できませんでしたが、セシウムの3Dフレームワークが3dTiles の読み込みにより適しています。プロジェクトの開発中、限られた時間内に木にぶら下がることはできません.時間内に方向を切り替えることで時間を節約でき、2つのドキュメントを比較した後、最終的に3つをあきらめます.

解決策 2: cesium.js

Cesium は当然 3dTiles フォーマットをサポートします. 3dTiles の読み込みは非常に簡単ですが, 追加の設定が必要です.

ネット上にはセシウムを使ったvueの設定チュートリアルがたくさんありますが、ほとんどがwebpackを使って設定されており、vue2版がほとんどで、さまざまな資料の内容がバラバラで、このプロジェクトに追加の時間コストがかかっており、初心者向け. 非常に無愛想だと言いました.

設定を試みたところ、常に無効であることがわかり、これらの設定の意味を理解できず、最終的に cesium を直接使用することをあきらめ、より便利な vue + cesium ソリューションを探し続けました。

cesium.js 中国語ドキュメント

カメラ - セシウムのドキュメント

解決策 3: vue-セシウム

いくつかの検索の後、最終的に vue-cesium を選択しました. Vue-cesium は vue3 と typescript をサポートしています. 私はそれを element-ui の 3d バージョンと呼んでいます. それは箱から出してすぐに動作し、非常に便利で、あらゆる種類の頭痛や時間のかかるものを排除します.構成プロセスは、初心者にとって非常に使いやすいものです。

ドキュメンテーション：

VueCesium - CesiumJS の Vue 2.x & Vue 3.x コンポーネント.

インストール：

# NPM
$ npm install vue-cesium@next --save

# Yarn
$ yarn add vue-cesium@next

# pnpm
$ pnpm install vue-cesium@next

使用：

インストールが完了したら、完全にインポートするか、オンデマンドでインポートするかを選択できます。私はいくつかのコンポーネントしか使用していないため、オンデマンドでインポートし、VcPrimitiveTileset コンポーネントを使用して 3dTiles ファイルをインポートすることにしました。

他の特定のビジネスの実装については、ドキュメントを確認してください。

使用中に見つかった問題:

1. ドキュメントVcOverlayHtmlコンポーネントの記述エラー

スタイルファイルを正しくインポートします: import 'vue-cesium/dist/index.css'

ドキュメントを開いたときに表示が正しい場合は、ドキュメントが更新されたことを意味します。

2.ビルドパッケージエラー

パッケージ化すると、vue-cesium ソースコードに ts エラーが発生しますが、そのほとんどは Cesium によって検出されないため、tsconfig.json の node_modules のチェックを無視する必要があります。vue-cesium パッケージを無視するようにのみ構成できます。 . 私はすべて無視されます。

// tsconfig.json
{
  "compilerOptions": {
    "skipLibCheck": true,
    ...
  },

  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/",
    "./node_modules/@types/node/index.d.ts",
    …
  ],
  }

注: tsconfig.json がプロジェクトのルートディレクトリに構成されていない場合は、最初にこのファイルを追加する必要があります。以下を参照してください: tsconfig.json · TypeScript Chinese Network · TypeScript — JavaScript のスーパーセット

vue-cesium コンポーネントを参照するファイルでは、ts も Cesiu が見つからないというエラーを発生させるため、このファイルのみを無視するように ts を構成できます。

// ExampleComponent.vue
<script lang="ts">
// @ts-nocheck
…
</script>

私のと同じバージョンの vue-cesium を使用しているときに上記のエラーが発生した場合, パニックにならないでください. グローバル構成コンポーネント VcConfigProvider は、CDN を使用して、モジュラーインポートではなく vue-cesium の特定のバージョンの cesium をインポートしていることがわかります.

<vc-config-provider 
	:cesium-path='https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js'>
</ vc-config-provider>

vue-cesium のソースコード実装を見たことがないので、これが理由だと思います。関数の実装には影響しないため、// @ts-nocheck を直接使用して、の ts チェックを無視します。ファイル全体。

要約する

プロジェクトで使用される各パッケージとそのバージョン番号:

// 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"
  …
}