Using Node.js and npm

Here we provide info on how to use Node.js and npm for the Verge3D application development.

Installing Node.js and npm

If you have not done it already, you can install both as prompted here.

Creating Basic Verge3D App

Create a folder with your new project, e.g. my_app, change to it, then initialize the npm package:

npm init

It will ask you some questions, choose anything you wish or leave answers proposed by default.

Install verge3d package as dependency:

npm install --save verge3d

Create my_app.html file with the following content:


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My first Verge3D app</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>

Create my_app.js file with the following content:


    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();
    });

Download cube.glb file and put it next to my_app.html.

Launch the development server:

npx http-server

Navigate to the http://127.0.0.1:8080 link in your browser, then launch my_app.html from the displayed list.

Using webpack

With webpack you can simplify the development of Verge3D apps by using more familiar imports in your JavaScript code:

import * as v3d from 'verge3d';

as well as optimize your app by packing Verge3D modules and code together into one JavaScript distribution.

Lets modify our basic app to make it webpack-friendly. First remove the my_app.js file, since you won't need it anymore.

Install webpack dependencies:

npm install --save webpack webpack-cli

Modify the my_app.html file by replacing everything with the following content:


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My first Verge3D app</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>

Create a src directory with the index.js file in it:


    import * as v3d from 'verge3d';

    const app = new v3d.App('v3d-container');

    app.loadScene('cube.glb', () => {
        app.enableControls();
        app.run();
    });

Launch webpack to build your app:

npx webpack

Launch the development server:

npx http-server

Navigate to the http://127.0.0.1:8080 link in your browser, then launch my_app.html from the displayed list.

Activating the License

To sign Verge3D engine modules (v3d.js and v3d.module.js) with your license key, use the keymanager command (Python 3 required):

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

and

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

Where XXXXXXXXXX is your license key. Please note that this command does not print anything. After activation, simply check for the MADE WITH VERGE3D TRIAL watermark in your app. When using webpack be sure to rebuild the app.

What's Next

Learn how to integrate Verge3D engine with React and Vue.js.