Programming Basics

In this section we give a brief introduction to Verge3D programming. Here we create a seemingly simple, yet feature-rich cube scene by using just a few lines of HTML and JavaScript code.

Warming Up

Before you create a Verge3D app, make some folder and assign a proper name to it. There you'll store an HTML file as well as the scene asset and the engine module. Let's start with HTML. Open your favorite text editor and save the following code to the file with the .html extension, e.g. my_app.html:


    <!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="v3d.js"></script>
        <script>
          // app code goes here
        </script>
      </body>
    </html>

There is nothing special here, just a basic HTML file with one <div> element which is a container for our 3D canvas. The CSS styling in the <style> element forces the canvas to occupy the entire page area. All the app code goes into the empty <script> tag.

The file also links Verge3D engine module called v3d.js. You can take it from the build folder of Verge3D installation folder or simply download it from here.

Create the App

To render something with Verge3D, we need to create an instance of the App class, which will load a glTF binary asset which contains some 3D graphics, in this case a cube.


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

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

This implies you'll need a cube scene asset. Feel free to download it from here.

If you try to open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

Run the App

There are many ways to launch the development server for the app. The easiest way would be copying our app folder to the applications folder and launching the app from the App Manager.

Running basic 3D cube application using App Manager

Alternatively, if you happen to have Python installed, simply run the following command in the app folder:

python3 -m http.server

Then navigate to http://0.0.0.0:8000 and launch your app HTML from the proposed list.

Add Animation

When people start with 3D programming, the first thing they usually do is a spinning cube. We could do the same by applying rotation to our cube each frame. But we'll make something better and more functional — rotate the camera around the object!

Add the following right below the app.run() call:


    app.controls.autoRotate = true;

Wrapping Up

Congratulations! You've just made your first Verge3D application. It's only 5 lines of JavaScript, but the app is full of features:

It loads a scene, camera, light source, and mesh object.
The model uses PBR shader which is created on the fly from the node graph designed in the modelling suite.
You can control the orbit camera by using mouse or touchscreen.
The scene comes with image-based environment lighting. The required HDR texture is loaded, parsed, and converted to prefiltered format under the hood.
And of course, there is an auto-rotate animation applied to the camera.

The full code is available below.


    <!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="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>

What's Next

With Node.js and npm you can leverage the enormous ecosystem for JavaScript development and create Verge3D even faster. See how in the next section.