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

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

Установка 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Д»-приложениях.