Основы программирования в Вердж3Д — Софт Эйт Софт
Description: Узнайте как создавать WebGL-приложения с использованимем программы Вердж3Д с нуля.

# Основы программирования в «Вердж3Д»

Цель этого раздела — краткое введение в программирование с использованием «Вердж3Д». Мы создадим простое, но довольно функциональное приложение с вращающимся кубом, использовав для этого всего несколько строк на языке «Ява Скрипт» и простейшую HTML-разметку.

- Создаём каркас приложения
- Пишем код приложения
- Запускаем приложение
- Добавляем анимацию
- Закругляемся
- Дальнейшие шаги

#

## Создаём каркас приложения

Перед тем как писать код самого приложения, создайте папку где оно будет храниться. В этой папке будет находиться HTML-файл с вёрсткой, загружаемая сцена и главный модуль движка «Вердж3Д». Начнём с HTML. Сохраните следующий HTML-код в файл в папке приложения и назначьте ему понятное имя, не забыв про расширение .html, например моё_приложение.html.

`<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Моё первое Вердж3Д-приложение</title> <style> body { margin: 0; } #v3d-container { position: absolute; width: 100%; height: 100% } </style> </head> <body> <div id="v3d-container"></div> <script src="v3d.js"></script> <script> // наш Ява Скрипт пойдёт сюда </script> </body> </html>`

Как видно, ничего сложного мы не сделали. Имеется простейший HTML-файл с <div>-элементом, предоставляющим контейнер, в котором будет находиться 3Д-холст с кубом. Стили внутри элемента <style> делают так, чтобы 3Д-холст занимал всё доступное место на странице, а наш будущий код пойдёт внутрь тега <script>.

Также в этом файле мы подключаем главный модуль движка «Вердж3Д» — v3d.js. Вы можете скопировать его из папки build из инсталляционной директории «Вердж3Д» или скачать отсюда.

#

## Пишем код приложения

Чтобы иметь возможность отображать что-либо с помощью «Вердж3Д», нам потребуется экземпляр класса App, который загрузит glTF-файл сцены, содержащий нужный нам куб.

`const app = new v3d.App('v3d-container'); app.loadScene('cube.glb', () => { app.enableControls(); app.run(); });`

Получается, что нам нужен этот самый glTF-файл, но где его взять? В данный момент задача моделирования перед нами не стоит, поэтому возьмём готовый здесь.

HTML-файл приложения готов, но если вы запустите его в браузере, вы увидите... ничего! Дело в том, что браузеры блокируют загрузку ассетов с локальной файловой системы из соображений безопасности, требуя запускать приложения с помощью веб-сервера. Запуск целого сервера может показаться сложной процедурой, но это не так!

#

## Запускаем приложение

Есть масса способов запустить веб-сервер для разработки приложений на локальной машине, но самым простым будет воспользоваться тем, что уже поставляется в составе «Вердж3Д». Скопируйте всю папку с кубом в папку приложений диспетчера приложений и запустите ваше новое приложение с помощью синей кнопки:

Как вариант, если на вашей системе установлен «Питон», вы можете запустить сервер с помощью простейшей команды (запускать в папке с приложением):

`python3 -m http.server`

Далее откройте браузер, перейдите на страницу http://0.0.0.0:8000 и кликните на HTML-файле приложения из предложенного списка.

#

## Добавляем анимацию

Первое, что делают начинающие 3Д-программисты — заставляют куб крутиться. Не будем отходить от традиций и тоже реализуем такой поворот. Одним из вариантом было бы проворачивать модель на небольшой угол каждый кадр, но мы сделаем лучше: вместо поворота модели, станем крутить камеру вокруг объекта!

Добавьте следующую строчку кода сразу под вызовом метода app.run():

`app.controls.autoRotate = true;`

#

## Закругляемся

Поздравляем! Вы только что создали ваше первое «Вердж3Д»-приложение. В нём всего лишь пять строчек на «Ява Скрипте», но оно уже способно на многое:

- Загружает сцену, камеру, источник света и 3Д-модель.
- Использует сложный шейдер освещения на основе PBR, собранный на лету из материала, который в свою очередь основан на системе шейдерных нод. Сам материал был скомпонован не нами, а опытным художником в его любимом пакете моделирования.
- Пользователь может управлять камерой с помощью мыши или тачскрина мобильного устройства.
- На сцене используется освещение с помощью карты окружения в формате HDR. Карта загружается, парсится и преобразовывается в нужный формат автоматически.
- И конечно, на сцене используется камера, двигающаяся по сложной орбитальной траектории

Полный код приложения будет выглядеть так:

`<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Моё первое Вердж3Д-приложение</title> <style> body { margin: 0; } #v3d-container { position: absolute; width: 100%; height: 100% } </style> </head> <body> <div id="v3d-container"></div> <script src="v3d.js"></script> <script> const app = new v3d.App('v3d-container'); app.loadScene('cube.glb', () => { app.enableControls(); app.run(); app.controls.autoRotate = true; }); </script> </body> </html>`

#

## Дальнейшие шаги

Платформа Node.js и система управления пакетами npm предоставляют огромную экосистему для «Ява Скрипт»-разработчиков. Воспользуйтесь ими, чтобы значительно повысить эффективность вашей работы.