WebGL experiment part 5, Texture mapping


In this experiment, we will create this:

Texture mapping (image from NeHe website)

We will learn how to use BabylonJS basic elements and how to move them.

The demo page is here and the code is here.

Function: drawStuff

We are using a classic scene initialization:

function drawStuff(engine) {
  var scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color3(0, 0, 0);

  var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(50, 100, 0), scene);
  var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);

And a nice cube created easily with BabylonJS (see further for more details):

  var cube = BABYLON.Mesh.CreateBox("cube", 30, scene);

Then, we add a texture to our cube:

  var cubeMaterial = new BABYLON.StandardMaterial("texture1", scene);
  cubeMaterial.diffuseTexture = new BABYLON.Texture("data/05/NeHe.bmp", scene);
  cube.material = cubeMaterial;

And some fancy rotation:


  return scene;

About BabylonJS elements

BabylonJS allows your to easily create a few elements (from here):

Rotation function

Just a little function which takes an element and rotates it around y axis:

function rotate(element) {
  var degree = 0;

  setInterval(function() {
    var value = Math.PI * degree++/180;
    element.rotation = new BABYLON.Vector3(0, -value, 0);
    if (degree === 360) {
      degree = 0;
  }, 10);

About position, rotation, and scaling

All credits, as usual, to BabylonJS tutorials.


We actually used positioning since our first experiment.

The position for each axis can be setup individually like:

box.position.x = 10;
box.position.y = 20;
box.position.z = 30;

Or using a babylon vector:

box.position = new BABYLON.Vector3(10, 20, 30);

And you can create a relation between your forms to set relative positioning:

//Positioning the box3 relative to the box1
box3.parent = box1;
box3.position.z = -10;


Same thing with rotation:

box.rotation.x = Math.PI/4;
box.rotation.y = Math.PI/6;
box.rotation.z = Math.PI/12;


box.rotation = new BABYLON.Vector3(Math.PI/4, Math.PI/6, Math.PI/12);


You can scale your element along the 3 axis. Scaling value multiples the length of the object on the selected axis:

box.scaling.x = 2;
box.scaling.y = 1.5;
box.scaling.z = 0.5;

The end

Now, we can easily create forms, map stuff on them, and move them ! Yeah !

Let’s dive (a little) into BabylonJS for the next lesson.