概要

以下のように、Babylon.jsでクリックしたmeshの名前を取得する方法を調査しました。

以下のチュートリアルを参考にしました。

https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2#passing-data-from-babylonjs-to-vue-using-callbacks

デモページは以下です。

https://nakamura196.github.io/nuxt3-babylonjs/8/

ページのソースコードは以下です。

https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/8/index.vue

実装方法

以下の箇所で、createSceneにcallback変数を渡しています。fpsCallbackの名前は修正したほうがよいかもしれません。

https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/components/Scene8.vue#L10-L13

そして、createScene関数において、onPointerDownの結果を渡すようにしています。

https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/scenes/Scene8.js#L44-L49

まとめ

よりよい実装方法があるかもしれませんが、参考になりましたら幸いです。