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

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

Шаг 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

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

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