⛳

【Babylon.js x Vue】click eventをvueにわたす

に公開
Vue.js
Nuxt 3
babylon
tech

概要

以下のように、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

まとめ

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

動画版（生成AIによる自動生成）: この記事の内容を掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。

Discussion