はじめに
Vue.jsとBabylon.jsのサンプルを作ろうとしたときに、Web開発に慣れていないとどう作ればいいかわからないものです。
今回は最小限の構成を作るまでの手順を紹介します。
環境
| 項目 | バージョン |
|---|---|
| Node.js | v16.14.0 |
| vue | 3.2.25 |
| vite | 2.8.6 |
| babylonjs/core | 5.0.0-rc.13 |
今回のアウトプット
Githubレポジトリ
動作サンプルページ
https://iwaken71.github.io/vite-vue-babylon-sample/index.html
手順
Vite+Vue.jsのセットアップ
プロジェクトのルートディレクトリに移動して、Viteの初期化コマンドをたたきます。
npm init vite@latest
すると対話式で聞かれます。
√ Project name: ... vue-project-test
√ Select a framework: » vue
√ Select a variant: » vue
ディレクトリを移動してライブラリをインストールします。
cd vue-project-test
npm install
ここでプロジェクトのディレクトリ構造はこのようになっています。
この状態で
npm run dev
を実行すると、開発サーバーが起動します。
http://localhost:3000/
を検索すると、このように表示されるはずです。
Babylon.jsのインストール
@babylonjs/core@previewをinstallします。
preview版を避けたい場合は@babylonjs/coreにします。
本記事では、5.0.0を使用したいため@babylonjs/core@previewを選択します。
npm install @babylonjs/core@preview
Vue Componentを編集
ここからBabylon.jsのsceneを表示するVue Compobnentを作ります。
まず ./src/components以下にBabylonScene.vueファイルを新規作成します。
そして以下のように書きます。
次に./srcフォルダ以下にscenesディレクトリを作ります。その
./src/scenes以下にMyFirstScene.jsファイルを新規作成をします。そして以下のように書きます。
次に .src/App.vueを開きます。そして、HelloWorld.vueコンポーネントを削除して、BabylonScene.vueコンポーネントを追加します。以下のように書きます。
この状態で開発サーバーを立ち上げると、Viewerが立ち上がるはずです。
npm run dev
Buildすることで./dist以下にbundleファイルができます。
distディレクトリ以下のファイルをWebサーバーにアップロードすると、閲覧することができます。
npm run build
Discussion