Tutorial

In this tutorial, we are going to learn how to create basic elements using Babylon JS such as boxes, spheres, and planes.

Final result

How can I do this ?

Creating an object is easy, but as far as we build our scene, the code will become more and more complex, so let’s see our new structure. We keep an HTML5 page, but the JavaScript code will be exported in a new .JS file, to clarify our code. So the entire web page is now shorter, but with 2 new JS file:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>BABYLON-Createsimpleelements</title>

<script src="../hand.js"></script>

<script src="../babylon.js"></script>

<!--NewJSfiles-->

<!--ContainBabylonmechanics-->

<script type="text/javascript"src="mainTutos.js"></script>

<!--Containourscene-->

<script type="text/javascript"src="scene_tuto.js"></script>

<style type="text/css">

html,body,#canvas {

width:100%;

height:100%;

padding:0;

margin:0;

overflow:hidden;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

</body>

</html>

mainTutos.js file

The first one contain all about Babylon mechanics: loading engine, testing WebGL support, scaling the scene to browser size, and obviously loading our scene and rendering it! This file won’t change a lot in the future as we now have all basic functions in it.

Here is the result of “mainTutos.js”:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

window.onload=function(){

varcanvas=document.getElementById("canvas");

// Check support

if(!BABYLON.Engine.isSupported()){

window.alert('Browser not supported');

}else{

// Babylon

varengine=newBABYLON.Engine(canvas,true);

//Creating scene (in "scene_tuto.js")

scene=createSceneTuto(engine);

scene.activeCamera.attachControl(canvas);

// Once the scene is loaded, just register a render loop to render it

engine.runRenderLoop(function(){

scene.render();

});

// Resize

window.addEventListener("resize",function(){

engine.resize();

});

}

};

Scene_tuto.js file

This file is all about our scene. It is about to become our main JS file, where we are going to create all our objects so keep an eye on this file! As we saw in our previous JS file, we are loading a function named “createSceneTuto” to render the scene, so let’s see what’s inside.

As we have learned in the previous tutorial, first, we are creating a basic scene (scene object, camera, light):

Now you have a scene with 5 new objects in it, but the default position of meshes is vector zero (x=0, y=0, z=0), so how can you move them? Simply by giving them a new 3D point, a “Vector3” (Look at this video for a vector tutorial). So if you want to move your box:

1

2

3

4

5

box.position=newBABYLON.Vector3(-10,0,0);

sphere.position=newBABYLON.Vector3(-10,30,0);

plan.position=newBABYLON.Vector3(30,5,0);

cylinder.position=newBABYLON.Vector3(-30,0,5);

torus.position=newBABYLON.Vector3(-10,0,-30);

Finally, when the scene is ready, return the scene object to the first JS file to complete the creation of our scene:

1

2

returnscene;

}

And that’s it!

Grab the files

Published by

David Catuhe

David Catuhe is technical evangelist lead at Microsoft France. He defines himself as a geek. He loves to develop with JavaScript and HTML5 but also with DirectX, C#, C++ or even Kinect (He wrote a book about it which is available on Amazon).David has a blog called Eternal Coding where he writes about HTML5, Windows, Kinect and 3D Development.
View all posts by David Catuhe