Build a 3D Sphere with WebGL – BabylonJS Series part 1

BabylonJS Series by David Catuhe (@DeltaKosh):

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 create a basic 3D scene with BabylonJS.

Babylon JS 01

Final result

How can I do this ?

You can develop this scene very easily in 2 simple step.

Before you start, be sure to have a WebGL compatible browser (e.g. “IE 11” on Windows 8.1).

The web part

First of all, create a basic HTML5 web page (Visual Studio is your friend):

Then add a canvas element to the scene and a bit of CSS. This canvas is an HTML5 element, wich will be used to draw our scene.

  • In the body part:
  • And in the head part, we put our CSS to view the canvas in maximum size:

The JavaScript part

Now we have an empty web page, ready to display 3D! Let magic happen by adding the Babylon JavaScript source code in the head section:

(if you don’t already got those files, you can find them here: https://github.com/BabylonJS/Babylon.js, and here: http://handjs.codeplex.com/)

Then finally, at the end of our web page(after body, load the engine and create your scene! A scene is composed by:

  • The Babylon engine
  • A scene object
  • A camera
  • At least one light
  • A render loop, to display your scene continuously

Loading the engine…

And let your imagination run wild as you create incredible scenes like this one:

And you are already done! Now, you should see your sphere in 3D within your browser.

Don’t hesitate to download the complete source code HERE.

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.

Share this article