При использовании для отображения в браузере библиотеки ThreeJS в качестве первого примера обычно выступает куб или какой-либо другой простейший объект, и он создается при помощи предустановленных специальных классов BoxGeometry или SphereGeometry. Затем обычно рассматривается использование импортируемых готовых моделей и работа с ними.

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

Если в случае использования OpenGL и С/С++ для отображения объектов вне браузера существуют готовые библиотеки соответствующих функций, то найти подходящую библиотеку на JavaScript достаточно трудно. Существующие библиотеки, такие как glMatrix, нацелены в основном на геометрические преобразования – вращение, перемещение, масштабирование моделей. Для построения трехмерных объектов с нуля с применением методов аналитической геометрии требуются совсем другие функции, которые могут выполнять например следующие действия — найти точку пересечения прямых на плоскости, найти точки пересечения двух окружностей на плоскости, создать плоскость по ее нормальному вектору и точке, найти точку пересечения трех плоскостей и тому подобные. С этой целью была сделана небольшая библиотека WebGeometry.

Полтора года тому назад я опубликовал про нее небольшую статью. Ее можно найти
по ссылке.
Примерно полгода назад я решил вернуться к этой теме и рассказать максимально подробно с большим количеством примеров про создание моделей с нуля при помощи WebGeometry. Сначала предполагал, что обойдусь примерно тремя статьями, но в процессе работы решил отказаться от написания статей и сделать сайт. В результате получился сайт состоящий из тридцати уроков (я назвал их главами):

Three.js и геометрия

Все трехмерные модели отображаемые с помощью ThreeJS сделаны максимально интерактивными и включены непосредственно в текст сайта. Если вы читаете про то, как сделана та или иная модель, то вы можете не выходя из сайта сразу на модели посмотреть номер вершины, которая упомянута в тексте, название грани модели, углы наклона граней и даже координаты любой точки модели о которой идет речь в тексте на сайте.

В первых двух главах представленных на сайте рассматриваются некоторые моменты использования библиотеки ThreeJS в применении к создаваемым в дальнейшем моделям. Предполагается, что читатель уже знаком с тем как создавать простейшие программы на основе ThreeJS.

В следующих двух главах описана работа с двумерными функциями библиотеки WebGeometry. Приведено много соответствующих примеров. Все примеры являются интерактивными и отображение результата их работы показано при помощи HTML5 Canvas. Возможно будет интересно посмотреть на интерактивные чертежи в главах 14, 18, 20, 23 и 28.

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

Все подобные многогранники разрабатываются абсолютно строго по математическим законам.
Эти многогранники не обладают полностью регулярной структурой, как например платоновы тела (куб, тетраэдр,… ), хотя обладают симметрией и являются достаточно красивыми.
Так как эти многогранники не имеют регулярной структуры, то для определения координат их вершин приходится применять самые разнообразные геометрические расчеты, а не ограничиться жестким заданием в программе координат вершин модели взятых из различных источников.
Не требуется знать никаких предварительных сведений про огранки. Требуется только запомнить, что верхняя часть подобного многогранника называется короной, средняя часть – рундистом, а нижняя – павильоном. Самая верхняя грань называется площадкой, а самая низшая вершина – калетой.

Все многогранники (и чертежи) на сайте можно изменять путем задания параметров моделей. Следует сделать только одно замечание. Предполагается что почти все модели (за небольшим исключением) должны сохранять выпуклость при любом изменении значений параметров. Поэтому некоторые многогранники изменяют свою форму в небольших пределах. За проверку выпуклости отвечает специальная функция. Если отменить эту проверку, то можно получить совершенно неожиданные формы объектов (многогранниками их уже назвать сложно). Некоторые из этих форм могут заинтересовать, возможно, художников фантастических картин (смотри скриншоты в конце глав 10 и 13).

Большинство функций библиотеки WebGeometry сделаны с использованием матричных преобразований. Но для построения моделей знание матриц скорее всего не потребуется, так как матрицы спрятаны внутри других используемых функций. Например, функции определяющей точку пересечения трех плоскостей.

Сделаю одно замечание, которое на первый взгляд кажется совершенно излишним и слишком тривиальным, но возможно кому-то пригодится в дальнейшем. Оно заключается в том, что через три точки не лежащих на одной прямой можно провести только одну плоскость. Предположим, что грань многогранника представляет собой четырехугольник. Определяется по трем точкам уравнение плоскости в которой лежит эта грань. Координаты четвертой точки этого четырехугольника не входят в это уравнение, но эта же четвертая точка принадлежит другой грани многогранника, которая также рассчитывается. Иногда трудно заметить, что четырехугольник первой (или второй) плоскости оказывается сломанным из-за того что визуально кажется, что эта четвертая точка принадлежит сразу двум плоскостям, а на самом деле это не так. Эту ошибку трудно заметить рассматривая уже построенную модель. Она вдруг вылезает спустя много времени и совершенно неожиданно. С этим сталкивался несколько раз.

Спасибо всем за внимание! Кроме просмотра сайта можете зайти в
мой репозиторий.