Using JavaScript in Verge3D Applications

Thanks to the Puzzles, you can implement most of the functionality found in typical WebGL applications without writing a single line of code. However, there can be special cases where you may want to use JavaScript — for example, to leverage third-party programming libraries or to implement some non-trivial feature which cannot be realized with the Puzzles alone.

Method #1 (Basic)

The easiest way to incorporate a javascript code in your puzzles is to use a special puzzle called exec script. It has a built-in fully functional text editor capable of syntax highlighting, syntax checking, code folding and many other features.

What this puzzle does is execute a javascript code snippet right away. The advantages of using "exec script" are:

it's a puzzles-only approach (no need to edit the project's .js files)
such code snippets can be saved into the puzzles library and easily reused in other projects

In order to access variable and procedure puzzles from the inside of "exec script" you can use VARS and PROC built-ins. See more details in the exec script documentation.

As an example the following puzzle setup utilizing "exec script" makes scene objects change their material on click:

Method #2 (Standard)

If you want to have more control than what the "exec script" puzzle can offer then this method is for you. It supposes using of the default Standard application template (Standard Light or Standard Dark):

Suppose you created your application using the App Manager (with default configuration options), and named it my_awesome_app. Go to the applications folder and then to my_awesome_app folder, and open the JavaScript file my_awesome_app.js with your favorite text editor.

You can use any text editor for adding JavaScript code, but it is more convenient to work if your editor supports syntax highlighting and line numbering, like Notepad++ or VS Code.

Search for "runCode" — this place in the file should look something like this:


    function runCode(app, puzzles) {
        // add your code here, e.g. console.log('Hello, World!');

    }

You can add some code inside that declaration (between the curly brackets), so that it turns to:


    function runCode(app, puzzles) {
        // add your code here, e.g. console.log('Hello, World!');
        console.log('Just added some JavaScript!');
    }

Now, if you save the .js file and run your app you'll notice... nothing until you open the browser console. The latter can usually be opened with the F12 key (Chrome, Firefox on Windows, Linux). On Mac use the View → Developer → JavaScript Console menu (⌥-⌘-J) in Chrome, or the Develop → Show Error Console menu (⌥-⌘-C) in Safari.

Viewing script output in browser console

With code you can change something in your scene, for example, move the default Verge3D cube (named "Cube" in Blender, "Box001" in 3ds Max, or "pCube1" in Maya)...


    function runCode(app, puzzles) {
        const obj = app.scene.getObjectByName('Cube');
        obj.position.x = 2;
    }

... or create a new material out of thin air:


    function runCode(app, puzzles) {
        const obj = app.scene.getObjectByName('Cube');
        obj.material = new v3d.MeshPhongMaterial({ color: '#00BB00', emissive: '#550000' });
    }

For more info on using JavaScript in your Verge3D applications refer to the programmer's guide.

Method #3 (Compact)

This method will suit experienced programmers who would like to have just a minimal working code snippet to begin with. It's pretty much the same as Standard except you choose a different application template named Code-Based when creating a new application:

This will result in a simpler project structure with no Puzzles editor attached to your application, and the app .js file will contain just a few lines of code:


    'use strict';

    const CONTAINER_ID = 'v3d-container';
    const SCENE_URL = 'template.gltf';

    const preloader = new v3d.SimplePreloader({ container: CONTAINER_ID });
    const app = new v3d.App(CONTAINER_ID, null, preloader);

    app.loadScene(SCENE_URL, () => {
        app.enableControls();
        app.run();
        runCode();
    });

    function runCode() {
        // add your code here, e.g. console.log('Hello, World!');
    }

Applications of this type are very simple yet they are still capable of loading a scene in .gltf format (with preloader), and offer standard camera controls to the user.

You can proceed by adding your code inside the "runCode" function as described in Method #2. Of course, you can completely overhaul this application template instead: replace the App class with your own implementation, load the scene using the different 3D file format, or setup the controls in some specific way.

Method #4 (Hardcore)

This method will suit programmers who are familiar with the Three.js library, as its API is similar to the one used in Verge3D.

Copy the v3d.js file from the build folder of your Verge3D installation, link it to an .html file and start coding! Alternatively, there is an NPM package available at your disposal.

Get Inspired by Puzzles

This is not a method but rather a tip. In fact, when you click the Save button in the Puzzles editor, it will generate a self-contained, human-readable JavaScript module saved as visual_logic.js file in your app folder.

This way you may have a working example of how certain JavaScript API methods work, and re-use the snippet generated for a puzzle of interest in your own code.

Got Questions?

Feel free to ask on the forums!