babylonjs Archives - Page 2 of 2 - Donotsad where can learn any thing work project and make money

Aug 10

BabylonJS – Environment Setup

BabylonJS – Environment Setup ”; Previous Next In this chapter, we will learn how to set up the environment for BabylonJS. To start with the setup, visit the official website of Babylon.js − www.babylonjs.com. Go to the download section and choose the latest version of Babylon.js and store in your folder. The screenshot for the same is as follows − You can also go to GITHUB and clone the babylonjs project − Babylon.js In your command line type − git clone https://github.com/BabylonJS/Babylon.js.git go to cd BabylonJS/ npm install The required files will be available in the BabylonJS folder. You can use the VSCode (Microsoft Visual Studio Code) for editing.The code comes with builtin functionalities like highlighting if any error, hightlighting the syntax, etc. You can use the editor of your choice and it is not mandatory to use only VSCode. Print Page Previous Next Advertisements ”;

Aug 10

BabylonJS – Mesh

BabylonJS – Mesh ”; Previous Next In this chapter, we will learn to create different shapes using the mesh builder. We have already learnt how to create shapes in one of our previous chapters. The difference is that with meshbuilder gives you the flexibility to add color, images to the shapes. CreateBox using MeshBuilder Let us now see how to create box using MeshBuilder. 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, 0, 1); 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 mat = new BABYLON.StandardMaterial(“mat1”, scene); mat.alpha = 1.0; mat.diffuseColor = new BABYLON.Color3(0, 1, 0); var texture = new BABYLON.Texture(“images/cube.png”, scene); mat.diffuseTexture = texture; var hSpriteNb = 3; // 3 sprites per raw var vSpriteNb = 2; // 2 sprite raws var faceUV = new Array(6); for (var i = 0; i < 6; i++) { faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb); } var options = { width: 1.5, height: 1.5, depth: 1.5, faceUV: faceUV }; var box = BABYLON.MeshBuilder.CreateBox(“box”, options, scene); box.material = mat; scene.registerBeforeRender(function() { pl.position = camera.position; }); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html> Output The above line of code generates the following output − For the above example, we have used a sprite image as shown below. It has horizontally 3 Colums and vertically 2 rows. In this demo, we have used an image called cube.png. The images are stored in images/ folder locally and are also pasted below for reference. Please note cube.png is a sprite image, a sprite image is a collection of images. We wanted to show the image on a cube so wanted all the sides of the cube together. You can also download similar sprite images of your choice and use in the demo link. The createBox builder gives you options for the sizes. For example, var box = BABYLON.MeshBuilder.CreateBox(“box”, options, scene); Demo var hSpriteNb = 3; // 3 sprites per raw ie colums horizontally as shown in the image var vSpriteNb = 2; // 2 sprite raws as shown in the image above. var faceUV = new Array(6); // the cube has 6 sides so creating array for same. for (var i = 0; i < 6; i++) { faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb); } var options = { width: 1.5, height: 1.5, depth: 1.5, faceUV: faceUV }; This is called applying textures to the meshbuilder using the createBox method.We have used the image cube.png which has horizontally 3 colums and vertically 2 rows.The cube or box has 6 sides. To apply textures we are using the options parameter.For example, Var box = BABYLON.MeshBuilder.CreateBox (”box”, options, scene); We have defined an array called faceUV with size as 6 which are the sides of the cube. This array will always have Vector4 elements. Each Vector4(x, y, z, w) will be defined as follows − x = Ubottom y = Vbottom z = Utop w = Vtop The vectorsare in the range [0, 1]. Ubottom and Vbottom are the 2D coordinates of the bottom left point of where the texture crop starts. Utop, Vtop are the top right points where the texture crop ends. var hSpriteNb = 3; // 3 sprites per raw var vSpriteNb = 2; // 2 sprite raws var faceUV = new Array(6); for (var i = 0; i < 6; i++) { faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb); } Suppose the default texture, i.e., the image given is applied to all the faces of the box. If you want to change only 1 face or 1 side of the box, you can directly assign the values as shown below − var hSpriteNb = 3; // 3 sprites per raw var vSpriteNb = 2; // 2 sprite raws var faceUV = new Array(6); faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb); Example <!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, 0, 1); 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 mat = new BABYLON.StandardMaterial(“mat1”, scene); mat.alpha = 1.0; mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8); var texture = new BABYLON.Texture(“images/3d.png”, scene); mat.diffuseTexture = texture; var hSpriteNb = 3; // 3 sprites per raw var vSpriteNb = 2; // 2 sprite raws var faceUV = new Array(6); faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb); var options = { width:3, height:3, depth: 3, faceUV:faceUV }; var box = BABYLON.MeshBuilder.CreateBox(“box”, options, scene); box.material = mat; scene.registerBeforeRender(function() { pl.position = camera.position; }); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html> Output The above line of code generates the following output − In this demo, we have used an image called 3d.png. The images are stored in images/ folder locally and are also pasted below for reference. Please note 3d.png is a sprite image; a sprite image is a collection of images. We wanted to show the image on a cube with all the sides of

