Руководство. Подготовка сцены

Статья
03/21/2023

Узнайте, как подготовить сцену и добавить в нее некоторые основные трехмерные элементы.

Из этого руководства вы узнаете, как выполнять следующие задачи:

Создание сцены
Добавление камеры
Добавление света
Добавление базовых трехмерных элементов

Подготовка к работе

На предыдущем шаге руководства была создана базовая веб-страница. Откройте веб-страницу для редактирования.

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

Создание сцены

Сцена — это место, где будет отображаться содержимое. Может существовать несколько сцен, а также возможно переключение между ними. Подробнее о сцене Babylon.js.

Добавьте тег скрипта после элемента HTML Canvas и добавьте следующий код, чтобы создать сцену, заполненную черным цветом:
```
<script type="text/javascript">
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);

    const createScene = function() {
        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.Black;
        return scene;
    }

    const sceneToRender = createScene();
</script>
```
В приведенном выше коде необходимо создать экземпляр Babylon.js движка веб-отрисовки, который визуализирует сцену и привязывает события к холсту. Дополнительные сведения о движке см. на странице документации babylon.engine
По умолчанию сцена не отрисовывается. Помните, что существует несколько сцен, и вы можете управлять тем, какая из них отображается. Для повторной отрисовки сцены в каждом кадре выполните следующий код после вызова функции createScene:
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Добавление базовых трехмерных элементов

Давайте добавим нашу первую трехмерную фигуру. В трехмерном виртуальном мире фигуры строятся на основе сеток — множестве треугольных поверхностей, соединенных друг с другом, каждая из которых состоит из трех вершин. Можно использовать предопределенную сетку или создать собственную. Здесь мы будем использовать стандартную сетку Box, т. е. куб. Чтобы создать куб, используйте BABYLON.MeshBuilder.CreateBox. Сетка включает имя и параметры (они зависят от типа сетки). Добавьте следующий код в функцию createScene:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Откройте веб-страницу в браузере Microsoft Edge и проверьте выходные данные. В окне браузера отображается пустая страница. Откройте DevTools с помощью клавиатуры и выберите F12 или CTRL+SHIFT+I (Windows, Linux) или Command+Option+I (macOS). Открыв вкладку Консоль, можете начать поиск ошибок. Появится сообщение об ошибке: "Uncaught Error: No camera defined" (Необработанная ошибка: камера не найдена). Теперь необходимо добавить камеру в сцену.

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

Чтобы просматривать виртуальный мир и взаимодействовать с ним, необходимо подключить к холсту камеру. Добавим камеру типа BABYLON.ArcRotateCamera, которую можно поворачивать вокруг целевого объекта. Ниже приведены параметры, необходимые для создания экземпляра камеры.
1. name: имя камеры;
2. alpha: угловое положение вдоль продольной оси (в радианах);
3. beta: угловое положение вдоль широтной оси (в радианах);
4. radius: расстояние от целевого объекта;
5. target: точка, к которой будет всегда направлена камера (определяется координатами X, Y и Z);
6. scene: сцена, в которой находится камера.
Alpha, beta, radius и target определяют расположение камеры в пространстве, как показано на схеме ниже.

Добавьте следующий код в функцию createScene:
```
const alpha =  Math.PI/4;
const beta = Math.PI/3;
const radius = 8;
const target = new BABYLON.Vector3(0, 0, 0);

const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
camera.attachControl(canvas, true);
```
Если вы проверите результат в браузере, то увидите черный холст. Отсутствует источник света.

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

Существует четыре типа источников света, которые могут использоваться с различными свойствами освещения: точечный, направленный, прожектор и полусферический свет. Давайте добавим полусферический свет HemisphericLight следующим образом:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

Окончательный код веб-страницы будет так:

<html>
<head>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        body,#renderCanvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;

            const alpha =  Math.PI/4;
            const beta = Math.PI/3;
            const radius = 8;
            const target = new BABYLON.Vector3(0, 0, 0);

            const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
            camera.attachControl(canvas, true);

            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            const box = BABYLON.MeshBuilder.CreateBox("box", {});
            box.position.x = 0.5;
            box.position.y = 1;

            return scene;
        };

        const sceneToRender = createScene();
        engine.runRenderLoop(function(){
            sceneToRender.render();
        });
    </script>
</body>
</html>

Проверьте результат в браузере. Вы увидите куб и с помощью мыши сможете повернуть камеру вокруг него и просмотреть его грани:

Простая сцена с кубом

Дальнейшие действия

Следующий учебник: 3. Взаимодействие с трехмерным объектом

Поделиться через