🔥

Vite×Vue 3×Babylon.jsの最小限構成を作る

2022/03/30に公開

はじめに

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://github.com/iwaken71/vite-vue-babylon-sample

動作サンプルページ

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

参考資料

Iwaken Lab.

Discussion