Blender to Babylon.js exporter

The Blender export plugin can be found on github repository. We assume your using the last version.

Note that v6 is for Blender 2.8 (currently in beta), v5 for Blender 2.79b or below can be found in the deprecated folder.


This add-on use the standard Blender installation procedure:

  • Download the last version from github (click on the zip file with the appropriate exporter version you'd like to download: and then hit the "Download" button).
  • In Blender, go to File menu > User Preferences.
  • Switch to the Add-ons tab.
  • (optional) If you already have an old version installed, search for Babylon.js into the filter, expand infos ofBabylon.js add-on and click Remove button.
  • Click the Install from File... button at the bottom.
  • Select the zip file and click the Install Add-on from File... button.
  • Check the box to enable it.
  • Click Save User Settings to enable it at every Blender launch.

blender user preferences



Blender scene properties panel

BlenderBJS equivalent
Scene scene
  • Camera: set scene activeCamera
Exporter panelexporter-scene-options
  • Export:
    • All: all the file will be exported
    • Selected: only selection will be exported
    • Layers: hidden layers will not be exported
  • Max Decimal Precision: how values are rounded during export


Blender world properties panel

Blender Render

BlenderBJS equivalent
World world-br
  • Horizon Color: scene clearColor
  • Ambient Color: scene ambientColor
Exporter panel mist
  • Mist: when Blender Render Mist is enabled, you have access to Fog Mode & Fog Density parameters


Blender object properties panel

BlenderBJS equivalent
BJS equivalent
  • object name will be exported as it is
Transform transform
BJS equivalent
  • Position
  • Rotation
    • XYZ Euler
    • Quaternion
  • Scale
    • do not forget to apply Scale before exporting: 'Ctrl' + 'A' > 'Scale'
Relations relations
BJS equivalent
  • parenting is supported


Blender constraints properties panel

BlenderBJS equivalent
BJS equivalent
  • Track To: useful when using ArcRotate camera (tip)


Blender cameras properties panel

BlenderBJS equivalent
  • Field of View: fov
  • Clipping: minZ & maxZ
Exporter panel exporter-cameras-options
  • Camera Type, choose between:
    • Arc Rotate (tip)
    • Device Orientation
    • Follow
    • Gamepad
    • Touch
    • Universal
    • Virtual Joysticks
    • VR Dev Orientation Free
    • Web VR Free


Blender lights properties panel

BlenderBJS equivalent
Lamp lamp
  • Sun as Directional, Area as Point, other named like in BJS
  • This Layer Only: includedOnlyMeshes
  • when Sphere is checked, Distance value is exported as range
Spot Shape (only available when light type is Spot) spot-shape
  • Size: Angle
  • Blend: value * 2 = exponent
Exporter panel exporter-lights-options
  • Shadow Map (only for directional lights):
    • None
    • Standard
    • Poisson
    • ESM
    • Blur ESM


Blender meshes properties panel

BlenderBJS equivalent
Normals normals
Auto Smooth is often use by Blender users, but is not supported. Use an edge split modifier instead, see tip.
UV Maps uv-maps
  • UVMap: coordinatesIndex
  • limited to 2 channels
Vertex Colors vertex-colors
  • if multiples layers exist, they will be merge
Exporter panel exporter-meshes-options
  • Tags: allow using scene.getMeshesByTags()
  • Materials:
    • Name Space: automatically add a suffix to the mesh materials. Default is Blender filename.
  • Procedural Textures / Cycles Baking: texture baking settings when using procedural textures (Blender Render) or Cycles


Blender materials properties panel


  • as you can notice in BJS mesh panel, materials will be suffixed by .babylon filename,
  • other options can be found on this mesh panel, like max simultaneous lights, texture size for baking, etc,
  • texture baking will be automatic when:
    • cycles render is the current render engine,
    • procedural textures are used.

Blender Render on Babylon.js

BlenderBJS equivalent
  • multi-materials are supported
Diffuse diffuse
  • color intensity is multiplied by intensity value
Specular specular
  • color intensity is multiplied by intensity value
  • Hardness: specularPower
Shading shading
  • Emit: diffuse color * value
  • Ambient: diffuse color * value
Transparency transparency
  • when enabled, set alpha value under Z Transparency
  • you can temporary switch to Blender Game to gain access to some materials settings:


BlenderBJS equivalent
Game Settings game-settings
  • Backface culling: true by default
  • Face Orientation:
    • Normal
    • Billboard

Cycles Render

BlenderBJS equivalent
Node Editor cycles node
BJS equivalent
Exporter will do automatic baking, and try to detect some nodes:
  • Diffuse BSDF
  • Ambient Occlusion


Blender textures properties panel


  • Blender can handle packed images, even if their isn't source file on disk, but you have to unpack all before export,
  • about automatic baking, see Materials.

Blender Render

BlenderBJS equivalent
BJS equivalent
  • multiple textures can be assigned
    • if two textures are assigned to the same Influence (see below), automatic baking will be used
  • this name is only used in Blender
Texture Type type-image
BJS equivalent
  • as seen above, this name is only used in Blender
  • texture type:
    • for image file, choose Image or Movie
    • for procedural textures, choose any one but voxel data, point density, ocean
Image image
BJS equivalent
  • texture filename will be texture name in BJS
Image Sampling image-sampling
BJS equivalent
  • Use Alpha: hasAlpha
Image Mapping image-mapping
BJS equivalent
  • Extension: choosing Clip will set Wrap value to 0
Mapping mapping
BJS equivalent
Influence influence
BJS equivalent
Be sure to enable only one influence by texture, to avoid automatic baking.

Commons & Good practices

  • you should export one .babylon file per animated object to make your life easier (once in BJS, but also to handle the timeline in Blender). See tip for a basic workflow.
  • be sure, before starting animation in Blender, that your objects have their transformations applied! (3DView > Object > Apply)

Classic Animations

You will find an example on this .zip archive. 3D sources files are on sources folder, BJS app is on BJS folder.

In sources, we have our master scene, with only static objects (on the layer 1), and just for us to see it, we have the logo linked on the layer 6. When exporting, take care to have only layer 1 active, as we have checked in the scene panel Export only selected layers.

Once exported, you can see in BJS/index.html that we create our main scene using this .babylon: line 36

BABYLON.SceneLoader.Load("", "01.master-static-scene.babylon", engine, function (scene) { });

Same way for out animated object in sources/02.classic-animation.blend: layer 1 is for our object, layer 6 is just for us to see the main scene in our .blend. Export only selected layers is used to help us exporting only the first layer to babylon.

Once exported, we can import our meshes inside the onSuccess of our Loader above. Check on BJS/index.html, line 64:

BABYLON.SceneLoader.ImportMesh("", "", "02.classic-animation.babylon", scene, function (importedMeshes){ });

Now, you already have a basic scene with animations autoplaying in it.


  • you can use any Blender rotation mode you want, the animation will be kind of baked during the export

Try it out

Once your scene is exported, you have multiple solutions to test it:


Simple scene

Let's say you have exported your first scene. In this example we will use blend files of the BJS logo:

  • export the babylon into a folder
  • create a file named index.html, and copy the code above:
<!DOCTYPE html>
<title>Default .babylon loading scene</title>
<meta charset="UTF-8" />
<!-- this link to the preview online version of BJS -->
<script src=""></script>
<!-- this is needed for BJS to load scene files -->
<script src=""></script>
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: white;
#canvas {
width: 100%;
height: 100%;
touch-action: none;
<canvas id="canvas"></canvas>
<script type="text/javascript">
const canvas = document.getElementById("canvas");
const engine = new BABYLON.Engine(canvas, true);
// here the doc for Load function: //
BABYLON.SceneLoader.Load("", "babylonJS_logo_v3.babylon", engine, function (scene) {
//as this .babylon example hasn't camera in it, we have to create one
const camera = new BABYLON.ArcRotateCamera("Camera", 1, 1, 4, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
scene.ambientColor = new BABYLON.Color3.White();
engine.runRenderLoop(function () {
window.addEventListener("resize", function () {

babylon default folder example

  • double-click on the index.html file... profit!
    • some browsers may not want loading the scene, for some security issues (e.g.: Chrome). In this case, you have to open the html file through a webserver (local or not), or try into another browser (e.g.: Firefox, Edge).

blender babylon scene loaded in BJS

Animated object