Integrating 3D graphics into a website using BabylonJS

Jonny300x300Posted by Jonny Kievits on 21-3-2017

BabylonJS is an engine for visualizing 3D elements within a website. In this post I’ll explain how to setup and use BabylonJS and add interactivity using standard DOM elements and JQuery.

Step 1. Download BabylonJS

On the website of BabylonJS, you can compose and download a custom setup. For this demo we will just need to add ‘normal’ textures. We also download the latest jQuery.

Step 2. Make an HTML document

Create a basic HTML5 document setup and include the babylon.js file in the head. Also include jQuery.

<script src=”babylons.custom.js”></script>
<script src=”jquery-3.1.1.min.js”></script>

Step 3. Start using Babylon

Babylon needs a canvas element to draw to. The initialisation of Babylon consists mainly of two different steps:

  1. Initialise the engine
  2. Setup your scene

So you start by adding a <canvas> element to the body of your document. You might choose to dynamically add it using jQuery. Just keep in mind that Babylon only likes the DOM element which needs to be passed to the engine so when dynamically adding the element, use the $(..).get() to get access to the DOM level.

Once you have a canvas on your document, you can tell Babylon to create an engine for it:

var canvas = $('<canvas />').appendTo(document.body).get(0);
var engine = new BABYLON.Engine(canvas, true);

The second parameter tells the engine to use Anti Aliasing. You don’t want to disable anti aliasing unless there are serious performance issues. There will be another blog focussing around performance and optimizing it in the near future.

After this we write a createScene function.

Step 4. Setting up the scene

In a real life situation, for example, you want to display a model of a product. Babylon supports loading different types of external objects and there is always an option to export a scene from Blender in the .babylon format. In this case we use a very simple model that is created from within the createScene function. I don’t want to go too much in depth on how to create a model or the different options to fill in scene. There are some very good examples on the BabylonJS website for that.

First we set the clearColor property of the scene to match the background of the website. In this case I used a white background.

scene.clearColor = new BABYLON.Color3(1, 1, 1);

It is possible to use a transparent background but not every browser supports that so I wouldn’t recommend doing this.

Then we create an ArcRotateCamera which allows the user to rotate the camera around a fixed point.

Create a new camera object. The fourth parameter, ‘10’ in this example is distance of the camera to the center of the scene or the zoomfactor. You might want to increase this value when you are displaying bigger objects.

var camera = new BABYLON.ArcRotateCamera('camera', 1, 1, 10, new 
                   BABYLON.Vector3(0, 0, 0), scene);

Make sure the new camera is the active camera. This is useful when you load an external Blender scene when there is another camera in there.

scene.activeCamera = camera;

Then we attach the control of the scene to the camera. This enables the mouse control of the camera. The second parameter makes sure mouse events are passed through to the browser which in turn enables the user to scroll when the mouse is hovered above the canvas object.

scene.activeCamera.attachControl(canvas, true);

But, the camera also allows zooming by scrolling. We want to disable this by setting:

scene.activeCamera.lowerRadiusLimit = scene.activeCamera.radius;
scene.activeCamera.upperRadiusLimit = scene.activeCamera.radius;

We will use this rather than actually rotate the object. This allows you to just place the product you want to display in the center of your scene and let the camera do the magic. You might want to ‘fix’ your light objects to the camera so they will also rotate. To do this:

var light = new BABYLON.HemisphericLight('hemilight', 
 new BABYLON.Vector3(-1, 1, 0), scene);
light.parent = scene.activeCamera;

Now, when you move the camera, the light will move with it preserving the illusion that it’s the object that rotates instead of the camera around the object.

To make sure the browser doesn’t display a focus rectangle around the canvas, you should add the following css:

canvas {
 outline: none;

the example

You can checkout my example on github and see a live preview here.

Bij Kabisa staat privacy hoog in het vaandel. Wij vinden het belangrijk dat er zorgvuldig wordt omgegaan met de data die onze bezoekers achterlaten. Zo zult u op onze website geen tracking-cookies vinden van third-parties zoals Facebook, Hotjar of Hubspot. Er worden alleen cookies geplaatst van Google en Vimeo. Deze worden gebruikt voor analyses, om zo de gebruikerservaring van onze websitebezoekers te kunnen verbeteren. Tevens zorgen deze cookies ervoor dat er relevante advertenties worden getoond. Lees meer over het gebruik van cookies in ons privacy statement.