Create our first program with Babylon.js framework

Recently I have started to write javascript program for my new 3D game with the help of Babylon.js, which is a javascript game developer first choice gaming framework for the development of the 3D html5 game. Since I am working on the game now then it mights be great for me to share with you all the steps that I use to set up the Babylon.js framework in this article.

Before you start to write your program with the help of Babylon.js you will need to download the latest version of Babylon.js on Github. After you have downloaded the zip file you can then extract it into a folder on your computer. If you look into the Babylon.js-master folder (the name of the main folder might not be the same for the latest version) you will find there are lots of files as well as sub-folders inside it. Go into the dist folder and grab the babylon.2.5.max.js file to a new folder you have created for your first project and you are ready to rock!

Next create a index.html file for your project then enter the below code. Make sure to link all the files you require to run the program in the header part of the html5 file. We will create those files later on.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Lets Rock!</title>
    <!-- link to the last version of babylon -->
    <script src="babylon.2.5.max.js"></script>
    <!-- link to the js and css file -->
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

The canvas tag is the most important piece of meal in the entire code above, make sure you have specified an id for that canvas element as well.

Next create a style sheet and named it style.css

html, body {
	overflow: hidden;
	width   : 100%;
	height  : 100%;
	margin  : 0;
	padding : 0;
}

#renderCanvas {
	width   : 100%;
	height  : 100%;
	touch-action: none;
}

At last create the last piece of javascript file and named it main.js.

var engine;
var scene;
var canvas;

window.addEventListener('DOMContentLoaded', function() {
	canvas = document.getElementById('renderCanvas');
	engine = new BABYLON.Engine(canvas, true);
	scene = createScene();
	engine.runRenderLoop(function() {
		scene.render();
	});
});

window.addEventListener('resize', function() {
	engine.resize();
});

var createScene = function() {
	
		// create a basic BJS Scene object
		var scene = new BABYLON.Scene(engine);

		// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
		var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

		// target the camera to scene origin
		camera.setTarget(BABYLON.Vector3.Zero());

		// attach the camera to the canvas
		camera.attachControl(canvas, false);

		// create two lights to light up the screen
		
		var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -2, 0), scene);
		light0.diffuse = new BABYLON.Color3(1.0, 1.0, 1.0);
		light0.specular = new BABYLON.Color3(1.0, 1.0, 1.0);
		
		var light1 = new BABYLON.SpotLight("Spot1", new BABYLON.Vector3(0, 10, -3), new BABYLON.Vector3(0, -3, 0), 0.8, 2, scene);
		light1.diffuse = new BABYLON.Color3(1, 1, 1);
		light1.specular = new BABYLON.Color3(1, 1, 1);

		// create a built-in "TorusKnot" shape; 
		var torusKnot = BABYLON.Mesh.CreateTorusKnot("torusKnot", 0.3, 0.05, 128, 64, 3, 2, scene, false, BABYLON.Mesh.DOUBLESIDE);
		var materialKnot1 = new BABYLON.StandardMaterial("texture1", scene);
		materialKnot1.diffuseColor = new BABYLON.Color3(0.5, 0.6, 0.4);
		materialKnot1.alpha = 0.5;
		torusKnot.material = materialKnot1;
		torusKnot.position.y = 2;
		torusKnot.position.z = -3;

		// create a built-in "ground" shape; 
		var ground = BABYLON.Mesh.CreateGround('ground1', 6, 4, 2, scene);
		var materialGround1 = new BABYLON.StandardMaterial("texture2", scene);
		materialGround1.diffuseColor = new BABYLON.Color3(0.3, 0.5, 0.3);
		ground.material = materialGround1;

		// return the created scene
		return scene;
}

Basically the javascript program above will create the babylon engine object and the screen object that we need to create and attached (our game objects into it)!

Now your project folder should look like this.

The files inside project folder
The files inside project folder

After all the hard work here is the object we have just created.

The render scene of Babylon.js framework
The render scene of Babylon.js framework