Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4, 2025

Commit

9365a7e

verified ·

1 Parent(s): b6a8119

Update index.html

Browse files

Files changed (1) hide show

index.html +316 -428

index.html CHANGED Viewed

@@ -1,467 +1,355 @@
 <!DOCTYPE html>
-<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Babylon.js Metaverse Demo</title>
-    <meta name="description" content="Демонстрация базовой метавселенной, созданной с помощью Babylon.js. Включает 3D-мир, управление персонажем и элементы для мобильных устройств.">
-    <!-- Подключение Babylon.js -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- (Опционально) Загрузчики для моделей (например, glTF) -->
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <!-- (Опционально) GUI для элементов интерфейса -->
-    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
     <style>
         html, body {
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
             margin: 0;
             padding: 0;
-            font-family: Arial, sans-serif;
-            color: #eee; /* Светлый текст для темного фона */
-            background-color: #111; /* Темный фон по умолчанию */
-        }
-        #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Отключает стандартные жесты браузера (важно для управления) */
-            outline: none; /* Убирает рамку при фокусе */
         }
-        /* Стили для экрана загрузки */
-        #loadingScreen {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
-            background-color: #1a1a1a;
-            color: #ffffff;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.5em;
-            z-index: 100;
-            transition: opacity 0.5s ease-out;
-        }
-        #loadingScreen.hidden {
-            opacity: 0;
-            pointer-events: none; /* Чтобы не мешал кликам после скрытия */
-        }
-        #loadingSpinner {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #3498db;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin-top: 20px;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Стили для виртуального джойстика (для мобильных) */
-        #joystickContainer {
             position: absolute;
-            bottom: 20px;
-            left: 20px;
-            width: 150px; /* Размер области джойстика */
-            height: 150px;
-            /* background-color: rgba(80, 80, 80, 0.3); */ /* Полупрозрачный фон для отладки */
-            /* border-radius: 50%; */
             z-index: 10;
-            display: none; /* По умолчанию скрыт, показываем через JS при необходимости */
-            pointer-events: none; /* Контейнер не ловит события, ловит сам джойстик GUI */
         }
-        /* Можно добавить стили для других элементов GUI здесь */
-        /* Простое уведомление */
-        #infoBox {
-             position: absolute;
-             top: 10px;
-             left: 10px;
-             background-color: rgba(0,0,0,0.5);
-             color: white;
-             padding: 8px;
-             border-radius: 5px;
-             font-size: 0.9em;
-             z-index: 5;
-        }
     </style>
 </head>
 <body>
-    <!-- Экран загрузки -->
-    <div id="loadingScreen">
-        <p>Загрузка метавселенной...</p>
-        <div id="loadingSpinner"></div>
-    </div>
-    <!-- Основной Canvas для рендеринга -->
     <canvas id="renderCanvas"></canvas>
-    <!-- Контейнер для джойстика (позиционирование) -->
-    <div id="joystickContainer"></div>
-    <!-- Информационный блок -->
-    <div id="infoBox">
-        Управление: WASD/Стрелки + Мышь (ПК) | Джойстик + Касание (Мобильные)
-    </div>
     <script>
