BabylonJS - Box

In this section, we will learn how to add box to the scene we created.

To create box, following is the syntax.

Syntax

var box = BABYLON.Mesh.CreateBox("box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

Parameters

The following are the different parameters to add box −

Name − The Name to be given to the box; for example, “box”.
Size of the box − The size of the box.
Scene − The scene is where the box will be attached.
Boolean value − False is the default value.
BABYLON.Mesh.DEFAULTSIDE − This is used for orientation.

The last 2 parameters are optional.

Demo - Box

<!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);
            camera.attachControl(canvas, true);
         
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
         
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
         
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);	
            scene.registerBeforeRender(function() { 
               pl.position = camera.position;
            });

            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

Upon execution, the above code will generate the following output −

Size refers to the height of the box on all sides. A size of 100 will basically be a box occupying full screen. The color given to the background scene is green. We are using the camera and light effect to move the screen onmouse cursor. This helps in the light effect too.

babylonjs_basic_elements.htm