ホーム画面に Babylon.js ランタイムを表示しました

Author: il-masaru-yamagishi

package-lock.json

@@ -26,5 +26,10 @@
   "homepage": "https://github.com/babylon-js-jp-community/babylon-js-jp-community.github.io#readme",
   "devDependencies": {
     "vitepress": "^1.3.1"
+  },
+  "dependencies": {
+    "@babylonjs/core": "^7.18.0",
+    "@babylonjs/materials": "^7.18.0",
+    "vue": "^3.4.35"
   }
-}
+}

package.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ESNext",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true
+    }
+}

tsconfig.json

@@ -0,0 +1,59 @@
+<template>
+    <canvas id="box" ref="container" touch-action="none" style="width: 100%; height: 320px;"></canvas>
+</template>
+
+<style scoped>
+#box:focus-visible {
+    outline: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { Scene } from "@babylonjs/core/scene";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
+import { PointLight } from "@babylonjs/core/Lights/pointLight";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
+
+export default defineComponent({
+    setup() {
+        const container = ref();
+
+        function init() {
+            if (container.value instanceof HTMLCanvasElement) {
+                const engine = new Engine(container.value, true);
+                const scene = new Scene(engine);
+                scene.clearColor = new Color4(0, 0, 0, 0);
+                const camera = new ArcRotateCamera("Camera", Math.PI / 4, Math.PI / 4, 3, Vector3.Zero(), scene);
+                camera.attachControl(true);
+                new PointLight("light", new Vector3(1, 1, 1), scene);
+
+                const box = MeshBuilder.CreateBox("Box", {}, scene);
+                const boxMat = new StandardMaterial("BoxMat", scene);
+                boxMat.diffuseColor = new Color3(0.2, 0.2, 1);
+                box.material = boxMat;
+
+                engine.runRenderLoop(() => {
+                    box.rotation.y += 0.005;
+                    scene.render();
+                });
+                window.addEventListener("resize", () => {
+                    engine.resize();
+                });
+            }
+        }
+
+        onMounted(() => {
+            init();
+        });
+
+        return {
+            container,
+        };
+    }
+});
+</script>

website/.vitepress/theme/HomeBox.vue

@@ -0,0 +1,13 @@
+import { h } from "vue";
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import HomeBox from "./HomeBox.vue";
+
+export default {
+    extends: DefaultTheme,
+    Layout() {
+        return h(DefaultTheme.Layout, null, {
+            "home-hero-info-before": () => h(HomeBox),
+        });
+    }
+} satisfies Theme;

website/.vitepress/theme/index.mts

@@ -25,4 +25,3 @@ features:
     link: https://forum.babylonjs.com/
     details: 英語メインで活発な交流が行われています
 ---
-

website/index.md

@@ -0,0 +1,28 @@
+
+function createBg() {
+    if (!document.getElementsByClassName("is-home")) {
+      // ホーム画面ではないので何もしない
+      return;
+    }
+    if (document.getElementById("bg")) {
+      // 既に DOM が存在するので何もしない
+      return;
+    }
+    
+    const app = document.getElementById("VPContent");
+    app.style.position = "relative";
+    app.style.zIndex = 1000;
+
+    const bg = document.createElement("div");
+    bg.id = "bg";
+    bg.style.position = "absolute";
+    bg.style.top = "0";
+    bg.style.left = "0";
+    bg.style.width = "100vw";
+    bg.style.height = "100vh";
+    bg.style.zIndex = -1000; 
+    bg.style.backgroundColor = "#eee";
+    app.appendChild(bg);
+  }
+
+  window.addEventListener("load", createBg);