-        // Получаем элементы DOM
-        const canvas = document.getElementById("renderCanvas");
-        const loadingScreen = document.getElementById("loadingScreen");
-        const joystickContainer = document.getElementById("joystickContainer"); // Хотя GUI не использует его напрямую, он полезен для понимания области
-        // Инициализация движка Babylon.js
-        const engine = new BABYLON.Engine(canvas, true, {
-            preserveDrawingBuffer: true,
-            stencil: true,
-            antialias: true // Включаем сглаживание для лучшей графики
-        });
-        // Глобальные переменные для сцены, камеры и управления
-        let scene;
-        let camera;
-        let inputMap = {}; // Для отслеживания нажатых клавиш
-        let moveSpeed = 0.15; // Скорость движения
-        let cameraSensitivity = 0.003; // Чувствительность мыши/касания
-        let virtualJoystick = null; // Для мобильного управления
-        // --- Функция создания сцены ---
-        const createScene = async function () {
-            scene = new BABYLON.Scene(engine);
-            scene.clearColor = new BABYLON.Color3.FromHexString("#2c3e50"); // Цвет фона (небо)
-            // --- Камера ---
-            // Универсальная камера подходит для ПК (WASD/Мышь) и имеет настройки для Touch
-            camera = new BABYLON.UniversalCamera("playerCamera", new BABYLON.Vector3(0, 2, -10), scene);
-            camera.attachControl(canvas, true); // Прикрепляем управление к canvas
-            camera.speed = 0; // Отключаем встроенное движение WASD, будем управлять вручную
-            camera.angularSensibility = 8000 * cameraSensitivity; // Настройка чувствительности вращения
-            // Настройки для камеры от первого лица
-            camera.ellipsoid = new BABYLON.Vector3(0.5, 0.9, 0.5); // Размер "тела" игрока для коллизий
-            camera.checkCollisions = true; // Включаем проверку коллизий для камеры
-            camera.applyGravity = true; // Включаем гравитацию
-            camera.minZ = 0.1; // Ближняя плоскость отсечения
-            // --- Освещение ---
-            // Мягкий окружающий свет
-            const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
-            light.intensity = 0.7;
-            light.diffuse = new BABYLON.Color3(1, 1, 1);
-            light.specular = new BABYLON.Color3(0.5, 0.5, 0.5);
-            light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
-            // Направленный свет (солнце) для теней
-            const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
-            dirLight.position = new BABYLON.Vector3(20, 40, 20);
-            dirLight.intensity = 0.8;
-            // --- Тени ---
-            // Генератор теней высокого качества (можно настроить для производительности)
-            const shadowGenerator = new BABYLON.ShadowGenerator(2048, dirLight); // 2048 - размер карты теней
-            shadowGenerator.useExponentialShadowMap = true; // Мягкие тени
-            // shadowGenerator.useBlurExponentialShadowMap = true; // Еще мягче, но дороже
-            // shadowGenerator.blurKernel = 32;
-            shadowGenerator.darkness = 0.5;
-            // --- Мир (Окружение) ---
-            // Земля
-            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, scene);
-            ground.checkCollisions = true; // Земля участвует в коллизиях
-            const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
-            // Простая текстура для земли (можно заменить на PBR материал и текстуры для "флагманской" графики)
-            const groundTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.png", scene); // Пример текстуры
-            groundTexture.uScale = 20;
-            groundTexture.vScale = 20;
-            groundMaterial.diffuseTexture = groundTexture;
-            groundMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Меньше бликов на траве
-            ground.material = groundMaterial;
-            ground.receiveShadows = true; // Земля принимает тени
-            // Небо (Skybox) для атмосферы
-            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
-            const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
-            skyboxMaterial.backFaceCulling = false; // Рендерим внутренние грани куба
-            // Текстура неба (ищите "cube texture" или "skybox texture")
-            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs-playground.com/textures/skybox", scene);
-            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-            skybox.material = skyboxMaterial;
-            // --- Добавляем объекты в мир ---
-            // Коробка
-            const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
-            box.position = new BABYLON.Vector3(5, 1, 5);
-            box.checkCollisions = true;
-            const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
-            boxMat.diffuseColor = new BABYLON.Color3.FromHexString("#e74c3c"); // Красный
-            box.material = boxMat;
-            shadowGenerator.addShadowCaster(box); // Коробка отбрасывает тень
-            // Сфера
-            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 3 }, scene);
-            sphere.position = new BABYLON.Vector3(-5, 1.5, -5);
-            sphere.checkCollisions = true;
-            const sphereMat = new BABYLON.StandardMaterial("sphereMat", scene);
-            sphereMat.diffuseColor = new BABYLON.Color3.FromHexString("#3498db"); // Синий
-            sphereMat.specularPower = 64; // Блик
-            sphere.material = sphereMat;
-            shadowGenerator.addShadowCaster(sphere); // Сфера отбрасывает тень
-            // Колонна (цилиндр)
-            const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: 6, diameter: 1}, scene);
-            cylinder.position = new BABYLON.Vector3(0, 3, 8);
-            cylinder.checkCollisions = true;
-            const cylMat = new BABYLON.StandardMaterial("cylMat", scene);
-            cylMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/rock.jpg", scene); // Текстура камня
-            cylinder.material = cylMat;
-            shadowGenerator.addShadowCaster(cylinder);
-             // Пример использования PBR материала для более реалистичного вида
-             const pbrSphere = BABYLON.MeshBuilder.CreateSphere("pbrSphere", {diameter: 2.5}, scene);
-             pbrSphere.position = new BABYLON.Vector3(-8, 1.25, 4);
-             const pbrMat = new BABYLON.PBRMaterial("pbrMat", scene);
-             pbrMat.metallic = 1.0; // Металлический
-             pbrMat.roughness = 0.2; // Относительно гладкий (отражающий)
-             pbrMat.albedoColor = new BABYLON.Color3(0.8, 0.8, 0.85);
-             pbrMat.reflectionTexture = skyboxMaterial.reflectionTexture; // Используем скайбокс для отражений
-             pbrMat.enableSpecularAntiAliasing = true; // Улучшение отражений
-             pbrSphere.material = pbrMat;
-             pbrSphere.checkCollisions = true;
-             shadowGenerator.addShadowCaster(pbrSphere);
-            // --- Физика ---
-            scene.gravity = new BABYLON.Vector3(0, -9.81 / 60, 0); // Применяем гравитацию (делим на 60 для согласования с частотой кадров)
-            scene.collisionsEnabled = true; // Включаем систему коллизий в сцене
-            // --- Управление ---
-            setupInputHandling();
-            // --- Мобильное управление (Виртуальный джойстик) ---
-            if (isMobileDevice()) {
-                setupVirtualJoystick();
-                joystickContainer.style.display = 'block'; // Показываем область джойстика
-            }
-             // --- Пост-обработка (для "флагманской" графики) ---
-             // Свечение (Bloom)
-             const pipeline = new BABYLON.DefaultRenderingPipeline(
-                "defaultPipeline", // Имя
-                true, // Использовать HDR текстуры (лучше для bloom)
-                scene, // Сцена
-                [camera] // Камеры, к которым применяется
-            );
-            pipeline.samples = 4; // Сглаживание для пост-эффектов
-            pipeline.bloomEnabled = true;
-            pipeline.bloomThreshold = 0.8; // Порог яркости для свечения
-            pipeline.bloomWeight = 0.5; // Интенсивность свечения
-            pipeline.bloomKernel = 64; // Размер размытия для свечения
-            pipeline.bloomScale = 0.5; // Масштаб текстуры свечения
-            // (Опционально) Ambient Occlusion для лучшего затенения в углах
-            // pipeline.ssaoEnabled = true;
-            // pipeline.ssaoRatio = 0.5; // Настройки SSAO (могут влиять на производительность)
-            // pipeline.ssaoBlurRatio = 0.5;
-            // --- Оптимизация ---
-            // scene.freezeActiveMeshes(); // Полезно для статичных сцен, но не для динамичных
-            // Действия после полной загрузки сцены
-            await scene.whenReadyAsync();
-            loadingScreen.classList.add('hidden'); // Скрываем экран загрузки
-            console.log("Сцена готова!");
-            return scene;
-        };
-        // --- Функция настройки обработки ввода (Клавиатура) ---
-        function setupInputHandling() {
-            scene.actionManager = new BABYLON.ActionManager(scene);
-            // Регистрация нажатия клавиши
-            scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {
-                inputMap[evt.sourceEvent.key.toLowerCase()] = true; // Записываем нажатую клавишу
-            }));
-            // Регистрация отпускания клавиши
-            scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) {
-                inputMap[evt.sourceEvent.key.toLowerCase()] = false; // Удаляем клавишу
-            }));
-             // Управление вращением камеры мышью/касанием (обрабатывается UniversalCamera)
-             // Дополнительно можно настроить чувствительность и т.д.
-        }
-        // --- Функция настройки виртуального джойстика ---
-        function setupVirtualJoystick() {
-            const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
-            virtualJoystick = new BABYLON.GUI.VirtualJoystick(true); // true = left handed joystick
-            virtualJoystick.setJoystickSensibility(2.5); // Чувствительность джойстика
-            // Настройка внешнего вида джойстика
-            virtualJoystick.joystickArea.width = "150px";
-            virtualJoystick.joystickArea.height = "150px";
-            virtualJoystick.joystickArea.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            virtualJoystick.joystickArea.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
-            virtualJoystick.joystickArea.left = "20px"; // Отступ слева
-            virtualJoystick.joystickArea.top = "-20px"; // Отступ снизу (отрицательный top при bottom-выравнивании)
-            virtualJoystick.joystickArea.background = "rgba(100, 100, 100, 0.4)";
-            virtualJoystick.joystickArea.alpha = 0.7;
-            virtualJoystick.joystickArea.cornerRadius = 75; // Круглый
-            virtualJoystick.joystickThumb.width = "60px";
-            virtualJoystick.joystickThumb.height = "60px";
-            virtualJoystick.joystickThumb.background = "rgba(200, 200, 200, 0.6)";
-            virtualJoystick.joystickThumb.color = "white"; // Цвет иконки (если есть)
-            virtualJoystick.joystickThumb.alpha = 0.8;
-            virtualJoystick.joystickThumb.cornerRadius = 30; // Круглый
-            // Скрытие стандартного контейнера джойстика (мы используем свой div для позиционирования)
-            virtualJoystick.joystickContainer.isVisible = false;
-            advancedTexture.addControl(virtualJoystick);
-            // Обработка касаний для вращения камеры на мобильных
-            let isPointerDown = false;
-            let startX = 0;
-            let startY = 0;
-            canvas.addEventListener("pointerdown", (evt) => {
-                 // Не обрабатываем клики по джойстику как вращение
-                if (virtualJoystick.joystickArea.contains(evt.clientX, evt.clientY)) {
-                    return;
                 }
-                isPointerDown = true;
-                startX = evt.clientX;
-                startY = evt.clientY;
-                 // Предотвращаем выделение текста/элементов при движении пальца
-                evt.preventDefault();
-            });
-            canvas.addEventListener("pointermove", (evt) => {
-                if (!isPointerDown) return;
-                const deltaX = (evt.clientX - startX) * cameraSensitivity;
-                const deltaY = (evt.clientY - startY) * cameraSensitivity;
-                // Вращаем камеру
-                // В UniversalCamera нужно использовать setTarget или вращать вручную
-                // Простой способ - имитировать движение мыши
-                 camera.cameraRotation.y += deltaX;
-                 camera.cameraRotation.x += deltaY;
-                // Ограничиваем вертикальное вращение
-                 camera.cameraRotation.x = Math.max(-Math.PI / 2.1, Math.min(Math.PI / 2.1, camera.cameraRotation.x));
-                startX = evt.clientX;
-                startY = evt.clientY;
-                 evt.preventDefault();
-            });
-            canvas.addEventListener("pointerup", (evt) => {
-                isPointerDown = false;
-                evt.preventDefault();
-            });
-            canvas.addEventListener("pointerout", (evt) => { // На случай, если палец ушел за пределы canvas
-                 isPointerDown = false;
-                 evt.preventDefault();
-             });
-        }
-        // --- Функция проверки, мобильное ли устройство ---
-        function isMobileDevice() {
-            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-        }
-        // --- Основной цикл рендеринга ---
-        engine.runRenderLoop(function () {
-            if (!scene || !scene.isReady()) {
-                return; // Если сцена не готова, ничего не делаем
-            }
-            // --- Обновление ��вижения игрока ---
-            const forward = new BABYLON.Vector3(
-                Math.sin(camera.rotation.y) * moveSpeed,
-                0, // Мы не двигаемся вверх/вниз клавишами напрямую (гравитация делает свое дело)
-                Math.cos(camera.rotation.y) * moveSpeed
-            );
-            const right = new BABYLON.Vector3(
-                Math.sin(camera.rotation.y + Math.PI / 2) * moveSpeed,
-                0,
-                Math.cos(camera.rotation.y + Math.PI / 2) * moveSpeed
-            );
-            const moveDirection = BABYLON.Vector3.Zero();
-            // Клавиатура
-            if (inputMap["w"] || inputMap["arrowup"]) {
-                moveDirection.addInPlace(forward);
-            }
-            if (inputMap["s"] || inputMap["arrowdown"]) {
-                moveDirection.addInPlace(forward.negate()); // Движение назад
-            }
-            if (inputMap["a"] || inputMap["arrowleft"]) {
-                moveDirection.addInPlace(right.negate()); // Движение влево
-            }
-            if (inputMap["d"] || inputMap["arrowright"]) {
-                moveDirection.addInPlace(right); // Движение вправо
-            }
-            // Джойстик (если есть)
-            if (virtualJoystick && virtualJoystick.pressed) {
-                // Добавляем вектор от джойстика к общему вектору движения
-                const joystickForward = forward.scale(virtualJoystick.deltaPosition.y);
-                const joystickRight = right.scale(virtualJoystick.deltaPosition.x);
-                moveDirection.addInPlace(joystickForward);
-                moveDirection.addInPlace(joystickRight);
-            }
-            // Применяем движение к камере
-            if (moveDirection.lengthSquared() > 0) {
-                // Нормализуем и масштабируем, чтобы диагональное движение не было быстрее
-                // moveDirection.normalize().scaleInPlace(moveSpeed); - Не нужно, уже учтено в forward/right
-                 camera.moveWithCollisions(moveDirection);
             }
-            // Рендерим сцену
-            scene.render();
-        });
-        // --- Обработчик изменения размера окна ---
-        window.addEventListener("resize", function () {
-            engine.resize();
-        });
-        // --- Запуск создания сцены ---
-        createScene().then(() => {
-            // Сцена успешно создана
-        }).catch(error => {
-            console.error("Ошибка при создании сцены:", error);
-            loadingScreen.innerHTML = "<p>Ошибка загрузки. Пожалуйста, обновите страницу.</p>";
-        });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
+    <!-- Ensures proper rendering and touch zooming on mobile devices -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Babylon.js Metaverse Demo</title>
     <style>
