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

Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs

Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs

社内勉強会で発表した資料です(公開許可済み)

にー兄さん

November 22, 2023
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

  1. Vue.js(https://ja.vuejs.org/) モダンJSフレームワーク(The Progressive JavaScript Framework) 類似ライブラリには React, Svelte, Angular, Solid,

    … 最新はv3。v2とは「ほぼ別ライブラリ」 リポジトリ(https://github.com/vuejs/core) Start数は⭐41.4Kらしい(Reactは215K)
  2. コード例(動作デモ) JavaScript, HTML, CSS が一体化したような .vueファイル JS側の変数を HTMLに埋め込んだり 変更を検知して 自動でUIを更新できる

    <script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style>
  3. コード例(動作デモ) canvas要素を使って初期化 カメラ、ライト、Cubeを 配置してレンダリングを実行 const engine = new Engine(renderCanvas, true);

    const scene = new Scene(engine) scene.createDefaultCameraOrLight(true, true, true) scene.createDefaultEnvironment() const box = MeshBuilder.CreateBox("box", {size:0.3}) box.position= new Vector3(0,0.15,0) window.addEventListener('resize', () => { engine.resize(); }); engine.runRenderLoop(() => { scene.render(); });
  4. Babylon.jsのdocsにも一応書いてある How to use BabylonJS with Vue https://doc.babylonjs.com/communityExtensions/ Babylon.js+ExternalLibraries/BabylonJS_and_Vue/ BabylonJS_and_Vue_1

    つまりscriptの中に 書けばいいじゃん もうちょっといい感じにしたい <script> import { ref, onMounted } from "@vue/runtime-core"; import { createScene } from "../scenes/MyFirstScene"; export default { name: "BabylonScene", setup() { const bjsCanvas = ref(null); onMounted(() => { if (bjsCanvas.value) { createScene(bjsCanvas.value); } }); return { bjsCanvas, }; }, }; </script>
  5. いい感じとは、つまりreact-three-fiber R3F(https://docs.pmnd.rs/react-three-fiber/) export default function App() { return ( <Canvas>

    <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> <Box position={[-1.2, 0, 0]} /> <Box position={[1.2, 0, 0]} /> </Canvas> ) } - シーンの状態が分かりやすい - ReactのI/Fで記述できてよい
  6. コード例(動作デモ) BabyuewSceneコンポーネント をscriptに配置 その中にオブジェクトを 配置していく propsは一部リアクティブ <template> <BabyuewScene antialias> <ArcRotateCamera

    name="camera" :alpha="Math.PI / 3" :beta="Math.PI / 3" :radius="0.5" :target="[0, 0.05, 0]" > </ArcRotateCamera> <DirectionalLight :direction="[0.25, -1, -0.6]" :intensity="1" ></DirectionalLight> <Box name="my-box" :position="[0, 0.05, 0]" :size="0.1"> </Box> </BabyuewScene> </template>