軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた にー兄さん（@ninisan_drumath） Vue.js v-tokyo Meetup #19

にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / Iwaken Lab. / Babylon.js勉強会 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る うちの猫たち→

本日の話 Vue.js × 3DCG(Babylon.js)

本日の話 Vue.js × 3DCG(Babylon.js) Web3D, Babylon.js面白そう と思ってもらえると嬉しいです

アジェンダ - VueでWeb3Dがしたい！ - BabyuewJSの紹介 - おわりに

VueでWeb3Dがしたい！

Webブラウザ上でのリアルタイム3DCG ここでのWeb3Dとは、WebGL(WebGPU)を使って リアルタイムレンダリングによって3Dシーンを扱うこと 昨今のブラウザやデバイスの進化によって Web上でもリッチなグラフィクスを実現できるように フレームワークとしてThree.jsが一番有名 本日の主役はBabylon.js （Babylon.jsはいいぞ！！）

JSフレームワークと3D連携 pmndrs/react-three-fiber - React + Three.js - Reactのコンポーネントとして3Dシーンを扱える - GitHub starは25.5K Tresjs/tres - Vue + Three.js - 同じくVueコンポーネントとして3Dシーンを扱える - アプデ頻度も高くドキュメントもしっかししていてすごい

TresJSがイケてる import { TresCanvas } from '@tresjs/core' 公式サイトからコードを引用https://tresjs.org/

TresJSがイケてる import { TresCanvas } from '@tresjs/core' 公式サイトからコードを引用https://tresjs.org/ どんなオブジェクトがあるのか パッと見でわかりやすい propsにリアクティブな オブジェクトをバインドできる

BabyuewJSの紹介

BabyuewJS概要 α版をGitHub・npmで公開中 https://github.com/drumath2237/BabyuewJS モチベーション： Vue × Babylon.jsなフレームワークを作ってみたい 実現したいこと： Babylon.jsによる3Dシーンの構築を Vueコンポーネントを使って実現したい

素のBabylon.jsのコード import { Engine, MeshBuilder, Scene } from "@babylonjs/core"; const main = () => { const renderCanvas = document.querySelector("#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を表示する

BabyuewJSのコード Sceneコンポーネントの子に カメラ、ライト、Boxがある

まだ機能は不十分......。 - 現状まだ簡単な形状やライトなどを置くことしかできない - ???「たぶん動くと思うからリリースしようぜ」 - コンポーネントの追加実装をしていきたい - コード自動生成ができるといいかもしれない - GitHub Projectsを公開しています - https://github.com/users/drumath2237/projects/9

技術的な詳細について 前回の技術書典15で本を出していますので もしよければ... https://techbookfest.org/product/4tAihHPnGQ9wL6nAMZ1s91?productVariantID=j EN8uRgQmjPELRjF4KQ2tw 気になる部分あれば お気軽にお声がけください！

おわりに

Vue ❤ 3D

参考 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