軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app

v-tokyoにてLT登壇した資料です

Transcript

1. 軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた にー兄さん（@ninisan_drumath） Vue.js v-tokyo Meetup #19
2. にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / Iwaken Lab. / Babylon.js勉強会 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る うちの猫たち→
3. 本日の話 Vue.js × 3DCG(Babylon.js)
4. 本日の話 Vue.js × 3DCG(Babylon.js) Web3D, Babylon.js面白そう と思ってもらえると嬉しいです
5. アジェンダ - VueでWeb3Dがしたい！ - BabyuewJSの紹介 - おわりに
6. VueでWeb3Dがしたい！
7. Webブラウザ上でのリアルタイム3DCG ここでのWeb3Dとは、WebGL(WebGPU)を使って リアルタイムレンダリングによって3Dシーンを扱うこと 昨今のブラウザやデバイスの進化によって Web上でもリッチなグラフィクスを実現できるように フレームワークとしてThree.jsが一番有名 本日の主役はBabylon.js （Babylon.jsはいいぞ！！）
8. JSフレームワークと3D連携 pmndrs/react-three-fiber - React + Three.js - Reactのコンポーネントとして3Dシーンを扱える - GitHub starは25.5K Tresjs/tres - Vue + Three.js - 同じくVueコンポーネントとして3Dシーンを扱える - アプデ頻度も高くドキュメントもしっかししていてすごい
9. TresJSがイケてる <script setup> import { TresCanvas } from '@tresjs/core' </script> <template> <TresCanvas clear-color=”#82DBC5” window-size> <TresPerspectiveCamera /> <TresMesh @click=”onClick” > <TresBoxGeometry :args="[1, 1, 1]" /> <TresMeshNormalMaterial /> </TresMesh> </TresCanvas> </template> 公式サイトからコードを引用https://tresjs.org/
10. TresJSがイケてる <script setup> import { TresCanvas } from '@tresjs/core' </script> <template> <TresCanvas clear-color=”#82DBC5” window-size> <TresPerspectiveCamera /> <TresMesh @click="onClick" > <TresBoxGeometry :args="[1, 1, 1]" /> <TresMeshNormalMaterial /> </TresMesh> </TresCanvas> </template> 公式サイトからコードを引用https://tresjs.org/ どんなオブジェクトがあるのか パッと見でわかりやすい propsにリアクティブな オブジェクトをバインドできる
11. BabyuewJSの紹介
12. BabyuewJS概要 α版をGitHub・npmで公開中 https://github.com/drumath2237/BabyuewJS モチベーション： Vue × Babylon.jsなフレームワークを作ってみたい 実現したいこと： Babylon.jsによる3Dシーンの構築を Vueコンポーネントを使って実現したい
13. 素のBabylon.jsのコード import { Engine, MeshBuilder, Scene } from "@babylonjs/core"; const main = () => { const renderCanvas = document.querySelector<HTMLCanvasElement>("#renderCanvas"); if (!renderCanvas) { return; } const engine = new Engine(renderCanvas); const scene = new Scene(engine); scene.createDefaultCameraOrLight(true, true, true); MeshBuilder.CreateBox("box", { size: 0.2 }); window.addEventListener("resize", () => engine.resize()); engine.runRenderLoop(() => scene.render()); }; main(); canvasを取得し、 engineやsceneを初期化して サイズ0.2のCubeを表示する
14. BabyuewJSのコード <template> <BabyuewScene antialias> <ArcRotateCamera name="camera" :alpha="Math.PI / 3" :beta="Math.PI / 3" :radius="0.5" :target="[0, 0.05, 0]" > </ArcRotateCamera> <DirectionalLight name="light" :direction="[0.25, -1, -0.6]" :intensity="1" ></DirectionalLight> <Box name="my-box" :position="[0, 0.05, 0]" :size="0.1"> </Box> </BabyuewScene> </template> Sceneコンポーネントの子に カメラ、ライト、Boxがある
15. まだ機能は不十分......。 - 現状まだ簡単な形状やライトなどを置くことしかできない - ???「たぶん動くと思うからリリースしようぜ」 - コンポーネントの追加実装をしていきたい - コード自動生成ができるといいかもしれない - GitHub Projectsを公開しています - https://github.com/users/drumath2237/projects/9
16. 技術的な詳細について 前回の技術書典15で本を出していますので もしよければ... https://techbookfest.org/product/4tAihHPnGQ9wL6nAMZ1s91?productVariantID=j EN8uRgQmjPELRjF4KQ2tw 気になる部分あれば お気軽にお声がけください！
17. おわりに
18. Vue ❤ 3D
19. 参考 drumath2237/BabyuewJS https://github.com/drumath2237/BabyuewJS 『Vue3 + Babylon.jsなOSSライブラリをリリースするまでの開発録』 https://techbookfest.org/product/4tAihHPnGQ9wL6nAMZ1s91?productVariantID=jEN8uRgQmjPELRjF4KQ2tw 開発時に使っていた作業ログ（ Zenn） https://zenn.dev/drumath2237/scraps/c32dde3c04deba TresJS https://tresjs.org/ React Three Fiber Documentation https://docs.pmnd.rs/react-three-fiber/getting-started/introduction