Создание базовых элементов (фигур и сеток)

В этом руководстве рассказывается, как создавать базовые элементы Babylon.js: параллелепипеды, сферы и плоскости.

Что нужно сделать

Самый легкий способ приступить к использованию базовых элементов — ознакомиться с демонстрационной сценой Playground Demo 2. В главном меню выберем вариант Get .zip. В этом архиве находится файл index.html, который содержит все необходимое для того, чтобы вы смогли приступить к созданию базовых элементов. Запомните эту ссылку — позже мы поговорим о ней более подробно.

Я полагаю, что вы уже прочитали Введение в Babylon.js и предыдущее руководство, и знаете, как форматировать файлы сцен. Поэтому мы не будем рассматривать данную тему в настоящем руководстве. Мы пошагово изучим демонстрационную сцену 02 среды Playground. Откройте эту ссылку в новой вкладке или окне, а затем вернитесь сюда.

Рассмотрим функцию createScene, которая используется в демонстрационной сцене Playground Demo 2:

Мы создали семь различных базовых элементов, начав с параллелепипеда, а в конце функции задали их расположение, чтобы ни один элемент не располагался поверх другого). Совсем просто, не правда ли? Теперь рассмотрим каждую фигуру и сетку, начиная с параллелепипеда.

Создание параллелепипеда

Создание сферы

Параметры: название, количество сегментов (с подробностями или без), размер и сцена, к которой подключается сетка. Не подгоняйте количество сегментов под размер сетки ;)

Создание плоскости

Создание цилиндра

Создание тора

Создание узла

Создание линейчатой сетки

Параметры: название, [массив векторов, разделенных запятыми], сцена.

Я мог бы пояснить принципы работы конструктора линейчатой сетки, однако полагаю, что они понятны из приведенного выше демонстрационного кода. Обратите внимание на знаки [ и ]. Они открывают и закрывают массив — еще один тип данных языка JavaScript. Первый vector3 массива задает начальные положения отображаемых линий. За ним следует запятая и второй vector3, который задает конечные точки отображаемых линий. Далее идет запятая и третий vector3, задающий новое положение. Можно добавлять неограниченное количество векторов, однако обратите внимание на то, что после ПОСЛЕДНЕГО vector3 запятая отсутствует). Ваш массив векторов должен иметь аналогичный формат.

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

До настоящего момента мы рассматривали базовые элементы демонстрационной сцены Playground Demo 2, однако в ней не задействованы три важных типа сетчатых фигур (базовых элементов), с помощью которых в Babylon.js создаются поверхности. Рассмотрим их.

Создание поверхности

Создание поверхности из карты высот

Параметры: название, путь к карте высот, ширина, глубина, секции, минимальная высота, максимальная высота, сцена, возможность обновления.

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

Создание плиточной поверхности

Выражаю благодарность пользователю форума Kostar111 за этот удобный конструктор плиточных поверхностей. Ниже приведен базовый код для создания плиточной поверхности.

Параметры: название, минимальное значение x, минимальное значение z, максимальное значение x, максимальное значение z, секции = количество плиток. (subdivisions.w : по ширине; subdivisions.h: по высоте), precision = количество секций внутри плитки (precision.w: по ширине; precision.h: по высоте), сцена, возможность обновления.

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

Подведем итоги

Вот и все! Вы познакомились со всеми базовыми элементами и изучили несколько способов их применения. Регулярно просматривайте эту часть руководства для получения информации о новых базовых элементах — они добавляются сюда довольно часто. Придумывайте собственные базовые элементы и делитесь своими идеями на форуме; ваше участие в расширении списка базовых элементов приветствуется!

Следующий шаг

Как вы видели, базовые элементы необходимо позиционировать на сцене так, чтобы они не располагались один поверх другого. Теперь мы более подробно изучим позиционирование (или, как его иногда называют, преобразование) элементов, а также их вращение и масштабирование. Вы готовы? Мы уверены, что да!

📎📎📎📎📎📎📎📎📎📎