+        /* Basic CSS Reset & Canvas Styling */
         html, body {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
+            overflow: hidden; /* Prevent scrollbars */
+            background-color: #000; /* Black background */
         }
+        #renderCanvas {
             width: 100%;
             height: 100%;
+            display: block; /* Remove potential extra space below canvas */
+            touch-action: none; /* Prevent default browser touch actions like pinch-zoom */
         }
+        /* Simple loading indicator (optional) */
+        #loadingIndicator {
             position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 24px;
+            font-family: sans-serif;
             z-index: 10;
         }
+         /* Styles for Virtual Joystick (handled by Babylon.GUI, but could be styled if needed) */
+        /* Example: Make joystick area slightly more visible if desired */
+        /* .babylonGuiEllipse { border: 1px solid rgba(255, 255, 255, 0.2); } */
     </style>
+    <!-- Babylon.js Core Library -->
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- Babylon.js Loaders (optional, if you were loading external models) -->
+    <!-- <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> -->
+    <!-- Babylon.js GUI Library (for virtual joysticks and UI elements) -->
+    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
 </head>
 <body>
+    <!-- The canvas element where the 3D scene will be rendered -->
     <canvas id="renderCanvas"></canvas>
+    <!-- Simple loading text -->
+    <div id="loadingIndicator">Loading Metaverse Demo...</div>
     <script>
