- 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 - Mesh Morph Targets
We have already seen morhphing of lines, ribbon, polygon, etc. Now, we will see morphing of sphere and box in this demo.With morph targets, the shape of the sphere is changed which is seen in the demo below.
Syntax
var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene); var manager = new BABYLON.MorphTargetManager(); box.morphTargetManager = manager;
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 scrambleUp = function(data) { console.log(data); for (index = 0; index < data.length; index ++) { data[index] += 1.8 * Math.random(); } } var scrambleDown = function(data) { for (index = 0; index < data.length; index ++) { data[index] -= 1.8 * Math.random(); } } var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.ArcRotateCamera("camera1", 1.14, 1.13, 10, BABYLON.Vector3.Zero(), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); var materialSphere = new BABYLON.StandardMaterial("mat", scene); materialSphere.diffuseTexture = new BABYLON.Texture("images/sphere.jpg", scene); box.material = materialSphere; //var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene); var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene); box1.setEnabled(false); box1.updateMeshPositions(scrambleUp); var manager = new BABYLON.MorphTargetManager(); box.morphTargetManager = manager; var target0 = BABYLON.MorphTarget.FromMesh(box1, "sphere2", 0.25); manager.addTarget(target0); var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); sphere.position.x="10"; var materialSphere = new BABYLON.StandardMaterial("mat", scene); materialSphere.diffuseTexture = new BABYLON.Texture("sphere.jpg", scene); sphere.material = materialSphere; var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene); sphere2.setEnabled(false); sphere2.updateMeshPositions(scrambleUp); var manager1 = new BABYLON.MorphTargetManager(); sphere.morphTargetManager = manager1; var target2 = BABYLON.MorphTarget.FromMesh(sphere2, "sphere4", 0.25); manager1.addTarget(target2); 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 the sphere.jpg image. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.
images/sphere.jpg
Explanation
var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene); var manager = new BABYLON.MorphTargetManager(); box.morphTargetManager = manager;
The above code creates a box and adds it to the morphTargetManager. Consider the following example to understand this −
box.morphTargetManager = manager;
To create morph object, execute the following command and assign mesh to the morphTargetManager.
var manager = new BABYLON.MorphTargetManager();
Another box is created as shown below −
var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene); box1.setEnabled(false); box1.updateMeshPositions(scrambleUp); var manager = new BABYLON.MorphTargetManager(); box.morphTargetManager = manager; var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25); manager.addTarget(target0);
The box calls updateMeshPositions(scrambleUp); scrambleUp is a function which adds random numbers.
var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25); manager.addTarget(target0);
The above code creates morphtarget on box1 and adds influence to it -0.25.
Check the above demo in browsers to see results.
To Continue Learning Please Login
Login with Google