Starter Scene Code

The online Playground allows you to quickly experiment with a 3D scene using Babylon.js. All the code is written inside the createScene function which must return a scene. A scene, camera and light must always be present. Displaying the scene is all done by the Playground. No need to load or run the babylon.js Engine as this is all done for you, in the background.

Playground Example

In this playground a sphere and a ground have been created. Try changing the diameter of the sphere or the width of the ground. After any editing just select the run button ▶ to rebuild the scene.

Basic Playground


const createScene = function () {
// Creates a basic Babylon Scene object
const scene = new BABYLON.Scene(engine);
// Creates and positions a free camera
const camera = new BABYLON.FreeCamera("camera1",
new BABYLON.Vector3(0, 5, -10),
// Targets the camera to scene origin
// Attaches the camera to the canvas
camera.attachControl(canvas, true);
// Creates a light, aiming 0,1,0
const light = new BABYLON.HemisphericLight("light",
new BABYLON.Vector3(0, 1, 0),
// Dim the light a small amount 0 - 1
light.intensity = 0.7;
// Built-in 'sphere' shape.
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere",
{diameter: 2, segments: 32},
// Move sphere upward 1/2 its height
sphere.position.y = 1;
// Built-in 'ground' shape.
const ground = BABYLON.MeshBuilder.CreateGround("ground",
{width: 6, height: 6},
return scene;