+        // Wait until the DOM is fully loaded before running the Babylon.js code
+        window.addEventListener('DOMContentLoaded', () => {
+            const canvas = document.getElementById('renderCanvas');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            // --- Basic Setup ---
+            // Antialiasing enabled for smoother edges
+            const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });
+            engine.loadingUIText = "Initializing Scene..."; // Text shown during engine init
+            const createScene = () => {
+                const scene = new BABYLON.Scene(engine);
+                // Slightly dark ambient color
+                scene.clearColor = new BABYLON.Color4(0.1, 0.1, 0.2, 1.0);
+                // Enable physics/collisions using the Oimo.js plugin (loaded implicitly by Babylon)
+                // Note: For more complex physics, you might link Cannon.js or Ammo.js explicitly
+                scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.OimoJSPlugin());
+                scene.collisionsEnabled = true; // Enable collisions globally
+                // --- Camera ---
+                // UniversalCamera is good for FPS/TPS style controls on both desktop and mobile (when paired with VJ)
+                const camera = new BABYLON.UniversalCamera("playerCamera", new BABYLON.Vector3(0, 2.5, -10), scene);
+                camera.setTarget(new BABYLON.Vector3(0, 1.5, 0)); // Look slightly forward
+                camera.attachControl(canvas, true); // Attach default controls (keyboard/mouse)
+                // Camera properties
+                camera.speed = 0.15; // Movement speed
+                camera.angularSensibility = 4000; // Mouse look sensitivity
+                camera.inertia = 0.2; // Smooth movement/rotation stop
+                // Apply gravity to the camera
+                camera.applyGravity = true;
+                // Define the collision ellipsoid around the camera (width, height, depth)
+                // This represents the player's collision volume
+                camera.ellipsoid = new BABYLON.Vector3(0.6, 1.5, 0.6); // Adjust size as needed
+                camera.checkCollisions = true; // Enable collisions for the camera
+                // Prevent camera from going below a certain height (e.g., ground level + half height)
+                camera.minZ = 0.45; // Prevent clipping through objects very close
+                // --- Lighting ---
+                // Hemispheric light provides overall ambient illumination
+                const hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0.1, 1, 0.1), scene);
+                hemiLight.intensity = 0.6;
+                hemiLight.groundColor = new BABYLON.Color3(0.3, 0.3, 0.4);
+                // Directional light simulates sunlight and casts shadows
+                const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
+                dirLight.position = new BABYLON.Vector3(20, 40, 20);
+                dirLight.intensity = 0.7;
+                // --- Shadows ---
+                // Shadow generator needs a light source
+                const shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight); // 1024 is shadow map size
+                shadowGenerator.useExponentialShadowMap = true;
+                shadowGenerator.useBlurExponentialShadowMap = true; // Smoother shadows
+                shadowGenerator.blurKernel = 32;
+                shadowGenerator.darkness = 0.5;
+                // --- Environment ---
+                // Ground
+                const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, scene);
+                ground.checkCollisions = true; // Ground should impede camera movement
+                const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
+                // Simple procedural texture for the ground
+                const groundTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.jpg", scene); // Example texture
+                groundTexture.uScale = 10;
+                groundTexture.vScale = 10;
+                groundMat.diffuseTexture = groundTexture;
+                groundMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Less shiny
+                ground.material = groundMat;
+                ground.receiveShadows = true; // Ground should receive shadows
+                // Physics for the ground (static object)
+                ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);
+                // Skybox (creates a sense of space)
+                const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 500.0 }, scene);
+                const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
+                skyboxMaterial.backFaceCulling = false; // Render the inside of the box
+                // Use a cube texture for the skybox. Replace URLs with your desired skybox faces.
+                // Example from Babylon.js playground:
+                 skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs-playground.com/textures/skybox", scene);
+                // For single file, ideally use a procedural sky or embed small textures via Base64 (becomes very large)
+                // skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture.CreateFromImages([
+                //     "data:image/png;base64,...", // px
+                //     "data:image/png;base64,...", // py
+                //     "data:image/png;base64,...", // pz
+                //     "data:image/png;base64,...", // nx
+                //     "data:image/png;base64,...", // ny
+                //     "data:image/png;base64,...", // nz
+                // ], scene);
+                skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+                skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); // Don't add color
+                skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // Don't make it shiny
+                skybox.material = skyboxMaterial;
+                skybox.infiniteDistance = true; // Keep skybox centered on camera
+                // --- Simple World Objects ---
+                // Add some basic shapes with physics and shadows
+                // Big Red Sphere
+                const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 4, segments: 32 }, scene);
+                sphere.position = new BABYLON.Vector3(-10, 2, 10);
+                sphere.checkCollisions = true;
+                const sphereMat = new BABYLON.StandardMaterial("sphereMat", scene);
+                sphereMat.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);
+                sphereMat.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+                sphere.material = sphereMat;
+                shadowGenerator.addShadowCaster(sphere); // This object casts shadows
+                sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.5 }, scene);
+                // Tall Blue Box
+                const box = BABYLON.MeshBuilder.CreateBox("box", { width: 2, height: 6, depth: 2 }, scene);
+                box.position = new BABYLON.Vector3(10, 3, 8);
+                box.checkCollisions = true;
+                const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
+                boxMat.diffuseColor = new BABYLON.Color3(0.2, 0.3, 0.9);
+                box.material = boxMat;
+                shadowGenerator.addShadowCaster(box);
+                 box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.1 }, scene);
+                // Small Green Cylinder
+                const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", { height: 3, diameter: 1.5, tessellation: 24 }, scene);
+                cylinder.position = new BABYLON.Vector3(0, 1.5, 15);
+                cylinder.checkCollisions = true;
+                const cylMat = new BABYLON.StandardMaterial("cylMat", scene);
+                cylMat.diffuseColor = new BABYLON.Color3(0.2, 0.8, 0.3);
+                cylinder.material = cylMat;
+                shadowGenerator.addShadowCaster(cylinder);
+                cylinder.physicsImpostor = new BABYLON.PhysicsImpostor(cylinder, BABYLON.PhysicsImpostor.CylinderImpostor, { mass: 0.5, restitution: 0.7 }, scene);
+                 // Add a few smaller dynamic boxes
+                for (let i = 0; i < 5; i++) {
+                    const smallBox = BABYLON.MeshBuilder.CreateBox(`smallBox${i}`, { size: 1 }, scene);
+                    smallBox.position = new BABYLON.Vector3(Math.random() * 10 - 5, 5 + i * 1.5, Math.random() * 10 - 5);
+                    smallBox.checkCollisions = true;
+                    const smallBoxMat = new BABYLON.StandardMaterial(`smallBoxMat${i}`, scene);
+                    smallBoxMat.diffuseColor = BABYLON.Color3.Random(); // Random color
+                    smallBox.material = smallBoxMat;
+                    shadowGenerator.addShadowCaster(smallBox);
+                    smallBox.physicsImpostor = new BABYLON.PhysicsImpostor(smallBox, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0.2, restitution: 0.4 }, scene);
                 }
