packages/public/@babylonjs/core/readme.md
Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it.
Any questions? Here is our official forum.
For the UMD bundled distribution, see the babylonjs package.
Babylon.js and its modules are published on npm as ES modules with full typing support. To install, use:
npm install @babylonjs/core
This will allow you to import Babylon.js entirely using:
import * as BABYLON from "@babylonjs/core/Legacy/legacy";
or individual classes to benefit from tree shaking:
import { Scene } from "@babylonjs/core/scene";
import { Engine } from "@babylonjs/core/Engines/engine";
To add a module, install the respective package. A list of extra packages and their installation instructions can be found on the @babylonjs scope on npm.
See our ES6 dedicated documentation:
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { CreateSphere } from "@babylonjs/core/Meshes/Builders/sphereBuilder";
import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";
// Side-effect import allowing the standard material to be used as default.
import "@babylonjs/core/Materials/standardMaterial";
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas);
const scene = new Scene(engine);
// This creates and positions a free camera (non-mesh)
const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(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)
const light = new HemisphericLight("light1", new 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
const sphere = CreateSphere("sphere1", { segments: 16, diameter: 2 }, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// Our built-in 'ground' shape
CreateGround("ground1", { width: 6, height: 6, subdivisions: 2 }, scene);
engine.runRenderLoop(() => {
scene.render();
});
Please see the contribution guidelines.
To get a complete list of supported features, please visit our website.
The @babylonjs/inspector package provides a diagnostic tool for understanding scene state and rendering. It includes a visual UI for humans and a CLI for AI agents. See the Inspector documentation for more details.