
# First Steps

Now it is time to start our learning journey together. These first steps will introduce you to the basics of using Babylon.js to create a scene, code a simple model, and export it. Not only can models be created with Babylon.js, but a range of model types created in other software can also be imported into Babylon.js. We will show you how to import a model into a scene, display it on the web, and create a web app from it. From this beginning, which replaces the usual 'Hello World' introduction, we will build a simple world step by step. At the end of the journey, we will have created a small village that demonstrates the features of Babylon.js.

Want to try out Babylon.js straight away? The examples on each page are also presented using our interactive Playground, where you can write, view, and experiment with code immediately. Code that is properly formed and works within the Playground can be copied and pasted into an HTML template and used as your first web app.



## From One to Many

Now we take a big step as we turn the simple box into a house, or even two. Since houses do not float, we will create some ground and then see how we can position, rotate, and resize the house and place it on the ground. Since a blank box still looks like a blank box, we will add texture to give it the appearance of windows and doors. To keep the rain out, let's add a roof mesh and merge the two meshes together. Of course, a couple of houses do not make a village, so we will see how we can copy a mesh as many times as we wish. Since builders are noisy workers, we will also show you how to include sounds and then silence them immediately, as anything other than the sounds you want to work with can be distracting.


## Animating the Village

Our village is not very lively at the moment, so let's add some animation. We are still in the early stages of learning Babylon.js and nowhere near adding a Sims family. The parents and children you are about to meet are the silent type: a way of linking meshes so that changes to a parent mesh are also applied to its child meshes. We are going to animate a very simple car with wheels that are children of the parent car body. Unlike a real car, it is the car body that takes the wheels with it. There is one way that our mesh parents and children behave like a real family: the children can act independently of the parent. Which is just as well, because we do not want the car to rotate with the wheels.

Of course, you do not have to build an animation of your own. You can import a ready-made one, and we will show you the basics of importing an animated character and having it move around the village.


## A Bump in the Road

Or rather, a way of avoiding one. Just a quick step this time. Our character is moving around the village, and we want him to avoid being hit by a passing car. We set up a danger zone that stops the character in his tracks when the car enters it. Unless, of course, he is already in the danger zone, in which case he had better keep moving.



## A Better Environment

Our village world is a bit flat and has no atmosphere. Let's add some grass, distant hills, sky, and trees, all easily done with Babylon.js by using a skybox, textures, a ground created from a height map, and sprites.


## A Particle Fountain

Every village needs water, so let's put in a fountain. We will go for one with rotational symmetry and use a lathed mesh to create it. Fine particles will be recycled to produce a water effect. So that we do not waste water, let's add a switch event to turn it on or off.


## Lighting the Village

Perpetual light in the village can make sleeping very difficult, so we will introduce nighttime by turning the lights down. Of course, people do not want to walk in total darkness at night, so we will add some street lights. Since perpetual night is no better than perpetual day, we will add an interface to change from one to the other. We want to turn the light down at night and bring it up during the day, so let's add a GUI control to do this. Also, where there is light, there are shadows, and Babylon.js can add them as well. 


## Different Points of View

So far we have only viewed the village from a distant point, like a spy in the sky. Our final steps are to get a bit closer. We attach a camera behind our character to get an over-the-shoulder view of the village and look around as he walks. We can also change cameras and follow him like the target of a spy drone. The very last thing is to show you that Babylon.js can use modern 3D viewers to give a complete 3D view of our world.



## Bring a Scene to Life

Until now, we have positioned and animated objects ourselves. A physics engine can instead calculate how objects move under gravity and what happens when they collide.

In this chapter, we will set up the Havok physics engine, create a ground that stays in place, and drop a sphere onto it. Along the way, you will learn what makes a physics body static or dynamic and where to go when you are ready for more advanced physics.



Welcome to the wonderful 3D world of Babylon.js and 3D on the web. Beginners learning JavaScript should be able to learn a lot from the examples; however, we strongly suggest that you gain a working knowledge of JavaScript before starting to develop your own projects.

As you move through this introduction, you will explore the features of Babylon.js. We present code examples using our Playground, show you how to add models to your website, and explain how to import your own models into your Babylon.js game or app. Once you have covered all the chapters, you will have a foundational awareness of what Babylon.js has to offer. When you are ready, our full range of docs will help you dive deeper into Babylon.js. One day soon, you may find yourself part of the Babylon.js community, creating new ways to work with Babylon.js and, who knows, contributing to it as well.



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 &#x25B6; to rebuild the scene.  

<Playground id="#WJXQP0" title="Basic Playground" description="CreateScene Playground." />  

### Description

```javascript
const createScene = function () {
    // Creates a basic Babylon Scene object
    const scene = new BABYLON.Scene(engine);
    // Creates and positions a free camera
    const camera = new BABYLON.FreeCamera("camera1", 
        new BABYLON.Vector3(0, 5, -10), 
        scene);
    // Targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attaches the camera to the canvas
    camera.attachControl(canvas, true);
    // Creates a light, aiming 0,1,0
    const light = new BABYLON.HemisphericLight("light", 
        new BABYLON.Vector3(0, 1, 0), 
        scene);
    // Dim the light a small amount 0 - 1
    light.intensity = 0.7;
    // Built-in 'sphere' shape.
    const sphere = BABYLON.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 = BABYLON.MeshBuilder.CreateGround("ground", 
        {width: 6, height: 6}, 
        scene);
    return scene;
};
```


Introduction to Babylon.js Features

Coming next

Getting Started - Chapter 1 - Firsts

Start your Babylon.js learning with Chapter 1. Here you will begin a journey of learning to build a simple world step by step.

Getting Started - Chapter 2 - Build A Village

Continue your Babylon.js learning journey with Chapter 2, diving into materials, textures, sounds and more.

Getting Started - Chapter 3 - Village Animation

Continue your Babylon.js learning by diving into animation in Chapter 3.

Getting Started - Chapter 4 - Avoiding Collisions

Continue your Babylon.js learning with understanding collisions in Chapter 4.

Getting Started - Chapter 5 - A Better Environment

Learn to improve the look of your environment in Chapter 5.

Getting Started - Chapter 6 - Build a Particle Fountain

Learn the basics of the Babylon.js particle system in chapter 6.

Getting Started - Chapter 7 - Light the Night

Learn the basics of lighting in Babylon.js in chapter 7.

Getting Started - Chapter 8 - Ways to See The World

Learn the basics of Babylon.js cameras in Chapter 8.

Getting Started - Chapter 9 - Add Physics

Learn how to add gravity and physical interactions to a Babylon.js scene.