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.

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.

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:

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 verge3d/applications folder and then to my_awesome_app folder, and open the JavaScript file my_awesome_app.js with your favorite text editor.

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

function runCode(app) { // 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) { // 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 (Option-Cmd-J) in Chrome, or the Develop > Show Error Console menu (Option-Cmd-C) in Safari.

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

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

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

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

Check out Verge3D code examples to get inspired. Click View source button to open the code for an example.

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'; window.addEventListener('load', function() { var app = new v3d.App('container', null, new v3d.SimplePreloader({ container: 'container' })); var url = 'my_awesome_app.gltf'; app.load(url, function() { app.enableControls(); 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 - for example, you can discard the App class, load the scene using some other 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 you basically can use the same API with Verge3D.

Copy the v3d.js file from the verge3d/build folder, link it to an .html file and start coding! How did you think the code examples were created in the first place?

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!