Chapter 01Translating, Rotating, and Scaling Meshes

There are 3 types of transformations that we can apply to a mesh: rotation, translation, and scaling. Rotations are transformations that preserve the position of at least one point in the mesh. Translations, on the other hand, reposition all of the vertices of a mesh in the same direction and by the same distance. Scaling compresses or expands the size of a mesh.

In the scene below the cube, sphere, and torus are initially positioned on the z-axis. After each time the scene is rendered, BJS runs an anonymous function that we pass to scene.registerAfterRender. The anonymous function rotates the cube, scales the sphere, and translates the torus.

<script>
  var canvas1 = document.getElementById("canvas1");
  var engine1 = new BABYLON.Engine(canvas1, true);

  var createScene1 = function(engine, canvas) {
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1,1,1);
    
    let camera = new BABYLON.ArcRotateCamera("cam", 0, 15*Math.PI/32, 5, new BABYLON.Vector3(0,0,3), scene);
    camera.attachControl(canvas, true);
    
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1,1,0), scene);
    light.intensity = 0.8;

    let box = BABYLON.MeshBuilder.CreateBox("box", scene);
    box.rotation.y = Math.PI/4;
    
    let mat = new BABYLON.StandardMaterial("mat", scene);
    mat.emissiveColor = new BABYLON.Color3(0,0,1);
    box.material = mat;

    let sphere = BABYLON.MeshBuilder.CreateSphere("sphere", scene);
    sphere.position = new BABYLON.Vector3(0,0,3);
    
    mat = new BABYLON.StandardMaterial("mat", scene);
    mat.emissiveColor = new BABYLON.Color3(0,1,0);
    sphere.material = mat;

    let torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);
    torus.position = new BABYLON.Vector3(0,0,6);
    torus.rotation.x = Math.PI/2;
    torus.rotation.y = Math.PI/2;
     
    mat = new BABYLON.StandardMaterial("mat", scene);
    mat.emissiveColor = new BABYLON.Color3(1,0,0);
    torus.material = mat;

    let direction = 1;
    let i = 0;

    scene.registerAfterRender(function () {
      let torus = scene.getMeshByName("torus");
      let pos = torus.position.y;
      if (pos < -1 || pos > 1) {
        direction = direction * -1
      }
      let delta = direction * 0.01;
    
      torus.position.y += delta;
      
      let box = scene.getMeshByName("box");
      box.rotate(BABYLON.Axis.Z, delta, BABYLON.Space.LOCAL);
      
      let sphere = scene.getMeshByName("sphere");
   	  sphere.scaling.x += delta;
      sphere.scaling.y += delta;
      sphere.scaling.z += delta;
    });

    return scene;
  };

  var scene1 = createScene1(engine1, canvas1);

  engine1.runRenderLoop(function () {
    scene1.render();
  });

  window.addEventListener("resize", function () {
    engine1.resize();
  });

</script>
<canvas id="canvas1" height="200px" width="500px"></canvas>

Below we discuss the local and world coordinate systems and then discuss the various ways that we can rotate, scale, and translate meshes.

World Matrices

In the last section we saw that the geometry of a mesh is defined in two arrays named the vertex buffer and the index buffer and that the coordinates of the vertices were defined in the mesh’s local space.

mesh.getPositionExpressedInLocalSpace()

BABYLON.Vector3.TransformCoordinates()

Translation

mesh.position mesh.position.x mesh.position.y mesh.position.z

mesh.setPositionWithLocalVector()

mesh.locallyTranslate()

mesh.translate()

Rotation

mesh.rotation mesh.rotation.x mesh.rotation.y mesh.rotation.z

mesh.rotationQuaternion

mesh.rotate()

mesh.addRotation()

Vector3.RotationFromAxis() Vector3.RotationFromAxisToRef()

Quaternion.RotationQuaternionFromAxis() Quaternion.RotationQuaternionFromAxisToRef()

Scaling

mesh.scaling mesh.scaling.x mesh.scaling.y mesh.scaling.z

Modifying Origin of Transformation

origin of local axis

mesh.parent

TransformNode

Pivot Point

Baking transformations

Face Camera

mesh.lookAt()

BILLBOARD mode

References