Getting Started with Babylon.js
There are multiple ways to incorporate Babylon.js into your project, giving you flexibility based on your development environment and needs. You can include it via CDN for quick prototyping, install it using npm for modern development workflows, or download the files directly for offline use.
When importing Babylon.js in your code, you have two primary approaches: a modular approach where you selectively import only the specific components you need (recommended for production to minimize bundle size), or importing the entire library for a more convenient development experience when experimenting with different features. This flexibility allows you to optimize for either development speed or production performance.
You can quickly add Babylon.js to your project by including scripts from the Content Delivery Network:
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!-- Optional modules as needed -->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/materials/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>For modern JavaScript projects using build tools, you can install Babylon.js via npm:
npm install babylonjs babylonjs-loaders --saveImport the entire library for easier development experience:
With Babylon.js 7, the modular approach has been refined to improve loading performance and reduce bundle sizes. For development environments, using the global import provides convenience with access to all APIs without needing to add imports for each component.
// Import everything - larger bundle size but simpler development
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';Import only the specific components you need to minimize bundle size. This approach is recommended for production as it can significantly reduce final bundle size.
// Import only required components
import { Engine, Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder } from 'babylonjs';
import { SceneLoader } from 'babylonjs/Loading/sceneLoader';