SLIDEFACTORY - Web 3D Part 1: Creating Web 3D Scenes With Babylon.Js

Web 3D:

Web 3D is an exciting technology that can add depth and interactivity to your website. One of the most popular libraries for creating web3D scenes is Babylon.js. In this tutorial, we’ll be using Babylon.js to create a simple web 3D scene for a website.

Prerequisites:

Before we begin, you should have some basic knowledge of HTML, CSS, and JavaScript. You will also need to have a code editor installed on your computer. I recommend using Visual Studio Code, as it has great support for JavaScript and TypeScript.

Getting Started:

The first step is to create a new HTML file and add the necessary code to load Babylon.js. You can download Babylon.js from the official website, or you can use a CDN.

<!DOCTYPE html>
<html>
  <head>
    <title>Web 3D Scene</title>
    <meta charset="utf-8" />
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>
    <script src="index.js"></script>
  </body>
</html>

Web 3D Scene

In the above code, we have included the Babylon.js library and its loaders. We have also added some CSS to make the canvas fill the entire screen.

Creating The Scene:

The next step is to create the 3D scene. We’ll do this in a separate JavaScript file, which we’ll call index.js. Here’s the basic structure of our scene:

// Get the canvas element from the HTML file
var canvas = document.getElementById("renderCanvas");

// Create the Babylon.js engine
var engine = new BABYLON.Engine(canvas, true);

// Create the scene
var scene = new BABYLON.Scene(engine);

// Create the camera
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5,-10), scene);

// Create the light
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

// Create the ground
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

// Start the engine
engine.runRenderLoop(function () {
scene.render();
});

In the above code, we first get the canvas element from the HTML file. We then create the Babylon.js engine, which will be responsible for rendering our scene. We also create a new scene object.
Next, we create a camera object and a light object. The camera is positioned at (0, 5, -10) and is looking at the origin. The light is a hemispheric light, which simulates the light coming from the sky.
We also create a ground object, which is a flat plane that will serve as the floor of our scene.

Finally, we start the engine and tell it to render the scene on every frame.

Adding Objects:

Now that we have our scene set up, let’s add some objects to it. We’ll start by adding a box:

// Create a box
var box = BABYLON.Mesh.CreateBox("box1", 1, scene);

// Move the box up by half its height
box.position.y = 0.5;

// Rotate the box
box.rotation.x = Math.PI / 4;

To rotate the box, we can use the rotation property of the box object. This property is a Vector3 that specifies the rotation of the object in radians. The x component of the vector represents the rotation around the x-axis, the y component represents the rotation around the y-axis, and the z component represents the rotation around the z-axis.In the above code, we set the rotation.x property of the box object to Math.PI / 4, which rotates the box around the x-axis by 45 degrees.Now let’s add a sphere and position it relative to the box:

// Create a sphere
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 1, scene);

// Position the sphere relative to the box
sphere.position.x = 2;
sphere.parent = box;

In the above code, we first create a sphere object. The CreateSphere method takes three parameters: the name of the object, the number of segments used to create the sphere (16 in this case), and the radius of the sphere (1 in this case).

We then position the sphere relative to the box by setting its x position to 2. We also set the parent property of the sphere object to the box object. This makes the sphere a child of the box, which means that any transformations applied to the box will also be applied to the sphere.

Adding Materials:

To make our objects look more realistic, we need to add materials to them. Materials define how light interacts with the surface of an object, and can include properties such as color, texture, and shininess.
Let’s add a material to our box:

// Create a material for the box
var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);

// Set the diffuse color of the material
boxMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);

// Assign the material to the box
box.material = boxMaterial;

In the above code, we first create a new StandardMaterial object and give it a name of “boxMaterial”. We then set the diffuseColor property of the material to a Color3 object with RGB values of (1, 0, 0), which corresponds to red.

Finally, we assign the material to the box object by setting its material property to boxMaterial.

Let’s also add a material to our sphere:

// Create a material for the sphere
var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);

// Set the diffuse color of the material
sphereMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);

// Assign the material to the sphere
sphere.material = sphereMaterial;

In the above code, we follow the same steps as before to create a new material and set its diffuse color to green. We then assign the material to the sphere object.

Finalizing The Scene:

Now that we’ve added objects and materials to our scene and finalize it by adding some finishing touches. Let’s change the background color of the scene to blue, add a light to brighten things up, and add some interactivity by allowing the user to rotate the camera using the mouse.

// Set the background color of the scene
scene.clearColor = new BABYLON.Color3(0, 0, 1);

// Add a light to the scene so we can see
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Add mouse controls to the camera
var cameraControls = new BABYLON.ArcRotateCameraPointersInput();
camera.inputs.add(cameraControls);

In the above code, we set the clearColor property of the scene to blue by creating a new Color3 object with RGB values of (0, 0, 1). This sets the background color of the scene to blue.
We also add mouse controls to the camera by creating a new ArcRotateCameraPointersInput object and adding it to the camera’s inputs array. This allows the user to rotate the camera using the mouse.

Putting It All Together:

Here’s the complete code for creating a web3D scenes with Babylon.js:

// Get the canvas element from the HTML file
var canvas = document.getElementById("renderCanvas");

// Create the Babylon.js engine
var engine = new BABYLON.Engine(canvas, true);

// Create the scene
var scene = new BABYLON.Scene(engine);

// Create the camera
var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, new BABYLON.Vector3.Zero(), scene);

// Attach the camera to the canvas
camera.attachControl(canvas, true);

// Create a box
var box = BABYLON.Mesh.CreateBox("box1", 1, scene);

// Position the box
box.position.x = -2;

// Rotate the box
box.rotation.x = Math.PI / 4;

// Create a material for the box
var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);

// Set the diffuse color of the material
boxMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);

// Assign the material to the box
box.material = boxMaterial;

// Create a sphere
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 1, scene);

// Position the sphere relative to the box
sphere.position.x = 2;
sphere.parent = box;

// Create a material for the sphere
var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);

// Set the diffuse color of the material
sphereMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);

// Assign the material to the sphere
sphere.material = sphereMaterial;

// Set the background color of the scene
scene.clearColor = new BABYLON.Color3(0, 0, 1);

// Add a light to the scene
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Add mouse controls to the camera
var cameraControls = new BABYLON.ArcRotateCameraPointersInput();
camera.inputs.add(cameraControls);

// Start the engine
engine.runRenderLoop(function () {
scene.render();
});

To use this code on your own website, you’ll need to include the Babylon.js library by adding the following script tag to your HTML file:

<script src="https://cdn.babylonjs.com/babylon.js"></script>

You’ll also need to create a canvas element with an id of “renderCanvas” in your HTML file:

<canvas id="renderCanvas"></canvas>

Conclusion:

In this article, we’ve introduced some basic concepts of creating web3D scenes with Babylon.js. We’ve covered how to create objects, position and rotate them, add materials, change the background color of the scene, and add interactivity. With these tools, you can start exploring the possibilities of 3D on the web and create your own immersive experiences.

‍

Looking for a reliable partner for your next project?

At SLIDEFACTORY, we’re dedicated to turning ideas into impactful realities. With our team’s expertise, we can guide you through every step of the process, ensuring your project exceeds expectations. Reach out to us today and let’s explore how we can bring your vision to life!

Web 3D Part 1: Creating Web 3D Scenes With Babylon.Js