Комплект разработчика Verge3D

Комплект разработчика Verge3D (англ. Developer Kit, DevKit) — это набор примеров, инструментов и исходного кода, которые поставляются с корпоративными версиями Verge3D. Этот набор поможет вам выполнять различные задачи разработчика, такие как:

Комплект разработчика предназначен для опытных программистов, желающих изучать или модифицировать движок. Он не нужен для создания приложений Verge3D со стандартным набором функций (с помощью пазлов или JavaScript).

Установка и настройка

Скачайте архив DevKit из раздела загрузок вашей учетной записи. Распакуйте этот архив в выбранную вами директорию.

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

Структура комплекта разработчика

DevKit включает следующие папки:

Папка DevKit Описание
build Готовые скрипты движка Verge3D и дополнительные модули (ammo.js и т.д.).
puzzles Собранные скрипты и исходный код редактора пазлов.
src Исходный код движка Verge3D.
templates Шаблоны приложений Verge3D.
utils Различные утилиты и сборочные зависимости.
wordpress Исходный код плагина Verge3D для WordPress (написан на PHP).
xz Исходный код модуля сжатия XZ.

В папке build, DevKit предоставляет 4 варианта рантайма Verge3D:

v3d.js
Минифицированная (оптимизированная) версия, пригодная для большинства приложений. Этот рантайм предоставляет классы/функции/константы в виде глобального пространства имён v3d. Данная версия используется в диспетчере приложений и большинстве демо-приложений из магазина ассетов.
v3d.unminified.js
Неминифицированная (неоптимизированная) версия рантайма выше. Чтобы воспользоваться её, скопируйте данный файл в папку с приложением и переименуйте в v3d.js, заменяя существующий файл с тем же именем.
v3d.module.js
Минифицированная (оптимизированная) версия, предоставляющая ES6 модули вместо глобального пространства имён v3d.
v3d.module.unminified.js
Неминифицированная (неоптимизированная) версия рантайма выше.

Сборка Verge3D

Перед компиляцией Verge3D, пожалуйста, убедитесь что вы установили npm, как описано выше.

После установки npm, перейдите в распакованную папку с DevKit и выполните следующую команду для установки зависимостей:

npm install

В случае, если вам потребуется пересобрать редактор пазлов, потребуется установить дополнительные зависимости для папок puzzles и puppeteer_testing:

npm install --prefix puzzles && npm install --prefix utils/puppeteer_testing

Чтобы сделать неоптимизированную сборку Verge3D, подходящую для тестирования и отладки, выполните следующую команду в директории DevKit:

npm run build

Вы можете найти скомпилированные модули в директории build вашего DevKit. Чтобы протестировать их работу, просто скопируйте модуль движка v3d.js в папку с вашим приложением, например:

cp build/v3d.js APPS_FOLDER/my_awesome_application

Чтобы скомпилировать оптимизированную версию Verge3D (она же релизная версия), выполните следующую команду в директории DevKit:

npm run build-release

Для сборки логического редактора пазлов используются следующие команды. Для создания неоптимизированной версии введите:

npm run build-puzzles

Чтобы собрать оптимизированную версию, выполните команду:

npm run build-puzzles-release

Скомпилированный скрипт редактора пазлов находится в директории puzzles вашего DevKit. Чтобы применить его к Verge3D, скопируйте все содержимое этого каталога в каталог puzzles в вашей директории Verge3D (заменяя уже существующие там файлы).

Активация модуля движка

Для подписывания скомпилированного модуля движка лицензионным ключом, используется утилита keymanager.py, расположенная в папке utils (требуется установленный «Питон»):

./keymanager activate ../build/v3d.js XXXXXXXXXX

Где XXXXXXXXXX — ваш лицензионный ключ. Поскольку утилита не выводит никакой информации в случае успеха или неудачи, убедитесь, что активация прошла успешно, скопировав модуль движка в какое-нибудь приложение и проверив что водяной знак MADE WITH VERGE3D TRIAL больше не выводится.

Добавление нового метода в JavaScript API

Допустим, вы хотите добавить еще один метод в класс App. Например, метод printHelloWorld() должен вывести что-то на консоль браузера:

App.printHelloWorld()

Класс App реализован в модуле, расположенном по адресу src/extras/App.js Откройте его и добавьте следующий код в конец файла, прямо перед закрывающими скобками класса App.

printHelloWorld() { console.log('Привет, Мир!'); }

Соберите и скопируйте рантайм Verge3D v3d.js пазлов в папку с приложением. Чтобы протестировать новый метод, откройте браузерную консоль и введите:

v3d.apps[0].printHelloWorld()

Проверьте что строка "Привет, Мир!" выводится строчкой ниже.

Добавление нового класса в JavaScript API

Чтобы дополнить API Verge3D каким-либо пользовательским классом, создайте .js файл с именем вашего класса в соответствующем подкаталоге папки src DevKit (например, src/extras/MyAwesomeClass.js). В этом .js-файле реализуйте свой класс - вы можете вдохновиться уже существующими классами. Наконец, зарегистрируйте свой класс в глобальном пространстве имен v3d, добавив следующую строку в файл src/v3d.js:

export { MyAwesomeClass } from './extras/MyAwesomeClass.js';

Соберите и скопируйте среду выполнения Verge3D v3d.js в ваше приложение и попробуйте воспользоваться новым классом в консоли браузера.

const myAwesomeStuff = new v3d.MyAwesomeClass(); myAwesomeStuff.whatEver();

Добавление новых пазлов

Чтобы создать собственный блок пазлов, отредактируйте файл puzzles/src/puzzles_blocks.js Вы можете вдохновиться уже существующими пазлами. Зарегистрируйте его в соответствующей категории панели инструментов в верхней части файла.

Соберите и скопируйте среду выполнения пазлов в папку с установленным Verge3D. Теперь вы должны найти свой новый пазл в панели инструментов редактора пазлов.

Вместо редактирования файла puzzles_blocks.js, вы можете оформить ваш код в виде плагина, что сделает его более универсальным.

Удаление строки с версией Verge3D из браузерной консоли

Каждый раз при запуске Verge3D-приложения пользователь может наблюдать следующую строку в браузерной консоли:

Строка содержит информацию о версии рантайма Verge3D, о статусе лицензирования, а также об используемой версии WebGL.

Если по каким-то причинам вывод данной информации нежелателен, вам потребуется модифицировать исходники движка. Откройте файл src/renderers/WebGLRenderer.js. Найдите следующую строку:

const PRINT_VERGE3D_LINE = true;

и установите данную константу в false:

const PRINT_VERGE3D_LINE = false;

Соберите и скопируйте рантайм Verge3D v3d.js пазлов в папку с приложением. Убедитесь, что строка с версией больше не выводится.

Остались вопросы?

Задайте их на нашем форуме!