Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4, 2025

Commit

1811dcf

verified ·

1 Parent(s): 9365a7e

Update index.html

Browse files

Files changed (1) hide show

index.html +285 -301

index.html CHANGED Viewed

@@ -1,355 +1,339 @@
 <!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>

 <!DOCTYPE html>
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Прото-Метавселенная Демо (Babylon.js)</title>
+    <meta name="description" content="Демонстрация простого 3D-мира на Babylon.js в одном HTML файле.">
+    <!-- Подключение Babylon.js и его зависимостей из CDN -->
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> -->
+    <!-- <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script> -->
+    <!-- Раскомментируйте loaders/materials, если будете загружать модели или использовать спец. материалы -->
     <style>
         html, body {
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
             margin: 0;
             padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #000; /* Фон на случай долгой загрузки */
+        }
+        #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none; /* Важно для управления камерой на мобильных */
+            outline: none; /* Убирает рамку фокуса */
         }
+        /* Стили для простого индикатора загрузки */
+        #loadingScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            background-color: #222;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 2em;
+            z-index: 100;
+            transition: opacity 0.5s ease-out;
         }
+         /* Стили для простого виртуального джойстика (пример) */
+        #joystickArea {
             position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 150px;
+            height: 150px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            display: none; /* Скрыт по умолчанию, можно показать для мобильных */
+            z-index: 10;
+            border: 2px solid rgba(255, 255, 255, 0.4);
+        }
+        #joystickThumb {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            cursor: grab;
+        }
+         /* Стиль для кнопки действия (пример) */
+        #actionButton {
+            position: absolute;
+            bottom: 40px;
+            right: 40px;
+            width: 80px;
+            height: 80px;
+            background: rgba(0, 150, 255, 0.6);
+            border-radius: 50%;
+            display: none; /* Скрыт по умолчанию */
             z-index: 10;
+            border: 2px solid rgba(255, 255, 255, 0.4);
+            color: white;
+            font-size: 1.5em;
+            text-align: center;
+            line-height: 80px; /* Центрирование текста по вертикали */
+            cursor: pointer;
+            user-select: none; /* Запретить выделение текста */
         }
+        /* Медиа-запрос для отображения мобильных контролов */
+        @media (max-width: 768px) { /* или другое условие для тач-устройств */
+             #joystickArea {
+                 /* display: block; */ /* Пока джойстик не реализован */
+             }
+             #actionButton {
+                 /* display: block; */ /* Пока кнопка не реализована */
+             }
+        }
     </style>
 </head>
 <body>
+    <!-- Элемент Canvas для рендеринга 3D -->
     <canvas id="renderCanvas"></canvas>