Aug 10

BabylonJS – Cameras

BabylonJS – Cameras ”; Previous Next BabylonJS has many cameras that can be used. At a time, only one camera will be active for a scene. In this chapter, we will learn how to go about using cameras in BabylonJS. FreeCamera Let us now see how the FreeCamera works. Syntax Following is the syntax for the FreeCamera − var camera = new BABYLON.FreeCamera(“FreeCamera”, new BABYLON.Vector3(0, 1, -15), scene); This is the position in which the camera is placed – new BABYLON.Vector3(0, 1, -15). Changing the direction will change the direction. You can change the values and see how the camera behaves on the scene. Following are the parameters used by the FreeCamera − Name Position Scene ArcRotateCamera This camera rotates around a given target pivot. It can be controlled with cursors and mouse, or with touch events. Parameters are name, alpha, beta, radius and target. Syntax var camera = new BABYLON.ArcRotateCamera(“ArcRotateCamera”, 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); ArcRotateCamera points in the +x direction. To change the position of the camera, use the setPosition property. camera.setPosition(new BABYLON.Vector3(0, 0, -100)); The ArcRotateCamera is an excellent camera to animate. The following command will help you rotate the camera around the target − scene.activeCamera.alpha += .01; TouchCamera Touch is a type of a”gesture”. It can be on a pad or screen, with finger(s), stylus, glove, feet, or laser pointer. Any movement that can be sensed… can be considered a gesture. Syntax Following is the syntax for TouchCamera − var camera = new BABYLON.TouchCamera(“TouchCamera”, new BABYLON.Vector3(0, 1, -15), scene); GamepadCamera This camera is specially designed to be used with gamepad. Syntax Following is the syntax for the Gamepad Camera − var camera = new BABYLON.GamepadCamera(“Camera”, new BABYLON.Vector3(0, 15, -45), scene); DeviceOrientationCamera This camera is specially designed to react to device orientation events cases like when you tilt your device forward or backward, left or right, etc. Syntax var camera = new BABYLON.DeviceOrientationCamera(“DevOr_camera”, new BABYLON.Vector3(0, 1, -15), scene); FollowCamera FollowCamera is designed to follow any scene item with a position. It can follow from rear, front or from any angle. Syntax Following is the syntax for the FollowCamera − var camera = new BABYLON.FollowCamera(“FollowCam”, new BABYLON.Vector3(0, 15, -45), scene); VirtualJoysticksCamera This camera is designed to react to Virtual Joystick events. The Virtual Joysticks are on-screen 2D graphics that are used to control cameras or other scene items. Syntax Following is the syntax for the VirtualJoysticksCamera − var camera = new BABYLON.VirtualJoysticksCamera(“VJ_camera”, new BABYLON.Vector3(0, 1, -15), scene); AnaglyphCamera The AnaglyphCamera is for use with red and cyan 3D glasses. It uses post-processing filtering techniques. AnaglyphArcRotateCamera Following is the syntax for the AnaglyphArcRotateCamera − var camera = new BABYLON.AnaglyphArcRotateCamera(“aar_cam”, -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene); AnaglyphFreeCamera Following is the syntax for the AnaglyphFreeCamera − var camera = new BABYLON.AnaglyphFreeCamera(“af_cam”, new BABYLON.Vector3(0, 1, -15), 0.033, scene); VRDeviceOrientationFreeCamera The VRDeviceOrientationFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our VRDeviceOrientationFreeCamera. Syntax Following is the syntax for the VRDeviceOrientationFreeCamera − var camera = new BABYLON.VRDeviceOrientationFreeCamera (“Camera”, new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0); WebVRFreeCamera The WebVRFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our WebVRFreeCamera. Syntax Following is the syntax for the WebVRFreeCamera − var camera = new BABYLON.WebVRFreeCamera(“WVR”, new BABYLON.Vector3(0, 1, -15), scene); In most of the demos, you will see attachControl where the camera is attached to the canvas. Example camera.attachControl(canvas, true); Print Page Previous Next Advertisements ”;

