BabylonJS - Rotation

In the demo shown below, we will rotate the boxes which we saw above.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
            boxa.position = new BABYLON.Vector3(0,0.5,0);

            var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
            boxb.position = new BABYLON.Vector3(3,0.5,0);		
            boxb.rotation = new BABYLON.Vector3(Math.PI/2,0.5,0);

            var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
            boxc.position = new BABYLON.Vector3(-3,0.5,0);
            boxc.rotation = new BABYLON.Vector3(Math.PI/2,0.5,0);

            var boxd = BABYLON.Mesh.CreateBox("BoxD", 1.0, scene);
            boxd.position = new BABYLON.Vector3(0,0.5,3);
            boxd.rotation = new BABYLON.Vector3(0,0.5,Math.PI/2);

            var boxe = BABYLON.Mesh.CreateBox("BoxE", 1.0, scene);
            boxe.position = new BABYLON.Vector3(0,0.5,-3);
            boxe.rotation = new BABYLON.Vector3(0,0.5,Math.PI/2);

            var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
            ground.position = new BABYLON.Vector3(0,0,0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Example

Consider the following example to see how the above code works −

Basic Element Rotation

Explanation

The way we have used new BABYLON.Vector3(x,y,z) to position, the same way rotation can be applied too. Here,you can either use new BABYLON.Vector3(x,y,z) to apply rotation or you can use box.rotation.x,box.rotation.y,box.rotation.z.

To rotate, you have to give angles in radians. One degree is equal 0.01745329252 radians: 1° = π/180° = 0.01745329252 rad. For example, boxb.rotation = new BABYLON.Vector3(Math.PI/2,0.5,0);

babylonjs_basic_elements.htm
Advertisements