Vite×Vue 3×Babylon.jsの最小限構成を作る
はじめに
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