Aug 10

BabylonJS – Home

BabylonJS Tutorial PDF Version Quick Guide Resources Job Search Discussion BabylonJS is a javascript framework for building 3D games with HTML5 and WEBGL.It is anopen source framework and is hosted on github.The official website of BabylonJS is www.babylonjs.com. Audience This tutorial is designed for software programmers who want to learn the basics of BabylonJS and its programming concepts in simple and easy ways. This tutorial will give you enough understanding on various functionalities of BabylonJS with suitable examples. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM). Print Page Previous Next Advertisements ”;

Aug 10

BabylonJS – Introduction

BabylonJS – Introduction ”; Previous Next Babylon.js is a javascript open-source framework which is used to develop 3D applications/ video games for the web. The official website of BabylonJS is www.babylonjs.com. Using Babylon.js framework is easy for the users. It contains all the required tools to create and manage 3D objects, special effects, and sounds, etc. Babylon.js is one of the most popular 3D game engines and is widely used by developers. Being a 3D library, it provides built-in functions. These functions help you implement common 3D functionality with efficient and accurate ways. It is developed using TypeScript language based on WebGL and javascript. What is WebGL? WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web. It is designed for the purpose of rendering 2D graphics and interactive 3D graphics. It is derived from OpenGL”s ES 2.0 library which is a low-level 3D API for phones and other mobile devices. WebGL provides similar functionality of ES 2.0 (Embedded Systems) and performs well on modern 3D graphics hardware. The TypeScript By definition, “TypeScript is JavaScript for application-scale development.” TypeScript is a strongly typed, object oriented, compiled language. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features. The goal of TypeScript language is to improve and secure the production of JavaScript code.Since BabylonJS is developed using TypScript, it is robust and secure. Print Page Previous Next Advertisements ”;

Aug 10

BabylonJS – Materials