+    <!-- Экран загрузки -->
+    <div id="loadingScreen">Загрузка мира...</div>
+    <!-- Область для виртуального джойстика (упрощенно) -->
+    <div id="joystickArea">
+        <div id="joystickThumb"></div>
+    </div>
+    <!-- Кнопка действия (упрощенно) -->
+    <div id="actionButton">A</div>
+    <script>
+        // Получаем элементы DOM
+        const canvas = document.getElementById('renderCanvas');
+        const loadingScreen = document.getElementById('loadingScreen');
+        const joystickArea = document.getElementById('joystickArea');
+        const actionButton = document.getElementById('actionButton');
+        // Проверка поддержки WebGL
+        if (!BABYLON.Engine.isSupported()) {
+            window.alert('Ваш браузер не поддерживает WebGL, необходимый для Babylon.js!');
+        } else {
+            // Создание движка Babylon.js
+            const engine = new BABYLON.Engine(canvas, true, {
+                preserveDrawingBuffer: true, // Для скриншотов, если нужно
+                stencil: true,
+                antialias: true // Включаем сглаживание
+            }, true);
+            // Показываем экран загрузки Babylon по умолчанию
+            engine.displayLoadingUI();
+            // --- Создание сцены ---
             const createScene = () => {
                 const scene = new BABYLON.Scene(engine);
+                scene.clearColor = new BABYLON.Color3(0.1, 0.1, 0.2); // Темно-синий фон
+                // --- Камера ---
+                // ArcRotateCamera - вращается вокруг цели, хорошо для мобильных и ПК
+                const camera = new BABYLON.ArcRotateCamera("camera",
+                    -Math.PI / 2.5, // Начальный угол (alpha)
+                    Math.PI / 3,   // Начальный угол (beta)
+                    20,            // Начальный радиус (удаление)
+                    new BABYLON.Vector3(0, 1, 0), // Точка, вокруг которой вращаемся
+                    scene);
+                camera.attachControl(canvas, true); // Привязываем управление к canvas (мышь/тач)
+                camera.lowerRadiusLimit = 5;     // Минимальное приближение
+                camera.upperRadiusLimit = 50;    // Максимальное удаление
+                camera.wheelPrecision = 50;      // Чувствительность колеса мыши/pinch-зума
+                // camera.useAutoRotationBehavior = true; // Автоматическое медленное вращение (опционально)
+                // --- Освещение ---
+                // Основной свет (имитация солнца)
+                const light = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, 0.3), scene);
+                light.position = new BABYLON.Vector3(20, 40, 20);
+                light.intensity = 1.0;
+                // Рассеянный свет (подсветка теней)
+                const hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
+                hemiLight.intensity = 0.4;
+                hemiLight.diffuse = new BABYLON.Color3(0.8, 0.85, 1); // Светлый холодный оттенок
+                hemiLight.groundColor = new BABYLON.Color3(0.3, 0.2, 0.1); // Теплый оттенок снизу
+                // --- Окружение ---
+                // Земля (плоскость)
+                const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 50, height: 50}, scene);
+                const groundMaterial = new BABYLON.PBRMetallicRoughnessMaterial("groundMat", scene);
+                groundMaterial.baseColor = new BABYLON.Color3(0.3, 0.5, 0.3); // Зеленоватый цвет
+                groundMaterial.metallic = 0.1; // Почти не металл
+                groundMaterial.roughness = 0.8; // Довольно шероховатая
+                ground.material = groundMaterial;
+                ground.receiveShadows = true; // Земля принимает тени
+                // Скайбокс (небо)
+                const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
                 const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
+                skyboxMaterial.backFaceCulling = false; // Видим внутренние стороны куба
+                // Простой процедурный скайбокс, чтобы не зависеть от внешних текстур
+                 skyboxMaterial.reflectionTexture = new BABYLON.HDRCubeTexture("./textures/environment.env", scene, 512, false, true, false, true); // Замените на реальный путь к .env/.hdr если есть
+                 skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; // Режим скайбокса
+                // Или можно сделать просто цвет:
+                // skyboxMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.8, 1.0); // Голубой
+                // skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // Без бликов
+                skyboxMaterial.disableLighting = true; // Не зависит от освещения сцены
                 skybox.material = skyboxMaterial;
+                skybox.infiniteDistance = true; // Скайбокс всегда далеко
+                // --- Объекты в мире ---
+                // Сфера
+                const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
+                sphere.position.y = 1.5;
+                sphere.position.x = -5;
+                const sphereMaterial = new BABYLON.PBRMetallicRoughnessMaterial("sphereMat", scene);
+                sphereMaterial.baseColor = new BABYLON.Color3(0.8, 0.2, 0.2); // Красный
+                sphereMaterial.metallic = 0.8;
+                sphereMaterial.roughness = 0.2;
+                sphere.material = sphereMaterial;
+                // Куб
+                const box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
+                box.position.y = 1;
+                box.position.x = 0;
+                box.rotation.y = Math.PI / 5; // Немного повернем
+                const boxMaterial = new BABYLON.PBRMetallicRoughnessMaterial("boxMat", scene);
+                boxMaterial.baseColor = new BABYLON.Color3(0.2, 0.3, 0.8); // Синий
+                boxMaterial.metallic = 0.2;
+                boxMaterial.roughness = 0.6;
+                box.material = boxMaterial;
+                // Цилиндр
+                const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: 3, diameter: 1.5}, scene);
+                cylinder.position.y = 1.5;
+                cylinder.position.x = 5;
+                const cylinderMaterial = new BABYLON.PBRMetallicRoughnessMaterial("cylMat", scene);
+                cylinderMaterial.baseColor = new BABYLON.Color3(0.9, 0.9, 0.9); // Белый
+                cylinderMaterial.metallic = 1.0; // Полностью металлический
+                cylinderMaterial.roughness = 0.1; // Очень гладкий
+                cylinder.material = cylinderMaterial;
+                // --- Тени ---
+                const shadowGenerator = new BABYLON.ShadowGenerator(1024, light); // 1024 - размер карты теней
+                shadowGenerator.useExponentialShadowMap = true; // Мягкие тени
+                // Добавляем объекты, отбрасывающие тень
+                shadowGenerator.addShadowCaster(sphere);
                 shadowGenerator.addShadowCaster(box);
                 shadowGenerator.addShadowCaster(cylinder);
