
# First Steps

Now it is time to start our learning journey together. Instead of the usual 'Hello World' introduction we will, step by step, build a simple world. At the end of the journey we will have created a small village demonstrating the features of Babylon.js. The first steps will introduce you to the basics of using Babylon.js to create a scene, code a simple model and export it. We will also show that you can import a model into a scene, display it on the web or create a web app from it.


## From One to Many

A nice big step now as we take the simple box and turn it into a house, or two. As houses do not float we will create some ground and then see how we can position, rotate and re-size the house and set it on the ground. Since a blank box looks just like a blank box we will add texture to give it the appearance of having 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 show how you can include sounds but then silence them immediately as anything but the sounds you want to work with are 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 Simms family. The parents and children you are about to be introduced to are the silent type and a way of linking together meshes so that changes to a parent mesh are also applied to their children meshes. We are going to animate a very simple car with wheels that are children to 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. Good job too as 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 basis of importing an animated character and have 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 reeling 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 the danger zone. Unless of course he is already in the danger zone, in which case he 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 using a skybox, texture, creating a ground with 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 using 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 night time 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. 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 in. We attach a camera behind our character to get an over the shoulder view of the village, having a look around as he walks. We can also change cameras and follow him like a target of a spy drone. The very last thing is to show you that Babylom.js can use modern 3D viewers to give a complete 3D view of our world.


## Welcome To The Babylon.js Documentation

Hello and welcome to the Babylon.js Documentation. In these pages you will find everything you could ever want to know about this powerful, beautiful, simple, and completely open-source web rendering engine. Whether you are just starting your Babylon.js journey, or you are a seasoned veteran, it is our sincere hope that the information contained here will help you bring your ideas to life.

## How It's Organized

This documentation is designed to take you on a step by step journey of mastering all that this platform has to offer. The information is organized into 7 main sections, each one expanding on the knowledge from the previous.

1. [Getting Started](/start) - This section is designed to take you on a step by step journey of scratching the surface of Babylon.js and everything it has to offer.
2. [Diving Deeper](/divingDeeper) - Organized by feature, this section will help you take the next step, expand on your knowledge of the platform, and give you a solid understanding of the depth of possibilties in the engine.
3. [Advanced Topics](/advanced_topics) - This section will transform you into a Babylon.js expert. Tackling the most dense and advanced topics, this section is not for the faint of heart.
4. [Tools And Resources](/toolsAndResources) - Babylon.js features many incredible tools to make the development process simple and enjoyable. It also has several libraries of content available for you to use completely for free. This section will help you understand and leverage both.
5. [Guided Learning](/guidedLearning) - Sometimes it's best to learn while doing. This section helps you do just that. These step by step articles and tutorials will help you learn from some of the communities best and brightest teachers.
6. [Extensions](/extensions) - Bayblon.js is completely free and open source and has one of the world's most amazing development communities behind it, pushing it to be the best that it can be. This section contains information about some of the incredible technology built by the community to that will extend your Babylon.js development even further.
7. [API](/typedoc) - For the most seasoned Babylon.js developers, those who want to understand every single possible super power available, the API meticulously documents every corner of this fantastic platform.

## How To Use The Documentation

The documentation page layout has several features that you'll want to know about in order to get the most out of your learning journey.

To start, the left most panel is the navigation pane. This pane is how you navigate to where you'd like to go.

![Navigation Pane](/img/home/home1.jpg)

Next is the content pane. It's in the middle, and you guessed it, it contains the main content and information.

![Content Pane](/img/home/home2.jpg)

Some pages have a lot of information that's organized into sub sections. The table of contents pane makes it easy to navigate lengthier pages.

![Table of Contents](/img/home/home4.jpg)

The panel on the right is the examples pane. It provides quick access to every playground (live examples) on the current page.

![Examples Pane](/img/home/home3.jpg)

Lastly, if you select any one of the examples in the examples pane, it will load that example inside of the playground pane at the top of the page content.

![Examples Pane](/img/home/home5.jpg)

## Getting Started

The best place to get started is...well you guessed it, right at our [Getting Started](start/) section. If you're the type of learner that does better exploring on your own, then the [Diving Deeper](landing_pages/divingDeeperLandingPage) section is for you. If you are already in love with Babylon.js and want to start contributing to it's success, then the [Develop With Babylon.js](landing_pages/divingDeeperDevelopingLandingPage) section is the place for you.

Well, that's it. Hopefully that's enough to get you started. Oh, and as we like to say, welcome to the Babylon family. Enjoy your journey!


Welcome to Getting Started with Babylon.js

Welcome to Getting Started with Babylon.js

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 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.