Repository files navigation

Getting started? Play directly with the Babylon.js API using ourplayground. It also contains a lot of samples to learn how to use it.

Any questions? Here is our officialforum.

⚠️ WARNING: The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN.

• https://cdn.babylonjs.com/babylon.js
• https://cdn.babylonjs.com/babylon.max.js

For the preview release, use the following URLs:

• https://preview.babylonjs.com/babylon.js
• https://preview.babylonjs.com/babylon.max.js

A list of additional references can be foundhere.

BabylonJS and its modules are published on npm with full typing support. To install, use:

npm install babylonjs --save

alternatively, you can now rely on ourES6 packages. Using the ES6 version will allow tree shaking among other bundling benefits.

This will allow you to import BabylonJS entirely using:

import*asBABYLONfrom'babylonjs';

or individual classes using:

import{Scene,Engine}from'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to 'types' intsconfig.json:

..."types": ["babylonjs","anotherAwesomeDependency"    ],...

To add a module, install the respective package. A list of extra packages and their installation instructions can be found on thebabylonjs user on npm.

SeeGetting Started:

// Get the canvas DOM elementvarcanvas=document.getElementById('renderCanvas');// Load the 3D enginevarengine=newBABYLON.Engine(canvas,true,{preserveDrawingBuffer:true,stencil:true});// CreateScene function that creates and return the scenevarcreateScene=function(){// Create a basic BJS Scene objectvarscene=newBABYLON.Scene(engine);// Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}varcamera=newBABYLON.FreeCamera('camera1',newBABYLON.Vector3(0,5,-10),scene);// Target the camera to scene origincamera.setTarget(BABYLON.Vector3.Zero());// Attach the camera to the canvascamera.attachControl(canvas,false);// Create a basic light, aiming 0, 1, 0 - meaning, to the skyvarlight=newBABYLON.HemisphericLight('light1',newBABYLON.Vector3(0,1,0),scene);// Create a built-in "sphere" shape using the SphereBuildervarsphere=BABYLON.MeshBuilder.CreateSphere('sphere1',{segments:16,diameter:2,sideOrientation:BABYLON.Mesh.FRONTSIDE},scene);// Move the sphere upward 1/2 of its heightsphere.position.y=1;// Create a built-in "ground" shape;varground=BABYLON.MeshBuilder.CreateGround("ground1",{width:6,height:6,subdivisions:2,updatable:false},scene);// Return the created scenereturnscene;}// call the createScene functionvarscene=createScene();// run the render loopengine.runRenderLoop(function(){scene.render();});// the canvas/window resize event handlerwindow.addEventListener('resize',function(){engine.resize();});

If you want to contribute, please read ourcontribution guidelines first.

• Documentation
• Demos

• Official web site:www.babylonjs.com
• Onlineplayground to learn by experimentating
• Onlinesandbox where you can test your .babylon and glTF scenes with a simple drag'n'drop
• Onlineshader creation tool where you can learn how to create GLSL shaders
• 3DS Maxexporter can be used to generate a .babylon file from 3DS Max
• Mayaexporter can be used to generate a .babylon file from Maya
• Blenderexporter can be used to generate a .babylon file from Blender 3d
• Unity 5 (deprecated) exporter can be used to export your geometries from Unity 5 scene editor(animations are supported)
• glTF Tools by KhronosGroup

To get a complete list of supported features, please visit ourwebsite.