How to Create a Simple HTML Page in VSCode with Babylon.js for 3D Objects
Malik Stalbert, PhD
Creating a basic HTML page in VSCode is a great way to start learning web development. In this guide, I’ll show you how to create a simple two-page website using HTML, and on the second page, we’ll use Babylon.js to add a 3D sphere and a cube.
Prerequisites
Before we start, make sure you have:
VSCode installed (Download from: https://code.visualstudio.com/)
A basic understanding of HTML and JavaScript
A web browser (Chrome or Firefox recommended)
Step 1: Create a New Project Folder
Open VSCode.
Create a new folder for your project (e.g.,
simple-web-project).Open the folder in VSCode (
File > Open Folder).
Step 2: Create the First Page (index.html)
Inside your project folder, create a new file called
index.html.Open
index.htmland add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>
<h1>Welcome to My Simple HTML Page</h1>
<p>Click the link below to go to the 3D page.</p>
<a href="3d.html">Go to 3D Page</a>
</body>
</html>
Save the file.
Step 3: Create the Second Page (3d.html)
In the same folder, create another file called
3d.html.Open
3d.htmland add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Page with Babylon.js</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<h1>3D Objects with Babylon.js</h1>
<canvas id="renderCanvas" style="width: 100%; height: 500px;"></canvas>
<script>
// Get canvas element
var canvas = document.getElementById("renderCanvas");
// Create Babylon.js engine
var engine = new BABYLON.Engine(canvas, true);
// Create a scene
var scene = new BABYLON.Scene(engine);
// Create a camera
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// Create a light source
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Create a sphere
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
sphere.position.x = -1.5;
// Create a cube
var box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
box.position.x = 1.5;
// Render loop
engine.runRenderLoop(function () {
scene.render();
});
// Handle window resizing
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
Save the file.
Step 4: Run the Project
Open the
index.htmlfile in your browser by double-clicking it.Click the link to go to
3d.html.You should see a 3D scene with a sphere on the left and a cube on the right!
Final Thoughts
This project introduces you to basic HTML structure and how to integrate Babylon.js for 3D objects. You can experiment by adding more shapes, textures, and animations from here!
Breaking Down the Code: How Our HTML and JavaScript Work
If you followed our last tutorial on creating a simple HTML page with a 3D scene using Babylon.js, you might be wondering how everything works. In this post, we'll break down the code step by step and explain how the HTML and JavaScript function together. This guide is for absolute beginners, so no worries if you're just starting!
Understanding the Folder Structure
When working on a website, all the related files should be kept inside the same folder. In our project, we created a folder (e.g., simple-web-project) and added two files inside:
index.html– The main page with a simple link.3d.html– The second page that displays the 3D objects.
Both files must be in the same folder because the link in index.html points to 3d.html, and the browser needs to find it in the correct location.
Understanding index.html
This is the first page of our website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>
<h1>Welcome to My Simple HTML Page</h1>
<p>Click the link below to go to the 3D page.</p>
<a href="3d.html">Go to 3D Page</a>
</body>
</html>
How Does This Work?
The
<h1>tag creates a large heading.The
<p>tag creates a paragraph with a message.The
<a>tag creates a link to another page.The
href="3d.html"part tells the browser to open3d.htmlwhen clicked.Since
3d.htmlis in the same folder, no extra paths are needed.
Understanding 3d.html
This file creates the 3D scene using Babylon.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Page with Babylon.js</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<h1>3D Objects with Babylon.js</h1>
<canvas id="renderCanvas" style="width: 100%; height: 500px;"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
sphere.position.x = -1.5;
var box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
box.position.x = 1.5;
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
How Does This Work?
Canvas Setup:
The
<canvas>element withid="renderCanvas"is where the 3D scene is displayed.
JavaScript (Inside
<script>Tags):var canvas = document.getElementById("renderCanvas");This finds the
<canvas>element so we can draw on it.
var engine = new BABYLON.Engine(canvas, true);Creates a Babylon.js engine that will control the 3D scene.
var scene = new BABYLON.Scene(engine);Creates a new 3D scene.
`var camera = new BABYLON.ArcRotateCamera(...);
Adds a camera that lets you rotate around the scene.
`var light = new BABYLON.HemisphericLight(...);
Adds light to the scene so we can see objects.
`var sphere = BABYLON.MeshBuilder.CreateSphere(...);
Creates a sphere and positions it to the left.
`var box = BABYLON.MeshBuilder.CreateBox(...);
Creates a cube and positions it to the right.
engine.runRenderLoop(function () { scene.render(); });Runs the animation loop, continuously rendering the scene.
window.addEventListener("resize", function () { engine.resize(); });Ensures the 3D scene resizes properly if the window changes size.
Key Takeaways for Beginners
Both
index.htmland3d.htmlmust be in the same folder for links to work.The
<a>tag inindex.htmllinks to3d.html.Babylon.js is loaded from a CDN (Content Delivery Network), meaning you don’t need to download anything extra.
JavaScript inside
<script>tags controls the Babylon.js engine and renders 3D objects.The
canvaselement acts as the screen where 3D objects are displayed.The JavaScript file runs continuously in a loop to update the scene.
What’s Next?
Now that you understand how the files work, you can experiment by:
Changing the shapes or adding more objects.
Changing colors or adding textures.
Experimenting with camera angles.
This is just the beginning!