+                // Тень от скайбокса не нужна
+                // ground.receiveShadows уже установлено
+                 // --- Простое взаимодействие (клик/тап по объекту) ---
+                 scene.onPointerDown = (evt, pickResult) => {
+                    // Проверяем, кликнули ли мы по какому-то мешу
+                    if (pickResult.hit && pickResult.pickedMesh && pickResult.pickedMesh !== ground && pickResult.pickedMesh !== skybox) {
+                        const pickedMesh = pickResult.pickedMesh;
+                        console.log("Кликнули на:", pickedMesh.name);
+                        // Простая анимация: пульсация размера
+                        const animationScale = new BABYLON.Animation(
+                            "scaleAnim",            // Имя
+                            "scaling",              // Анимируемое свойство
+                            30,                     // FPS
+                            BABYLON.Animation.ANIMATIONTYPE_VECTOR3, // Тип данных
+                            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT // Режим проигрывания
+                        );
+                        const keys = [];
+                        const originalScale = pickedMesh.scaling.clone();
+                        const largeScale = originalScale.multiply(new BABYLON.Vector3(1.3, 1.3, 1.3));
+                        keys.push({ frame: 0, value: originalScale });
+                        keys.push({ frame: 5, value: largeScale }); // Увеличиваем за 5 кадров
+                        keys.push({ frame: 15, value: originalScale }); // Возвращаем за 10 кадров
+                        animationScale.setKeys(keys);
+                        // Добавляем easing для плавности
+                        const easingFunction = new BABYLON.SineEase();
+                        easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+                        animationScale.setEasingFunction(easingFunction);
+                        pickedMesh.animations = []; // Очищаем предыдущие анимации (если есть)
+                        pickedMesh.animations.push(animationScale);
+                        scene.beginAnimation(pickedMesh, 0, 15, false, 1.0); // Запускаем анимацию
+                    }
+                };
+                // --- Оптимизации (можно добавить больше) ---
+                scene.freezeMaterials(); // Оптимизация материалов после их настройки
+                scene.blockMaterialDirtyMechanism = true; // Блокировка проверки "грязных" материалов
+                // Возвращаем созданную сцену
                 return scene;
+            }; // --- Конец createScene ---
+            // Создаем сцену
+            const scene = createScene();
+            // Прячем стандартный экран загрузки Babylon и наш кастомный
+            scene.executeWhenReady(() => {
+                 engine.hideLoadingUI();
+                 if (loadingScreen) {
+                     loadingScreen.style.opacity = '0';
+                     // Можно удалить элемент после анимации исчезновения
+                     setTimeout(() => {
+                         loadingScreen.style.display = 'none';
+                     }, 500); // Должно совпадать с transition в CSS
+                 }
+                // Определяем, мобильное ли устройство (очень упрощенно!)
+                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+                if (isMobile) {
+                    // Показываем мобильные контролы, если нужно
+                     // joystickArea.style.display = 'block';
+                     // actionButton.style.display = 'block';
+                     console.log("Обнаружено мобильное устройство (упрощенная проверка).");
+                     // Здесь можно добавить логику для виртуального джойстика и кнопки,
+                     // которая будет управлять камерой или персонажем (сейчас не реализовано).
+                     // Babylon.js имеет VirtualJoysticksCamera, но она сложнее в настройке.
+                     // ArcRotateCamera уже хорошо работает с тачем (перетаскивание - вращение, щипок - зум).
+                } else {
+                    console.log("Обнаружено десктопное устройство.");
+                }
+                // Главный цикл рендеринга
                 engine.runRenderLoop(() => {
+                    scene.render();
                 });
+            });
+            // Обработка изменения размера окна/экрана
+            window.addEventListener('resize', () => {
+                engine.resize();
+            });
+        } // Конец проверки WebGL
     </script>
 </body>
 </html>