
# Getting Started - Enhancing Your Website

## First Model on a Web Page
Provided the file type is one recognized by Babylon.js, you can use the Babylon [Viewer](/features/featuresDeepDive/babylonViewer) to display your scene or model on a web page using the `<babylon-viewer>` custom element. Examples of suitable file types are `.gltf` and `.glb`. See the [importer docs](/features/featuresDeepDive/importers/loadingFileTypes) for more details. It makes no difference whether the scene was built with Babylon.js or created with your favorite design software. The `<babylon-viewer>` element will be sized to fit its container.

The easiest way to try the Babylon Viewer is to reference the distribution script in an HTML page from a free public CDN. For example:

```html
<html lang="en">
    <body>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@babylonjs/viewer/dist/babylon-viewer.esm.min.js"></script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>
```

For more details, see the main [Viewer](/features/featuresDeepDive/babylonViewer) documentation page and the [NPM](https://www.npmjs.com/package/@babylonjs/viewer) page.


# 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 must first ensure they have been loaded successfully. You can do this using the _ImportMeshAsync_ method of the _SceneLoader_, as follows:

```javascript
BABYLON.ImportMeshAsync(folder_path + file_name, scene, optionalOptions);
```

The scene parameter is optional and will default to the current scene. In the options you can specify which meshes to load:

```javascript
BABYLON.ImportMeshAsync("/relative path/myFile"); //Empty string loads all meshes
BABYLON.ImportMeshAsync("/relative path/myFile", scene, { meshNames: "model1" }); //Name of the model loads one model
BABYLON.ImportMeshAsync("/relative path/myFile", scene, { meshNames: ["model1", "model2"] }); //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 set up 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#5260" title="Loading Your First Model" description="Load a model into a scene." image="/img/playgroundsAndNMEs/gettingStartedFirstModel.webp"/>

<Playground id="#YNEAUL#5261" title="Loading Multiple Models at Once" description="Load multiple models into a scene." image="/img/playgroundsAndNMEs/gettingStartedFirstModelwGrass.webp"/>

Therefore, 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 the models' names, to manipulate each mesh.

```javascript
BABYLON.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#5262" title="Modifying Models After Load" description="Load a model into a scene and modify their position after loading completes." image="/img/playgroundsAndNMEs/gettingStartedFirstModelLoadSuccess.webp"/>

## 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

A clear point: different file types export models differently.

A less obvious point: different file types may change when imported 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 do one of the following:

```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.webp)  
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 their titles. To edit the code, open them with ![open pg](/img/getstarted/openpg.webp?expandable=false)

## 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 shown below is the class responsible for interfacing with lower-level APIs such as WebGL, audio, and more. The constructor used 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).

Use the tabs to view this example with standard ES6 imports, side-effect-free pure ES6 imports, or the global UMD package.

<CodeVariants>
<CodeVariant variant="es6" label="ES6">

```javascript
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import "@babylonjs/core/Materials/standardMaterial";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder";
import { Scene } from "@babylonjs/core/scene";

const scene = new Scene(engine);

const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

const box = CreateBox("box", {}, scene);
```

</CodeVariant>
<CodeVariant variant="pure-es6" label="ES6 pure">

```javascript
import {
    ArcRotateCamera,
    CreateBox,
    HemisphericLight,
    RegisterStandardEngineExtensions,
    RegisterStandardMaterial,
    Scene,
    Vector3,
} from "@babylonjs/core/pure";

RegisterStandardEngineExtensions();
RegisterStandardMaterial();

const scene = new Scene(engine);

const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

const box = CreateBox("box", {}, scene);
```

</CodeVariant>
<CodeVariant variant="umd" label="UMD">

```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);
```

</CodeVariant>
</CodeVariants>

Like most meshes created with Babylon.js's mesh creation helpers, the box is created with its center positioned 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 unit size for its width, height, and depth.

To make this usable in a Playground, we need to place these within a function called **createScene** that returns a scene. The Playground app takes care of the rest.

<CodeVariants>
<CodeVariant variant="es6" label="ES6">

```javascript
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import "@babylonjs/core/Materials/standardMaterial";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder";
import { Scene } from "@babylonjs/core/scene";

const createScene = () => {
    const scene = new Scene(engine);

    const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new Vector3(0, 0, 0));
    camera.attachControl(canvas, true);

    const light = new HemisphericLight("light", new Vector3(0, 1, 0));

    const box = CreateBox("box", {});

    return scene;
}
```

</CodeVariant>
<CodeVariant variant="pure-es6" label="ES6 pure">

```javascript
import {
    ArcRotateCamera,
    CreateBox,
    HemisphericLight,
    RegisterStandardEngineExtensions,
    RegisterStandardMaterial,
    Scene,
    Vector3,
} from "@babylonjs/core/pure";

RegisterStandardEngineExtensions();
RegisterStandardMaterial();

const createScene = () => {
    const scene = new Scene(engine);

    const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new Vector3(0, 0, 0));
    camera.attachControl(canvas, true);

    const light = new HemisphericLight("light", new Vector3(0, 1, 0));

    const box = CreateBox("box", {});

    return scene;
}
```

</CodeVariant>
<CodeVariant variant="umd" label="UMD">

```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;
}
```

</CodeVariant>
</CodeVariants>

Since there is only one scene at this point, you may notice that this parameter can be dropped from the camera, light, and box, as they default to being placed in the current scene.

<Playground id="#KBS9I5" title="Getting Started First Scene Playground" description="Getting Started First Scene Playground." image="/img/playgroundsAndNMEs/gettingStartedFirstScene.webp"/>

![box](/img/getstarted/house0.webp)

Having created our box we can save, or export, the scene from within the playground by selecting the *Inspector*  
![inspector](/img/getstarted/pgpartmenu.webp)    

followed by *Tools* and choose which type to export, the *.babylon* format or the *GLB* format.  
![Tools](/img/getstarted/export.webp)

Now that we have a file, we can use it to demonstrate how to view it on a web page.


Getting Started - Chapter 1 - Enhancing Your Website

First Model on a Web Page