
# Getting Started - Enhancing Your Website

## First Model on a Web Page.
Provided the file type is one recognized by Babylon.js then you can use the Babylon.js [Viewer](/features/featuresDeepDive/babylonViewer) to display your scene or model on a web page using the *&lt;babylon&gt;* element. Examples of suitable file types are *.babylon*, *.gltf* and *glb* with *.glb* recommended. It makes no difference whether the scene was built with Babylon.js or created with your favorite design software. The *&lt;babylon&gt;* element will be sized to fit its container.

In order to use the Viewer you need to add its code to your HTML page in a *&lt;script&gt;* element

```javascript
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
```

Once this is added you place the *&lt;babylon&gt;* element in an appropriate container and points its *model* attribute to the file source.


```javascript
<babylon model="Path to File"></babylon>
```

[Example Web Page](/webpages/page1.html)

![Page 1](/img/getstarted/view1.png)

When you want to use your models for a game or application on a web page you need first to know how to import them. 



# Getting Started - Working with Models

The playgrounds on this page contain models (in this example, houses) which can be positioned, rotated and scaled. Once the basics (such as importing a model and putting your project on a web page) have been introduced, we will give you details on how to accomplish this with Babylon.js.

## Importing a Scene or Model

When you add a model to a scene, you are loading it through the browser. As you likely already know, loading anything from a website is an asynchronous function. Therefore, before you can do anything with your models, you first must ensure they have been loaded successfully. You can do this using the _ImportMeshAsync_ method of the _SceneLoader_, which can be done as follows:

```javascript
BABYLON.SceneLoader.ImportMeshAsync(model_name, folder_path, file_name, scene);
```

The scene parameter is optional and will default to the current scene. The first parameter can be any one of three types depending whether you want to load all the models, just one model or a list of models.

```javascript
BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile"); //Empty string loads all meshes
BABYLON.SceneLoader.ImportMeshAsync("model1", "/relative path/", "myFile"); //Name of the model loads one model
BABYLON.SceneLoader.ImportMeshAsync(["model1", "model2"], "/relative path/", "myFile"); //Array of model names
```

Note that any of the calls above will only load the models; however, you will not be able to manipulate them in any way. Internally, a Promise object is setup and returned, but the above code does nothing with the result of that Promise. Examples of this are in the following two playgrounds, which **only** import the named models.

<Playground id="#YNEAUL#11" title="Loading Your First Model" description="Load a model into a scene." image="/img/playgroundsAndNMEs/gettingStartedFirstModel.jpg"/>

<Playground id="#YNEAUL#12" title="Loading Multiple Models at Once" description="Load multiple models into a scene." image="/img/playgroundsAndNMEs/gettingStartedFirstModelwGrass.jpg"/>

Therefore, in order to act on the result and manipulate the objects, we follow the Promise with the _then_ method to call a function with the _result_ of the _Promise_. The _result_ is an object containing, among other things, the property _meshes_ which contains all the loaded models. We can use this array, or their names, to manipulate each mesh.

```javascript
BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile").then((result) => {
    result.meshes[1].position.x = 20;
    const myMesh1 = scene.getMeshByName("myMesh_1");
    myMesh1.rotation.y = Math.PI / 2;
});
```

The following playground imports all models and changes their positions:

<Playground id="#YNEAUL#13" title="Modifying Models After Load" description="Load a model into a scene and modify their position after loading completes." image="/img/playgroundsAndNMEs/gettingStartedFirstModelLoadSuccess.jpg"/>

## Moving On

Having a working scene in the playground is one thing, but you will ultimately want your game or application to run on your own website. In the next section, we will provide an HTML template to do just this.

## Warning

An obvious statement - different file types export models differently.

A less obvious statement - different file types may be changed when importing into Babylon.js.

You need to be aware of how the type you are using affects the outcome. It is not appropriate at this stage to go into detail but the following examples indicate why this is important.

1. Some software saves all meshes with a rotationQuaternion set and you cannot then use the _rotation_ methods unless you first add:

```javascript
myMesh.rotationQuaternion = null; //Any version of Babylon.js
```

```javascript
myMesh.rotation = BABYLON.Vector3.Zero(); //babylon.js versions > 4.00
```

2. The following two types were exported from exactly the same scene and imported into Babylon.js:

**.babylon**
A model is stored as one mesh, i.e. each house body and roof forms one house.

```
detached_house
ground
semi_house
```

**.glb**
A \_root\_ node is added to hold all the models and model parts, which are stored as sub-meshes.

```
_root_
    detached_house
        detached_house primitive0
        detached_house primitive1
    ground
    semi_house
        semi_house primitive0
        semi_house primitive1
```



# Getting Started - Chapter 1 - First Scene

## First Scene and Model
Whether you are creating a whole world or just placing one model into a web page you need a [scene](/features/featuresDeepDive/scene) to contain the world or model, a [camera](/features/featuresDeepDive/cameras) to view it, a [light](/features/featuresDeepDive/lights) to illuminate it and, of course, at least one viewable object as a model. All models, whether just a box or a complex character, are made from a [mesh](/features/featuresDeepDive/mesh) of triangles or facets.


![wireframe](/img/getstarted/wireframe.png)  
Wireframe View Showing Mesh Triangles

A large number of meshes can be created directly within Babylon.js using code, or, as you will shortly see, imported as models from meshes created with other software. Let us start simply with a box.

Examples on these pages can be viewed in the playground, the place to try out Babylon.js live on the web, by clicking on their titles. To edit the code open them with ![open pg](/img/getstarted/openpg.png)

## Say Hello to Your First World

All projects using the Babylon.js Engine need a scene with a camera and a light added. Then we can create our box.

Wait...what is the Babylon.js Engine you ask? Excellent question. The engine variable seen below is the class that's responsible for interfacing with lower-level APIs such as WebGL, Audio, etc. The constructor to create a Babylon scene (the context that renders visuals to the screen) needs the engine to talk to these lower level APIs. This is why the engine variable is needed when creating a scene.

You can read more about the [engine class here](/typedoc/classes/babylon.engine). 

```javascript
const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
```

Like most meshes created with MeshBuilder the box is created positioned with its center at the origin and needs three parameters. These are a name, *a string*,  options, *a JavaScript object*, and a scene. By leaving the options as an empty object *{}* with no properties the box defaults to one of unit size for its width, height and depth. 

To be usable in a playground we need to place these within a function called **createScene** which has to return a scene. The playground app takes care of the rest.

```javascript
const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}
```

Since at this point there is only one scene you may notice that this parameter can be dropped from the camera, light and box as the default is for them to be placed in the current scene.

<Playground id="#KBS9I5" title="Getting Started First Scene Playground" description="Getting Started First Scene Playground." image="/img/playgroundsAndNMEs/gettingStartedFirstScene.jpg"/>

![box](/img/getstarted/house0.png)

Having created our box we can save, or export, the scene from within the playground by selecting the *Inspector*  
![inspector](/img/getstarted/pgpartmenu.png)    

followed by *Tools* and choose which type to export, the *.babylon* format or the *GLB* format.  
![Tools](/img/getstarted/export.png)

Now we have a file we can use it to demonstrate how to view it in a web page.



Getting Started - Chapter 1 - Enhancing Your Website

First Model on a Web Page.