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. There is 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 mesh 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

Description

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