Create index.html

index.html

@@ -0,0 +1,133 @@
+// Setup Babylon.js
+const canvas = document.getElementById("renderCanvas");
+const engine = new BABYLON.Engine(canvas, true);
+
+const createScene = function() {
+    const scene = new BABYLON.Scene(engine);
+
+    // Skybox setup
+    scene.environmentTexture = new BABYLON.CubeTexture("sky.jpg", scene);
+
+    // Camera
+    const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 100, BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, true);
+
+    // Light
+    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
+
+    // Load maps
+    const mapMatrix = generateRandomMap();
+    const mapWidth = mapMatrix[0].length;
+    const mapHeight = mapMatrix.length;
+
+    // Ground setup with the same size as the map
+    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: mapWidth, height: mapHeight }, scene);
+    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
+    ground.material.diffuseTexture = new BABYLON.Texture("sky.jpg", scene);
+
+    // Position ground underneath the map
+    ground.position.x = mapWidth / 2 - 0.5;
+    ground.position.z = mapHeight / 2 - 0.5;
+
+    // Create a video texture
+    const videoTexture = new BABYLON.VideoTexture("video", ["wall1.mp4"], scene, true);
+
+    // Create a material and assign the video texture to it
+    const videoMaterial = new BABYLON.StandardMaterial("videoMat", scene);
+    videoMaterial.diffuseTexture = videoTexture;
+
+    // Create map
+    createMapFromMatrix(mapMatrix, scene, videoMaterial);
+
+    // Player
+    const startPosition = getStartPosition(mapMatrix);
+    const player = BABYLON.MeshBuilder.CreateBox("player", { size: 1 }, scene);
+    player.position = new BABYLON.Vector3(startPosition.x, 0.5, startPosition.z);
+    player.material = new BABYLON.StandardMaterial("playerMat", scene);
+    player.material.diffuseTexture = new BABYLON.Texture("sky.jpg", scene);
+
+    // NPC - Red Sphere
+    const npcPosition = getRandomFreePosition(mapMatrix);
+    const npc = BABYLON.MeshBuilder.CreateSphere("npc", { diameter: 1 }, scene);
+    npc.position = new BABYLON.Vector3(npcPosition.x, 0.5, npcPosition.z);
+    npc.material = new BABYLON.StandardMaterial("npcMat", scene);
+    npc.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red color
+
+    // Basic movement
+    window.addEventListener("keydown", (event) => {
+        switch (event.key) {
+            case "ArrowUp":
+                player.position.z -= 0.1;
+                break;
+            case "ArrowDown":
+                player.position.z += 0.1;
+                break;
+            case "ArrowLeft":
+                player.position.x -= 0.1;
+                break;
+            case "ArrowRight":
+                player.position.x += 0.1;
+                break;
+        }
+    });
+
+    return scene;
+};
+
+function generateRandomMap() {
+    const size = 100;
+    const map = [];
+    for (let y = 0; y < size; y++) {
+        const row = [];
+        for (let x = 0; x < size; x++) {
+            row.push(Math.random() > 0.8 ? 1 : 0); // 1 for wall, 0 for empty
+        }
+        map.push(row);
+    }
+    return map;
+}
+
+function createMapFromMatrix(matrix, scene, wallMaterial) {
+    matrix.forEach((row, y) => {
+        row.forEach((value, x) => {
+            if (value === 1) {
+                const wall = BABYLON.MeshBuilder.CreateBox("wall_" + x + "_" + y, {
+                    width: 1,
+                    height: 2,
+                    depth: 1
+                }, scene);
+                wall.position = new BABYLON.Vector3(x, 1, y);
+                wall.material = wallMaterial; // Assign the same material to all walls
+            }
+        });
+    });
+}
+
+function getStartPosition(matrix) {
+    for (let y = 0; y < matrix.length; y++) {
+        for (let x = 0; x < matrix[y].length; x++) {
+            if (matrix[y][x] === 0) {
+                return { x, z: y }; // Starting position
+            }
+        }
+    }
+    return { x: 0, z: 0 }; // Default position if none found
+}
+
+function getRandomFreePosition(matrix) {
+    let x, z;
+    do {
+        x = Math.floor(Math.random() * matrix[0].length);
+        z = Math.floor(Math.random() * matrix.length);
+    } while (matrix[z][x] !== 0); // Ensure the position is free (no wall)
+    return { x, z };
+}
+
+const scene = createScene();
+engine.runRenderLoop(() => {
+    scene.render();
+});
+
+window.addEventListener("resize", () => {
+    engine.resize();
+});