Getting Started - Chapter 1 - First Web App

You will have seen that the template needed for any code on the playground is

var createScene = function() {
var scene = new BABYLON.Scene(engine);
// Add a camera to the scene and attach it to the canvas
// Add a lights to the scene
//Your Code
return scene;

By following this format in you own project you can quickly drop it into your own HTML page using the following as a template.

<!DOCTYPE html>
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon Template</title>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
<script src=""></script>
<script src=""></script>
<script src=""></script>
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
// Add your code here matching the playground format
const scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {

This line

<script src=""></script>

allows you to import models into your scene.

This line

<script src=""></script>

allows you to use a touch screen.


The following loads models into an app.

First App

Given just a box is rather uninteresting and creating the app just using all Babylon.js code is as simple

First Coded App

let's move on to learning more about using Babylon.js code and build more interesting models. We start with giving our world a ground to build on.