BabylonJS - Import Mesh

In this section, we will learn how to import mesh using Babylon −

Using Blender

Blender is an open source software. You can download same from their official site www.blender.org.

Here is the screenshot of the download section: Screenshot Blender Website

Download the software as per your operatingsystem. Install the software and follow the steps given below to create the mesh in blender.

Consider the steps shown below to work with Blender −

Step 1 − First we need to install the plugin for convertingblender to babylonjs. We can get the plugin from Blender2Babylon-X.X.zip. In Expoters/Blender copy the io_export_babylon.py or _init_.py file and paste it in Blenders Addons directory as shown below.

Installing the exporter into Blender

Follow these steps to install the exporter into Blender −

Step 1 − Open the Blender software and from the file, choose userpreferences. Now, go to the Addons Tab.

At the bottom, you will see the Install from File icon.

Step 2 − Choose the file from the Babylon directory, i.e., the zip downloaded in step 1. Take the file io_export_babylon.py or __init_.py and click on Install from file option on right side.

Step 3 − After Installation, you will get Import-Export: Babylon.js option. Click the checkbox and the Save User Settings.

Now you can export any blender file to .babylon.

Step 4 − Choose the blender file that you want to be export to babylonjs. Incase you don’thave any blender files you can get the same from www.blender.org

Step 5 − Open the blender file.

If you want, you can add the changes if any and export as shown below.

Demo

From the blender, export the file and store it in scenes/ folder locally as buggy2.1.babylon. It is a json file which has all the positions and necessary details to create the mesh. In the code given below, we have used the file exported from blender.

<!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(1, 1, 1);
            
            //Adding a light
            var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "buggy2.1.babylon", scene, function (newMeshes) {
               var buggy2 = newMeshes[0];
               camera.target = buggy2;

               var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
               var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 300, height:15}, scene);
               ground.material = decalMaterial;	
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code will generate the following output −

Explanation

To import the mesh created by you, execute the following line of code −

BABYLON.SceneLoader.ImportMesh("", "scenes/", "buggy2.1.babylon", scene, function (newMeshes) {})

Import mesh takes the .babylon files stored from the folder and allows access to the properties of mesh thedetails of which are available in newMeshes.

babylonjs_mesh.htm