Вам понадобится

Для разработки под Windows вам понадобиться следующее ПО:

Пробная версия Windows 10

Попробуйте новейшую версию ОС.

Visual Studio

Visual Studio — это интегрированная среда разработки с широкими возможностями для создания потрясающих приложений для Windows, Android и iOS, а также современных веб-приложений и облачных служб.

Microsoft .NET Framework 4.6

Пакет многоплатформенного нацеливания .NET Framework 4.6 позволяет разработчикам создавать приложения для .NET Framework 4.6, используя Visual Studio или сторонние IDE.

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

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


Демонстрационная сцена Playground Demo 2: семь базовых фигур и сеток

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

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

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

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

var createScene = function () {
  var scene = new BABYLON.Scene(engine);

  var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);

  camera.attachControl(canvas, false);

  var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

  // создание параллелепипеда
  //(название параллелепипеда, размер, сцена)
  var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);

  // создание сферы 
  //(название сферы, сегменты, диаметр, сцена) 
  var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);

  // создание плоскости
  //(название плоскости, размер, сцена)
  var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);

  // создание цилиндра
  //(название, высота, диаметр вершины, диаметр дна, тесселяция, [необязательные секции высоты],
  // сцена, возможность обновления)
  var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);

  // создание тора
  // (название, диаметр, толщина, тесселяция, сцена, возможность обновления)
  var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);

  // создание узла
  // (название, радиус, труба, радиальные сегменты, тубулярные сегменты, p, q, 
  //сцена, возможность обновления)
  var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

  // создание линейчатой сетки
  var lines = BABYLON.Mesh.CreateLines("lines", [
    new BABYLON.Vector3(-10, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(0, 0, -10),
    new BABYLON.Vector3(0, 0, 10)
  ], scene);

  // перемещение элементов
  box.position = new BABYLON.Vector3(-10, 0, 0); // использование вектора
  sphere.position = new BABYLON.Vector3(0, 10, 0); // использование вектора
  plan.position.z = 10;              // использование единственной координаты
  cylinder.position.z = -10;
  torus.position.x = 10;
  knot.position.y = -10;

  return scene;
}

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

  • Создание параллелепипеда
var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
Параметры: название, размер параллелепипеда и сцена, к которой подключается сетка.
  • Создание сферы
var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);

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

  • Создание плоскости
var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
Параметры: название, размер и сцена, к которой подключается сетка.
  • Создание цилиндра
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
Параметры: название, высота, диаметр вершины, диаметр дна, тесселяция, [необязательные секции высоты], сцена, возможность обновления. Параметр секции высоты (задан равным 1) является необязательным.
  • Создание тора
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
Параметры: название, диаметр, толщина, тесселяция (с подробностями или без), сцена, возможность обновления.
  • Создание узла
var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);
Параметры: название, радиус, труба, радиальные сегменты, тубулярные сегменты, p, q, сцена, возможность обновления. Получить дополнительную информацию о торических узлах можно  ЗДЕСЬ.
  • Создание линейчатой сетки
var lines = BABYLON.Mesh.CreateLines("lines", [
  new BABYLON.Vector3(-10, 0, 0),
  new BABYLON.Vector3(10, 0, 0),
  new BABYLON.Vector3(0, 0, -10),
  new BABYLON.Vector3(0, 0, 10)
], scene);

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

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

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

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

  • Создание поверхности
var ground = BABYLON.Mesh.CreateGround("ground", 6, 6, 2, scene);
Параметры: название, ширина, глубина, секции, сцена в демонстрационной сцене Playground Demo 1 используется конструктор CreateGround. Вы можете увидеть его в действии с помощью приведенной выше ссылки.
  • Создание поверхности из карты высот
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false);

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

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

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

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

var precision = {
  "w" : 2,
  "h" : 2
};
var subdivisions = {
  'h' : 8,
  'w' : 8
};
var tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);

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

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

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

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

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

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