BabylonJS – Materials ”; Previous Next Materials are like clothes for the objects. You can add color, texture and wrap your meshes with it. You can use the same material to cover many meshes. Meshes can be the scene which we just saw in the example in the previous for chapter – the plane passing through the sky. In this chapter, we will learn how to add color, texture, reflection for the meshes in this chapter. We will add material to the already created scene. We will progress by adding material to all the shapes we created. Let us consider a few examples to see how the addition of material works. Syntax var materialforshapes = new BABYLON.StandardMaterial(“texture1”, scene); The above material will not change anything since it is the default one. We will use the available properties to make the objects look more appealing. The available properties are as follows − Transparency Diffuse Emissive Ambient Specular Back-Face Culling WireFrame Take a look how these properties applied on the material changes the look and feel of the mesh. Basic Material Property – FresnelParameters Fresnel is the new thing added by BabylonJS on standardmaterial. It allows to change the color applied on the shapes. You can get glass like reflection by using the simple Fresnel. The Fresnel will let you have more reflection on edges and not all on the center. Following properties are available for Fresnel StandardMaterial.diffuseFresnelParameters StandardMaterial.opacityFresnelParameters StandardMaterial.reflectionFresnelParameters StandardMaterial.emissiveFresnelParameters StandardMaterial.refractionFresnelParameters 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); var camera = new BABYLON.ArcRotateCamera(“camera1”, 0, 0, 10, BABYLON.Vector3.Zero(), scene); camera.setPosition(new BABYLON.Vector3(0, 5, -10)); camera.attachControl(canvas); camera.upperBetaLimit = Math.PI / 2; camera.lowerRadiusLimit = 4; var light = new BABYLON.HemisphericLight(“light1”, new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.7; var knot = BABYLON.Mesh.CreateTorusKnot(“knot”, 1, 0.4, 128, 64, 2, 3, scene); var yellowSphere = BABYLON.Mesh.CreateSphere(“yellowSphere”, 16, 1.5, scene); yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0)); var yellowMaterial = new BABYLON.StandardMaterial(“yellowMaterial”, scene); yellowMaterial.diffuseColor = BABYLON.Color3.Yellow(); yellowSphere.material = yellowMaterial; // Ground var ground = BABYLON.Mesh.CreateBox(“Mirror”, 1.0, scene); ground.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0); ground.material = new BABYLON.StandardMaterial(“ground”, scene); ground.material.diffuseTexture = new BABYLON.Texture(“images/rainbow.png”, scene); ground.material.diffuseTexture.uScale = 10; ground.material.diffuseTexture.vScale = 10; ground.position = new BABYLON.Vector3(0, -2, 0); // Main material var mainMaterial = new BABYLON.StandardMaterial(“main”, scene); knot.material = mainMaterial; var probe = new BABYLON.ReflectionProbe(“main”, 512, scene); probe.renderList.push(yellowSphere); probe.renderList.push(ground); mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5); mainMaterial.refractionTexture = probe.cubeTexture; mainMaterial.refractionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>(); mainMaterial.refractionFresnel<h3>Parameters</h3>.bias = 0.5; mainMaterial.refractionFresnel<h3>Parameters</h3>.power = 16; mainMaterial.refractionFresnel<h3>Parameters</h3>.leftColor = BABYLON.Color3.Black(); mainMaterial.refractionFresnel<h3>Parameters</h3>.rightColor = BABYLON.Color3.White(); mainMaterial.indexOfRefraction = 1.05; // Fog scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR; scene.fogColor = scene.clearColor; scene.fogStart = 20.0; scene.fogEnd = 50.0; // Animations scene.registerBeforeRender(function () { yellowSphere.rotation.y += 0.01; // greenSphere.rotation.y += 0.01; }); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html> Output The above line of code generates the following output − Explanation Following code applies the Fresnel effect. The colors left and right are applied to the edges of the meshes. mainMaterial.refractionFresnelParameters = new BABYLON.FresnelParameters(); mainMaterial.refractionFresnelParameters.bias = 0.5; mainMaterial.refractionFresnelParameters.power = 16; mainMaterial.refractionFresnelParameters.leftColor = BABYLON.Color3.Black(); mainMaterial.refractionFresnelParameters.rightColor = BABYLON.Color3.White(); Bias and power property control the Fresnel effect on the surface. In this demo, we have used an image called rainbow.png. The images are stored in images/ folder locally. You can download any image of your choice and use in the demo link. Print Page Previous Next Advertisements ”;

Aug 10

BabylonJS – Animations

