Babylon.jsでVueを使用するチュートリアルをNuxt3で試す
概要
以前、Babylon.jsとNuxt3を組み合わせたリポジトリを作成しました。
一方、Babylon.jsでVueを使用するチュートリアルが以下で公開されています。
今回は、上記サイトにある以下のチュートリアルをNuxt3で実装しました。
デモサイトは以下です。
ソースコードは以下です。
チュートリアル
Passing data from BabylonJS to Vue using callbacks
（日本語訳）これは、最も冗長ですが、最も安全で、最も拡張性と再利用性のあるアプローチです。基本的には、BabylonJSのシーンコードでメソッドを作成し、それに応じてエクスポートすることで、Vueコンポーネントにインポートし、それぞれを呼び出すことができるようになります。
Passing data from BabylonJS to Vue using an exposed Engine object
（日本語訳）ここでの大きな変更は、createSceneメソッドがEngineとSceneオブジェクトを返すことで、それらがVueコンポーネントに公開され、コンポーネントが直接それらにアクセスできるようになったことです。この2つのオブジェクトは、後でアクセスできるようにVueコンポーネントに保存されます。その直後に、FPSの値を1秒ごとに親のApp.vueコンポーネントに送信するインターバルを作成します。BabylonJS EngineのオブジェクトからFPSの値を直接Vueコンポーネントに取り込みます。
Sending data from Vue to BabylonJS with loose coupling and without exposing the BabylonJS objects to Vue
（日本語訳）すでに書いたように、アクセスや操作が必要なものすべてに、メソッドを作成するだけです。（中略）BabylonJSのシーンファイルを修正し、これらのメソッドをエクスポートして、Vueコンポーネントでインポートできるようにします。
Sending data from Vue to BabylonJS and vice versa with an exposed BabylonJS Vector3 object
（日本語訳）この例では、公開されたBabylonJSのオブジェクトを使った通信を紹介します。最後のメソッドでは、EngineとSceneオブジェクトを公開します。公開できるのは、ごくわずかです。例えば、Scene全体を公開するよりも、Vector3だけを公開する方が、はるかに良い方法です。
このシナリオでは、BabylonJSのシーンから、必要なVector3オブジェクトを、メソッド呼び出しで取得します。getPositionとgetRotationのメソッドを使用します。これらのVector3オブジェクトは、親コンポーネントのApp.vueに出力され、そこでデータが表示されます。
Sending data from Vue to BabylonJS with an exposed BabylonJS Engine and Scene object
（日本語訳）そして最後に試す3つ目の方法は、EngineとSceneオブジェクトをBabylonScene Vueコンポーネントに公開する方法です。
まとめ
それぞれの方法の違いについて十分に理解できていないため、引き続き検討を行いたいと思います。
Vue（Vue3およびNuxt3）でBabylon.jsを使用する際の参考になりましたら幸いです。
Discussion