Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

にー兄さん

March 06, 2024
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

  1. JSフレームワークと3D連携 pmndrs/react-three-fiber - React + Three.js - Reactのコンポーネントとして3Dシーンを扱える - GitHub

    starは25.5K Tresjs/tres - Vue + Three.js - 同じくVueコンポーネントとして3Dシーンを扱える - アプデ頻度も高くドキュメントもしっかししていてすごい
  2. 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/
  3. 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にリアクティブな オブジェクトをバインドできる
  4. 素の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を表示する
  5. 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がある