- BabylonJS Tutorial
- BabylonJS - Home
- BabylonJS - Introduction
- BabylonJS - Environment Setup
- BabylonJS - Overview
- BabylonJS - Basic Elements
- BabylonJS - Materials
- BabylonJS - Animations
- BabylonJS - Cameras
- BabylonJS - Lights
- BabylonJS - Parametric Shapes
- BabylonJS - Mesh
- VectorPosition and Rotation
- BabylonJS - Decals
- BabylonJS - Curve3
- BabylonJS - Dynamic Texture
- BabylonJS - Parallax Mapping
- BabylonJS - Lens Flares
- BabylonJS - Create ScreenShot
- BabylonJS - Reflection Probes
- Standard Rendering Pipeline
- BabylonJS - ShaderMaterial
- BabylonJS - Bones and Skeletons
- BabylonJS - Physics Engine
- BabylonJS - Playing Sounds & Music
- BabylonJS Useful Resources
- BabylonJS - Quick Guide
- BabylonJS - Useful Resources
- BabylonJS - Discussion
BabylonJS - Extrusion
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);