Использование Node.js и NPM — Софт Эйт Софт
Description: Как использовать Node.js и npm для разработки Вердж3Д-приложений.

# Использование Node.js и NPM

В этом разделе приведена информации об использовании платформы Node.js совместно с менеджером пакетов npm для разработки «Вердж3Д»-приложений.

- Установка Node.js и npm
- Создание простейшего «Вердж3Д»-приложения
- Использование webpack
- Активация лицензии
- Дальнейшие шаги

#

## Установка Node.js и npm

Если вы не сделали этого ранее, обе программы могут быть загружены отсюда. Там же вы найдёте инструкции по установке.

#

## Создание простейшего «Вердж3Д»-приложения

Создайте папку для вашего нового проекта, например my_app, перейдите в неё и создайте новый npm пакет командой:

`npm init`

Команда задаст ряд вопросов, укажите свои данные или оставьте предложенные по умолчанию варианты.

Установите пакет verge3d как зависимость:

`npm install --save verge3d`

Создайте файл my_app.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 type="module" src="my_app.js"></script> </body> </html>`

Создайте файл my_app.js со следующим содержимым:

`import * as v3d from './node_modules/verge3d/build/v3d.module.js'; const app = new v3d.App('v3d-container'); app.loadScene('cube.glb', () => { app.enableControls(); app.run(); });`

Скачайте файл модели cube.glb и поместите его рядом с файлом my_app.html.

Запустите сервер разработки:

`npx http-server`

Перейдите на страницу http://127.0.0.1:8080 в любом браузере, а затем запустите my_app.html из предложенного списка.

#

## Использование webpack

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

`import * as v3d from 'verge3d';`

а также оптимизировать загрузку приложений посредством упаковки модулей «Вердж3Д» и вашего кода в единый «Ява Скрипт»-файл.

Сделаем наше приложение совместимым с webpack. Удалите файл my_app.js, поскольку он нам больше не понадобится.

Установите webpack как зависимость:

`npm install --save webpack webpack-cli`

Измените файл my_app.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="dist/main.js"></script> </body> </html>`

Создайте папку src и поместите внутрь новый файл index.js со следующим содержимым:

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

Запустите webpack и соберите ваше приложение:

`npx webpack`

Запустите сервер разработки:

`npx http-server`

Перейдите на страницу http://127.0.0.1:8080 в любом браузере, а затем запустите my_app.html из предложенного списка.

#

## Активация лицензии

Чтобы подписать модули движка (v3d.js и v3d.module.js) вашим лицензионным ключом, используйте команду keymanager (требуется интерпретатор «Питона» версии 3):

`npx keymanager activate node_modules/verge3d/build/v3d.js XXXXXXXXXX`

или

`npx keymanager activate node_modules/verge3d/build/v3d.module.js XXXXXXXXXX`

Где XXXXXXXXXX — ваш лицензионный ключ. Данная команда ничего не выводит, поэтому сразу после активации проверьте работу приложения. Если вы больше не видите водяной знак MADE WITH VERGE3D TRIAL, то активация прошла успешно. В случае использования утилиты webpack не забудьте пересобрать ваше приложение после активации.

#

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

Узнайте как использовать фреймворки React и Vue.js в ваших «Вердж3Д»-приложениях.