+                // --- Mobile Controls (Virtual Joysticks using Babylon.GUI) ---
+                const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+                let leftJoystick = null;
+                let rightJoystick = null;
+                if (isMobile) {
+                    // Disable default mouse input for camera on mobile
+                    camera.inputs.removeByType("FreeCameraMouseInput"); // UniversalCamera uses FreeCamera inputs internally
+                    const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+                    // --- Left Joystick (Movement) ---
+                    leftJoystick = new BABYLON.GUI.VirtualJoystick({
+                        limitToContainer: true, // Keep nub inside the container
+                        alwaysVisible: true,    // Show even when not touched
+                    });
+                    leftJoystick.setJoystickColor("rgba(180, 180, 180, 0.6)"); // Semi-transparent gray
+                    leftJoystick.container.width = "150px";
+                    leftJoystick.container.height = "150px";
+                    leftJoystick.container.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+                    leftJoystick.container.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
+                    leftJoystick.container.left = "50px"; // Offset from edge
+                    leftJoystick.container.top = "-30px"; // Offset from bottom
+                    advancedTexture.addControl(leftJoystick.container); // Add joystick container to UI
+                    // --- Right Joystick (Look/Rotation - Optional, sometimes just touch-drag on screen is preferred) ---
+                    // Let's implement touch-drag look instead of a right joystick for simplicity
+                    let isPointerDown = false;
+                    let pointerStartX = 0;
+                    let pointerStartY = 0;
+                    const lookSensitivity = 0.005; // Adjust sensitivity for touch look
+                    scene.onPointerObservable.add((pointerInfo) => {
+                         // Check if the pointer event is on the canvas and not over a GUI element (like the joystick)
+                         const target = pointerInfo.pickInfo?.pickedMesh || pointerInfo.event.target;
+                         const isOverGUI = pointerInfo.event.target && pointerInfo.event.target.closest('.babylonGUI'); // Rough check
+                        if (target === canvas && !isOverGUI && !leftJoystick.isPointerDown(pointerInfo.event.pointerId) ) {
+                            switch (pointerInfo.type) {
+                                case BABYLON.PointerEventTypes.POINTERDOWN:
+                                    isPointerDown = true;
+                                    pointerStartX = pointerInfo.event.clientX;
+                                    pointerStartY = pointerInfo.event.clientY;
+                                    // Prevent default actions if needed
+                                    // pointerInfo.event.preventDefault();
+                                    break;
+                                case BABYLON.PointerEventTypes.POINTERUP:
+                                    isPointerDown = false;
+                                    break;
+                                case BABYLON.PointerEventTypes.POINTERMOVE:
+                                    if (isPointerDown) {
+                                        const deltaX = pointerInfo.event.clientX - pointerStartX;
+                                        const deltaY = pointerInfo.event.clientY - pointerStartY;
+                                        // Update camera rotation based on drag
+                                        // Invert Y-axis movement if desired (common for touch look)
+                                        camera.cameraRotation.y += deltaX * lookSensitivity;
+                                        camera.cameraRotation.x += deltaY * lookSensitivity * -1; // Adjust multiplier/sign as needed
+                                        // Clamp vertical rotation to prevent flipping upside down
+                                        camera.cameraRotation.x = Math.max(-Math.PI / 2.1, Math.min(Math.PI / 2.1, camera.cameraRotation.x));
+                                        // Update start position for next move calculation
+                                        pointerStartX = pointerInfo.event.clientX;
+                                        pointerStartY = pointerInfo.event.clientY;
+                                    }
+                                    break;
+                            }
+                        } else {
+                             // Reset if pointer goes up outside canvas or over GUI
+                             if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERUP) {
+                                isPointerDown = false;
+                            }
+                        }
+                    });
+                    // --- Link Left Joystick to Camera Movement ---
+                    scene.onBeforeRenderObservable.add(() => {
+                        if (leftJoystick && leftJoystick.pressed) {
+                            // Get joystick delta vector
+                            const joyX = leftJoystick.deltaPosition.x;
+                            const joyY = leftJoystick.deltaPosition.y; // Y is forward/backward
+                            // Calculate movement direction based on camera's orientation
+                            const forward = camera.getDirection(BABYLON.Axis.Z);
+                            const right = camera.getDirection(BABYLON.Axis.X);
+                            // Note: Joystick Y is typically inverted (up is positive, forward is negative Z)
+                            let moveDirection = forward.scale(joyY * -1).add(right.scale(joyX));
+                            // Normalize and scale by camera speed and joystick magnitude
+                            if (moveDirection.length() > 0.01) { // Avoid tiny movements
+                                moveDirection.normalize();
+                                // Apply movement - camera.cameraDirection is the vector to add to position
+                                camera.cameraDirection.addInPlace(moveDirection.scale(camera.speed));
+                            }
+                        }
+                    });
+                } else {
+                    // Optional: Display controls hint for desktop users
+                    const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+                    const instructions = new BABYLON.GUI.TextBlock();
+                    instructions.text = "Use WASD/Arrows to Move | Mouse to Look";
+                    instructions.color = "white";
+                    instructions.fontSize = 16;
+                    instructions.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
+                    instructions.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+                    instructions.paddingTop = "15px";
+                    instructions.paddingRight = "15px";
+                    advancedTexture.addControl(instructions);
+                }
+                // --- Hide Loading Indicator ---
+                if(loadingIndicator) loadingIndicator.style.display = 'none';
+                return scene;
+            }; // End of createScene function
+            // --- Create and Render ---
+            try {
+                const scene = createScene();
+                // Main render loop
+                engine.runRenderLoop(() => {
+                    if (scene) {
+                        scene.render();
+                    }
+                });
+                // Handle window resize
+                window.addEventListener('resize', () => {
+                    engine.resize();
+                });
+            } catch (e) {
+                console.error("Error creating Babylon scene:", e);
+                if(loadingIndicator) {
+                    loadingIndicator.textContent = "Error loading demo. Check console.";
+                    loadingIndicator.style.color = "red";
+                }
             }
+        }); // End of DOMContentLoaded listener
     </script>
 </body>
 </html>