BabylonJS – Animations ”; Previous Next Animation makes a scene more interactive and also makes it impressive giving realistic look to it. Let us now understand animation in detail. We will apply animation on shapes to move it from one position to another. To use animation, you need to create an object on animation with the required parameters. Let us now see the syntax for the same − var animationBox = new BABYLON.Animation( “myAnimation”, “scaling.x”, 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE ); Parameters Consider the following parameters related to Animations with BabylonJS − Name of the animation. Property of the shape – for example, scaling, changing position, etc. Scaling is what is shown in the syntax; here, it will scale the box along the x-axis. Frames per second requested: highest FPS possible in this animation. Here you decide and enter what kind of value will be modified: is it a float (e.g. a translation), a vector (e.g. a direction), or a quaternion. Exact values are − BABYLON.Animation.ANIMATIONTYPE_FLOAT BABYLON.Animation.ANIMATIONTYPE_VECTOR2 BABYLON.Animation.ANIMATIONTYPE_VECTOR3 BABYLON.Animation.ANIMATIONTYPE_QUATERNION BABYLON.Animation.ANIMATIONTYPE_COLOR3 Behaviour for animation – to stop or to start the animation again. Use previous values and increment it − BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE Restart from initial value − BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE Keep their final value BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT Let us now create the animation object − var animationBox = new BABYLON.Animation( “myAnimation”, “scaling.x”, 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE ); Demo for Animation <!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); box.position = new BABYLON.Vector3(-10,0,0); var box1 = BABYLON.Mesh.CreateBox(“box1″, ”3”, scene); box1.position = new BABYLON.Vector3(0,0,0); var animationBox = new BABYLON.Animation(“myAnimation”, “scaling.x”, 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var animationBox1 = new BABYLON.Animation(“myAnimation1”, “scaling.z”, 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // An array with all animation keys var keys = []; //At the animation key 0, the value of scaling is “1” keys.push({ frame: 0, value: 1 }); //At the animation key 20, the value of scaling is “0.2” keys.push({ frame: 20, value: 0.2 }); keys.push({ frame: 60, value: 0.4 }); //At the animation key 100, the value of scaling is “1” keys.push({ frame: 100, value: 1 }); animationBox.setKeys(keys); box.animations = []; box.animations.push(animationBox); scene.beginAnimation(box, 0, 100, true); // An array with all animation keys var keys = []; //At the animation key 0, the value of scaling is “1” keys.push({ frame: 0, value: 1 }); //At the animation key 20, the value of scaling is “0.2” keys.push({ frame: 60, value: 0.2 }); //At the animation key 100, the value of scaling is “1” keys.push({ frame: 100, value: 1 }); animationBox1.setKeys(keys); box1.animations = []; box1.animations.push(animationBox1); scene.beginAnimation(box1, 0, 100, true); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html> Output // An array with all animation keys var keys = []; //At the animation key 0, the value of scaling is “1” keys.push({ frame: 0, value: 1 }); //At the animation key 20, the value of scaling is “0.2” keys.push({ frame: 20, value: 0.2 }); //At the animation key 100, the value of scaling is “1” keys.push({ frame: 100, value: 1 }); animationBox.setKeys(keys); box.animations = []; box.animations.push(animationBox); scene.beginAnimation(box, 0, 100, true); //defines the start and the end on the target shape box. Following are the other functions available on animation object − pause() restart() stop() reset() We can store the beginAnimation reference in a variable and use the reference to stop, pause or reset animation. var newAnimation = scene.beginAnimation(box1, 0, 100, true); For example, newAnimation.pause(); There are functions available on animation object to control the keyframes. BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) { return startValue + (endValue – startValue) * gradient; }; BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) { return BABYLON.Quaternion.Slerp(startValue, endValue, gradient); }; BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) { return BABYLON.Vector3.Lerp(startValue, endValue, gradient); }; Here is the list of functions that you can change − floatInterpolateFunction quaternionInterpolateFunction quaternionInterpolateFunctionWithTangents vector3InterpolateFunction vector3InterpolateFunctionWithTangents vector2InterpolateFunction vector2InterpolateFunctionWithTangents sizeInterpolateFunction color3InterpolateFunction matrixInterpolateFunction To create a quick animation, there is a function available which can be used directly. For example, Animation.CreateAndStartAnimation = function(name, mesh, tartgetProperty, framePerSecond, totalFrame, from, to, loopMode); Here you can use only 2 keyframes – start and end. 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); 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); box.position = new BABYLON.Vector3(0,0,0); BABYLON.Animation.CreateAndStartAnimation(”boxscale”, box, ”scaling.x”, 30, 120, 1.0, 1.5); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html> Output Animation Blending You can achieve animation blending with the help of enableBlending = true; This blended animation will change from the current object state. Easing Functions To make the animation more impressive, there are some easing functions which we have already used with css earlier. Following is a list of easing functions − BABYLON.CircleEase () BABYLON.BackEase (amplitude) BABYLON.BounceEase (bounces, bounciness) BABYLON.CubicEase () BABYLON.ElasticEase (oscillations, springiness) BABYLON.ExponentialEase (exponent) BABYLON.PowerEase (power) BABYLON.QuadraticEase () BABYLON.QuarticEase () BABYLON.QuinticEase () BABYLON.SineEase () Demo <!doctype html> <html> <head> <meta charset = “utf-8”>