3D Elements with HTML5 and WebGL – BabylonJS Series part 2

BabylonJS Series by David Catuhe (@DeltaKosh):

• Part 1 – Build a 3D Sphere with WebGL
• Part 2 – 3D Elements with HTML5 and WebGL
• Part 3 – Rotating and Scaling 3D Objects in HTML5
• Part 4 – 3D Objects with Textures using HTML5
• Part 5 – Using a Camera in a 3D WebGL World
• Part 6 – Light in a 3D WebGL World
• Part 7 – How to Animate 3D Object with WebGL

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

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:

    
    
    

    
    
    
    
    

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

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”:

window.onload = function(){
    var canvas = document.getElementById("canvas");

    // Check support
    if (!BABYLON.Engine.isSupported()) {
        window.alert('Browser not supported');
    } else {
        // Babylon
        var engine = new BABYLON.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):

function createSceneTuto(engine) {
    //Creation of the scene 
    var scene = new BABYLON.Scene(engine);

    //Adding of the light on the scene
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

    //Adding of the Arc Rotate Camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);

Now you can add all the meshes you want! Have a look on basic elements you can create:

• Create a box

var box = BABYLON.Mesh.CreateBox("Box", 6.0, scene);

Parameters are: name, size of the box, the scene to attach the mesh.

• Create a sphere

var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10.0, 10.0, scene);

Parameters are: name, number of segments (highly detailed or not), size, scene to attach the mesh. Beware to adapt the number of segments to the size of your mesh ;)

• Create a plane

var plan = BABYLON.Mesh.CreatePlane("Plane", 50.0, scene);

Parameters are: name, size, and scene to attach the mesh.

• Create a cylinder

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 6, scene, false);

Parameters are: name, height, diameter, tessellation (highly detailed or not), scene, updatable.

• Create a torus

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);

Parameters are: name, diameter, thickness, tessellation (highly detailed or not), scene, updatable.

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:

box.position = new BABYLON.Vector3(-10,0,0);
sphere.position = new BABYLON.Vector3(-10,30,0);
plan.position = new BABYLON.Vector3(30,5,0);
cylinder.position = new BABYLON.Vector3(-30,0,5);
torus.position = new BABYLON.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:

return scene;
}

And that’s it!

Grab the files

You can grab the tutorial files here.