How do you create a basic scene in Babylon.js?

Babylon.js - Interview Questions

Creating a basic scene in Babylon.js involves several steps, including setting up the engine, creating a scene, defining a camera, and optionally adding lights and other elements. Here's a step-by-step guide to creating a simple Babylon.js scene:

1. Include Babylon.js Library : First, make sure to include the Babylon.js library in your HTML file. You can either download the library and host it locally or include it from a CDN. For example:

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

2. Create HTML Canvas Element : Add an HTML canvas element to your document. This canvas will serve as the rendering surface for the 3D scene.

<canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas>?

3. Initialize Babylon.js Engine : Use JavaScript to initialize the Babylon.js engine, passing the canvas element as a parameter.

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

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

4. Create a Scene : Create a Babylon.js scene, which will act as the container for all the 3D elements.

var scene = new BABYLON.Scene(engine);?

5. Create a Camera : Define a camera to view the scene. Babylon.js supports different types of cameras. In this example, we'll use a FreeCamera.

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());?

Adjust the camera position and target according to your requirements.

6. Add Lights (Optional) : You can add lights to the scene to illuminate objects. In this example, we'll add a hemispheric light.

var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);?

7. Run the Render Loop : Babylon.js uses a render loop to continuously update and render the scene.

engine.runRenderLoop(function () {
    scene.render();
});?

This function will keep rendering the scene as long as the page is open.

8. Handle Window Resize (Optional) : If you want the scene to adapt to window resizes, you can handle the window resize event.

window.addEventListener("resize", function () {
    engine.resize();
});?

Putting it all together, the complete code for creating a basic Babylon.js scene looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Babylon.js Scene</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas>

    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var scene = new BABYLON.Scene(engine);

        var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
        camera.setTarget(BABYLON.Vector3.Zero());

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

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>?

This example provides a basic template for creating a Babylon.js scene. You can customize and extend this code to add more complex 3D elements, animations, and interactivity to your scene.