Visual Tutorial 4: Write Your First Babylon.js Program Dr. Nick V. Flor, University of New Mexico, nickflor@unm.edu (professorf@gmail.com)

Babylon.js is “… a complete javascript for building 3D Games with HTML 5 and WebGL.”

o At the Windows Start Screen, type visual

o Click on VS Studio …

o Click on the menu item File > New Web Site, or the keyboard-shortcut Shift+Alt+N

o Click on the label Visual C#, then click the label ASP.NET Empty Web Site, then

replace the textbox string WebSite1 with your own label, like MyBabylon. It is also

helpful to remember the folder path to MyBabylon:

o After you type all this, click on the OK button:

o Right-click over MyBabylon in the right-most Solution Explorer panel, then hover the

cursor over Add:

o Click on New Folder

o Rename NewFolder1 to js (for javascript). Don’t forget to press the enter key when

you’re done:

o Right-click over the js folder, and hover over Add:

o Click Existing Item…

o Click on Downloads:

o Click on Babylon.js-master twice, until you get to the folder with the babylon.2.0.js

file:

o Double click on Babylon.2.0.js (double-clicking is a short-hand for clicking on the file

and then clicking on the Add button)

o Right-click over babylon.2.0.js

o Click on Rename and change the name to just babylon.js. Don’t forget to press the

enter key when you’re finished. The actual file will be opened too in the editor, but we

won’t be editing it:

o Right-click over the js folder icon, then hover over Add:

o Click Existing Item…:

o Click on the Downloads folder:

o Double-Click on handjs-master twice, then click on the bin folder:

o Double-click on the file hand.js (double-clicking is a short-hand for clicking on the

file and then clicking on the Add button):

o Right-click over MyBabylon and hover over Add:

o Click on Add New Item…:

o Click on HTML Page then Rename HtmlPage.html to HelloWorldBall.html:

o Click the Add button

o Note that HelloWorldBall.html now appears in the Solution Explorer, and the editor

displays the contents of HelloWorldBall.html

o Add babylon.js and hand.js to your program:

o Babylon.js needs a canvas in which to draw 3D objects. Add a canvas tag inside the

body tag. Note the id of the canvas is cvRender:

o Usually a 3D program takes up the entire display (although it doesn’t have to). To

make your program take up the entire display, style the html page, body and canvas

tags as follows:

o Next, you need to add a function that will be called when the page loads:

o Declare global variables for information that is commonly used across functions.

These globals include: canvas, engine, scene, camera, light:

o Add the code to display a ball and render it:

o Click the run Internet Explorer icon (green arrow)

o Use the arrow keys and mouse to navigate near the ball:

If you made it this far, congratulations! This means everything installed correctly and we

can start creating video games. We’ll do that in subsequent tutorials.

Acknowledgments The material in my videogame & visualization tutorials is based partly upon work

supported by the National Science Foundation (NSF) under the Division of Electrical,

Communications and Cyber Systems (ECCS) - 1231046. Any opinions, findings, and

conclusions or recommendations expressed in this material are those of the author and

do not necessarily reflect the views of the NSF.

Date: Monday, June 1, 2015