BabylonJS - Extrusion

Quiz

Extrusion helps in transforming a 2D shape into a volumic shape.Suppose you want to create a star with 2D you will have x,y co-ordinates and z will be 0.Taking the 2D co-ordinates extrusion will convert the same to a 3D shape.So, the start of 2D with extrusion will turn out to be a 3D.You can try different 2D shapes and convert those into 3D.

Syntax

BABYLON.Mesh.ExtrudeShape(name, shape, path, scale, rotation, cap, scene, updatable?, sideOrientation)

Parameters

Consider the following parameters for extrusion −

Name − The mesh name.
Shape − The shape to be extruded; it is an array of vectors.
Path − The path to extrude the shape.Array of vectors to draw the shape.
Scale − By default it is 1.Scale is the value to scale the initial shape.
Rotation − Rotate the shape at each path point.
Cap − BABYLON.Mesh.NO_CAP, BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL.
Scene − The current scene on which the mesh will be drawn.
Updatable − By default, it is false.If set true, the mesh will be updatable.
SideOrientation − The side orientation - front, back or double.

Demo using create lines

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -10));
            camera.attachControl(canvas, true);
            // lights
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.7;
            
            var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.8;

            // shape
            var shape = [
               new BABYLON.Vector3(2, 0, 0),
               new BABYLON.Vector3(2, 2, 0),
               new BABYLON.Vector3(1, 2, 0),
               new BABYLON.Vector3(0, 3, 0),
               new BABYLON.Vector3(-1, 2, 0),
               new BABYLON.Vector3(-2, 2, 0),
               new BABYLON.Vector3(-2, 0, 0),
               new BABYLON.Vector3(-2, -2, 0),
               new BABYLON.Vector3(-1, -2, 0),
               new BABYLON.Vector3(0, -3, 0),
               new BABYLON.Vector3(1, -2, 0),
               new BABYLON.Vector3(2, -2, 0),
            ];
            shape.push(shape[0]);

            var shapeline = BABYLON.Mesh.CreateLines("sl", shape, scene);
            shapeline.color = BABYLON.Color3.Green();  
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

In the above example, the lines are drawn in the x, y coordinates. Let us now apply 3D with the help of extrusion. For this, babylonjs has a class for extrusion which is explained below.

Demo to Apply Extrusion

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -10));
            camera.attachControl(canvas, true);
            // lights
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.7;
            
            var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.8;
            
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;

            // shape
            var shape = [
               new BABYLON.Vector3(2, 0, 0),
               new BABYLON.Vector3(2, 2, 0),
               new BABYLON.Vector3(1, 2, 0),
               new BABYLON.Vector3(0, 3, 0),
               new BABYLON.Vector3(-1, 2, 0),
               new BABYLON.Vector3(-2, 2, 0),
               new BABYLON.Vector3(-2, 0, 0),
               new BABYLON.Vector3(-2, -2, 0),
               new BABYLON.Vector3(-1, -2, 0),
               new BABYLON.Vector3(0, -3, 0),
               new BABYLON.Vector3(1, -2, 0),
               new BABYLON.Vector3(2, -2, 0),
            ];
            
            shape.push(shape[0]);
            var path = [ BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, -1) ];
            
            var shapeline = BABYLON.Mesh.CreateLines("sl", shape, scene);
            shapeline.color = BABYLON.Color3.Green();  
            
            var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 1, 0, 0, scene);

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

Output

Demo for Polygonmeshbuilder

For polygonmeshbuilder uses earcut structure and for that to work fine we need an additional file which can be taken from cdn (https://unpkg.com/earcut@2.1.1/dist/earcut.min.js) or npm package(https://github.com/mapbox/earcut#install)

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src="https://unpkg.com/earcut@2.1.1/dist/earcut.min.js"></script>
      <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, 0, 1);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/4, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
            light.intensity = 0.5;

            var corners = [ 
               new BABYLON.Vector2(4, 0),
               new BABYLON.Vector2(3, 1),
               new BABYLON.Vector2(2, 3),
               new BABYLON.Vector2(2, 4),
               new BABYLON.Vector2(1, 3),
               new BABYLON.Vector2(0, 3),
               new BABYLON.Vector2(-1, 3),
               new BABYLON.Vector2(-3, 4),
               new BABYLON.Vector2(-2, 2),
               new BABYLON.Vector2(-3, 0),
               new BABYLON.Vector2(-3, -2),
               new BABYLON.Vector2(-3, -3),
               new BABYLON.Vector2(-2, -2),
               new BABYLON.Vector2(0, -2),
               new BABYLON.Vector2(3, -2),
               new BABYLON.Vector2(3, -1),	
            ];

            var hole = [ 
               new BABYLON.Vector2(1, -1),
               new BABYLON.Vector2(1.5, 0),
               new BABYLON.Vector2(1.4, 1),
               new BABYLON.Vector2(0.5, 1.5)
            ] 

            var poly_tri = new BABYLON.PolygonMeshBuilder("polytri", corners, scene);
            poly_tri.addHole(hole);
            var polygon = poly_tri.build(null, 0.5);
            polygon.position.y = + 4;

            var poly_path = new BABYLON.Path2(2, 0);
            poly_path.addLineTo(5, 2);
            poly_path.addLineTo(1, 2);
            poly_path.addLineTo(-5, 5);
            poly_path.addLineTo(-3, 1);
            poly_path.addLineTo(-4, -4);
            poly_path.addArcTo(0, -2, 4, -4, 100);

            var poly_tri2 = new BABYLON.PolygonMeshBuilder("polytri2", poly_path, scene);
            poly_tri2.addHole(hole);
            
            var polygon2 = poly_tri2.build(false, 0.5); //updatable, extrusion depth - both optional
            polygon2.position.y = -4;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

Syntax

Following is the syntax for PolygonMeshBuilder −

var poly_tri2 = new BABYLON.PolygonMeshBuilder("polytri2", poly_path, scene);

babylonjs_parametric_shapes.htm

Print Page