3D моделирование объектов с помощью HTML5 | RUDEBOXСегодняшний урок является мостом между двухмерной графики в HTML5 и по-настоящему трехмерными (с помощью WebGL). Сегодня я покажу, как нарисовать трехмерные объекты с помощью полигональной сетки. Полигон сетки или неструктурированные сетки представляет собой набор вершин, ребер и граней, который определяет форму многогранных объектов в 3D компьютерной графики и твердотельного моделирования. Лица, обычно, состоят из треугольников, четырехугольников или других простых выпуклых многоугольников, так как это упрощает рендеринг.

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

3D моделирование объектов с помощью HTML5

Для того, чтобы понять, о чем идет речь, я рекомендую прочитать основе описанных в Википедии . Чтобы продемонстрировать это, мы подготовили простые трехмерные объекты — куб и многомерной сферы (с переменным числом граней). И так, давайте приступим.

Шаг 1. HTML

Как обычно (для всех примеров для демо) у нас есть очень простая HTML-разметка (с одного объекта внутри canvas):

Теперь нам необходимо инициализировать сам плагин:

Это означает, что если нам нужно вывести куб — вы должны отобразить это в первой линии, если вы хотите, отобразить сферу с 6 граней — вам нужно выбрать второй вариант.

3D моделирование объектов с помощью HTML5 RUDEBOX

Шаг 2. JavaScript

Есть три JS файла (main.js, meshes.js и transform.js), мы публикуем два из них, третий (transform.js) содержит только математику функций (для вращения, масштабирования, перевод и объектов проекта) . Она будет доступна в исходниках. Итак, давайте рассмотрим код первого JavaScript:

meshes.js

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

main.js

Вот и все. Готово!

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