
# Getting Started - The Viewer

## Changing the Viewer's Camera

What happens when we use **Village** as a model in the viewer?

<CodePen pen="pvzaPBV" tab="result" title="Babylon Viewer Basics" />

By default the Viewer calculates the extent of the model and adjusts the camera accordingly.

If you want to get the camera closer to the model, you can use the `camera-orbit` attribute. Camera orbit is specified as `alpha beta radius`, and any of these values can be set to `auto` to use the default value. Therefore, if you just want to move the camera closer to the village, you can set `camera-orbit="auto auto 15"`.

<CodePen pen="EaYQmzJ" tab="html,result" title="Babylon Viewer Basics" />

When you are developing a web game or app, you probably want more flexibility than the Viewer provides. Let's take another look at using the HTML template.


# Getting Started - Web App Layout

## Varying Web App Layout
While you probably want your game or app to take up most of the page, you might also want some space for instructions, for example. Just place your *&lt;canvas&gt;* element in a *&lt;div&gt;* and arrange the elements as you need.

```html
<div id = "holder">
        <canvas id="renderCanvas" touch-action="none"></canvas> 
</div>
<div id = "instructions">
    <br/>
    <h2>Instructions</h2>
    <br/>
    Instructions Instructions Instructions Instructions Instructions 
    Instructions Instructions Instructions Instructions Instructions 
</div>
```
with additional styles:
```html
<style>
    #holder {
        width: 80%;
        height: 100%;
        float: left;
    }

    #instructions {
        width: 20%;
        height: 100%;
        float: left;
        background-color: grey;
    }
</style>
```

[Example App and Instructions](/webpages/app3.html) importing the model village

You could, of course, still build your scene completely from code.

[Example App and Instructions](/webpages/app4.html) building the village from code

During the next stage in developing the world, we are going to add movement by animating a very basic car. A car needs wheels that turn independently of the car body. To see how this is achieved, we need to look at parenting the wheels to the body.


# Getting Started - Making Copies

## Copying Meshes
The two main ways to copy a mesh are to clone it or create an instance of it. Cloning gives you an independent copy of a mesh, whereas an instance is still linked to the original for its material. You cannot change the material of an instance of a mesh. There are also advanced ways of creating copies, which are available in the [meshes feature deep dive](/features/featuresDeepDive/mesh/copies).

To clone the house, use:

```javascript
clonedHouse = house.clone("clonedHouse")
```
And for an instance, it is:
```javascript
instanceHouse = house.createInstance("instanceHouse")
```

Since all the houses in our world will use the same material at this point, we will go with *createInstance*.

Before we do that, we combine the building functions to produce a house of width 1 or 2, a detached or semi-detached house respectively.

<Playground id="#KBS9I5#77" title="Expanding the House Building Function" description="A playground expanding the house building function to accept a width of 1 or 2 for a detached or semi-detached house." image="/img/playgroundsAndNMEs/gettingStartedCopies1.webp"/>

We now enlarge the ground and increase the camera radius a little so it can fit several houses and still let us view them.
To begin, we build one house of each type and position them. Afterwards, we will create instances of these for the remaining houses. After deciding on the type, position, and orientation for the other houses, we will use a loop to create them.

```javascript
const houses = [];

for (let i = 0; i < places.length; i++) {
    if (places[i][0] === 1) {
        houses[i] = detached_house.createInstance("house" + i);
    }
    else {
        houses[i] = semi_house.createInstance("house" + i);
    }
    houses[i].rotation.y = places[i][1];
    houses[i].position.x = places[i][2];
    houses[i].position.z = places[i][3];
}
```

<Playground id="#KBS9I5#78" title="Creating Multiple House Instances" description="A playground demonstrating how to create instances of a 3D object." image="/img/playgroundsAndNMEs/gettingStartedCopies2.webp"/>

![Village 1](/img/getstarted/village1.webp)

As before, to keep the upper parts of the Playground editor available for newer code, we will put the building of these houses into a function.

<Playground id="#KBS9I5#79" title="Wrapping Instances Into a Function" description="Wrapping the house instancing loop into a function." image="/img/playgroundsAndNMEs/gettingStartedCopies2.webp"/>

Now that the world we are building is a little more complex, let's take a file of the village and revisit viewing it as part of a website we want to enhance.

<Playground id="#KBS9I5#80" title="Importing the Village as a .glb File" description="An example of how to load a .glb of the starting village into your scene." image="/img/playgroundsAndNMEs/gettingStartedCopies2.webp"/>





Getting Started - Chapter 2 - The Viewer

Changing the Viewer's Camera