Структура минимального приложения

Для создания минимального приложения с использованием библиотеки Babylon.js необходимо подключить несколько основных компонентов: сцена, камера, источник света, объекты для рендеринга и рендерер. Эти элементы создают базовую структуру, которая позволяет работать с трехмерной графикой в браузере.

Подключение Babylon.js

Для начала, следует подключить саму библиотеку Babylon.js. Это можно сделать несколькими способами, в зависимости от предпочтений в проектировании. Одним из самых простых и быстрых методов является использование CDN.

<script src="https://cdn.babylonjs.com/babylon.js"></script>

Эта строка подключает последнюю стабильную версию библиотеки, которую можно использовать сразу после загрузки страницы.

Создание канваса

Все графическое отображение будет происходить на HTML-элементе <canvas>. Для этого необходимо создать в HTML документе соответствующий элемент:

<canvas id="renderCanvas"></canvas>

Канвас служит основой для рендеринга сцены, а его размер и позиция определяются с помощью CSS:

#renderCanvas {
    width: 100%;
    height: 100%;
}

Инициализация сцены

Основной объект для работы в Babylon.js — это сцена. Сцена представляет собой пространство, где будут размещаться все объекты и где будет происходить рендеринг.

var canvas = document.getElementById("renderCanvas"); 
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

В этом коде создается движок BABYLON.Engine, который отвечает за рендеринг на указанном канвасе. Важным моментом является использование второго параметра true в конструкторе движка — это включает поддержку антиалиасинга, что улучшает качество изображения.

Добавление камеры

Камера — это объект, через который будет происходить просмотр сцены. Babylon.js предоставляет несколько типов камер. Одним из самых популярных является ArcRotateCamera, которая позволяет пользователю вращать камеру вокруг сцены.

var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

Здесь создается камера, которая ориентирована на центр сцены (BABYLON.Vector3.Zero()), и привязывается к канвасу, что позволяет управлять камерой с помощью мыши. В данном примере камера будет вращаться вокруг точки (0, 0, 0) на расстоянии 10 единиц.

Добавление света

Для того чтобы объекты на сцене были видны, необходимо добавить источник света. В Babylon.js поддерживаются разные типы источников света: точечный, направленный, освещающий и другие. В минимальном приложении можно использовать HemisphericLight, который равномерно освещает сцену.

var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

Этот свет создает мягкое освещение, направленное вверх, и идеально подходит для простых сцен. Его направление и интенсивность можно регулировать через параметры.

Создание объектов

После добавления основных элементов сцены можно приступить к созданию объектов. В Babylon.js существует множество встроенных примитивных объектов. Рассмотрим пример создания простого сферического объекта:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 2}, scene);

Этот код создает сферу диаметром 2 единицы. В Babylon.js также доступны другие примитивы, такие как кубы, плоскости, цилиндры и т.д.

Рендеринг сцены

После создания всех элементов сцены необходимо запустить рендеринг. Для этого используется метод runRenderLoop:

engine.runRenderLoop(function() {
    scene.render();
});

Этот метод запускает цикл, который будет обновлять и отображать сцену с каждым кадром. Он автоматически вызывается в браузере с частотой, соответствующей частоте кадров (обычно около 60 кадров в секунду).

Обработка изменений размера канваса

Для корректного отображения сцены при изменении размера окна браузера необходимо настроить обработку изменения размеров канваса:

window.addEventListener("resize", function() {
    engine.resize();
});

Этот код будет автоматически изменять размер канваса и корректировать сцену в случае изменения размеров окна.

Итоговая структура кода

Объединяя все элементы, можно получить минимальное рабочее приложение на Babylon.js:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal Babylon.js Application</title>
    <style>
        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script>
        var canvas = document.getElementById("renderCanvas"); 
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 2}, scene);

        engine.runRenderLoop(function() {
            scene.render();
        });

        window.addEventListener("resize", function() {
            engine.resize();
        });
    </script>
</body>
</html>

Этот код создает простую сцену с камерой, светом и сферой, которая отображается на канвасе. Он также учитывает изменение размера окна и корректно реагирует на это.

Таким образом, структура минимального приложения в Babylon.js состоит из нескольких базовых компонентов: канваса для рендеринга, сцены для хранения объектов, камеры для просмотра и источников света для освещения сцены.

Оглавление