
# Getting Started - Mesh Placement

## Place and Scale a Mesh

### Size
Some meshes, such as a box, have properties that you can set during creation to change their size.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, height: 1.5, depth: 3})
```

After creation, and for meshes that do not have sizing options, changes in size are achieved by scaling the mesh.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling.x = 2;
box.scaling.y = 1.5;
box.scaling.z = 3;
```

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling = new BABYLON.Vector3(2, 1.5, 3);
```

As you can see from the code above, scaling is a vector object with properties x, y, and z.

All three code examples above produce boxes of the same size.

## Position
For the majority of meshes, the [position](/features/featuresDeepDive/mesh/transforms/center_origin/position) property places the center of the mesh at that position. Position is also a vector object with properties x, y, and z, so the following two code examples position the box in the same place.

```javascript
box.position.x = -2;
box.position.y = 4.2;
box.position.z = 0.1;
```

```javascript
box.position = new BABYLON.Vector3(-2, 4.2, 0.1);
```

We can now use positions to place boxes sized in three different ways in one playground. In each case, the height of a box is 1.5, so for each box, position.y = 0.75 places it on the ground.

<Playground id="#KBS9I5#68" title="Positioning Meshes" description="A playground demonstrating different ways to position a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedMeshPlacement.webp"/>

### Orientation
Like scaling and position, the [rotation](/features/featuresDeepDive/mesh/transforms/center_origin/rotation) property of a mesh is a vector object with properties x, y, and z. However, when building our first world, we will consider rotation about only one axis, since setting rotation about all three axes can be surprisingly confusing.

Rotations are given in radians. If you prefer working in degrees, Babylon.js provides a conversion tool. Both of these lines of code produce the same rotation.

```javascript
box.rotation.y = Math.PI / 4;
box.rotation.y = BABYLON.Tools.ToRadians(45);
```

<Playground id="#KBS9I5#69" title="Rotating Meshes" description="A playground demonstrating how to rotate a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedRotatingMeshes.webp"/>

We can now change the size, position, and orientation of a mesh, adding a little more variation to the box as a building. Before we place more boxes in the scene, let us see if we can make them look a little more like buildings.



# Getting Started - Basic House

## A Basic House
Adding a roof would make our box more house-like. We need a prism-like shape. Luckily, we can do that using *CreateCylinder*. The name might imply a cylinder rather than a prism; however, when using it, you need to state how many points there are around the circumference of the cylinder, and for a prism we can use three points.

```javascript
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});
roof.scaling.x = 0.75;
roof.rotation.z = Math.PI / 2;
roof.position.y = 1.22;
```

Since the cylinder is created vertically, we need to rotate it to a horizontal position and scale it down in one direction so that the height of the roof is less than its width.

<Playground id="#KBS9I5#70" title="Adding a Prism Roof Using 'CreateCylinder'" description="A playground demonstrating how to add a 'prism' roof to your house." image="/img/playgroundsAndNMEs/gettingStartedPrism.webp"/>

![house 1](/img/getstarted/house1.webp)

The world will be improved with a little color and texture.


# Getting Started - Sound

## Adding Sound

Adding sounds to your world is very easy.

First, create an audio engine and unlock it. Note that we're using `await` to wait for the promises to resolve, so this needs to be done in an `async` function, for example:

```javascript
async function initAudio() {
  const audioEngine = await BABYLON.CreateAudioEngineAsync();
  await audioEngine.unlockAsync();

  // Audio engine is ready to play sounds ...
}
```


For continuously looping background music we use a streaming sound:

```javascript
BABYLON.CreateStreamingSoundAsync("name", "<sound file URL>", { loop: true, autoplay: true }, audioEngine);
```

<Playground id="#SFCC74#823" title="Adding Sound To Your Scene" description="A playground showing how easy it is to add sound to your scene." image="/img/playgroundsAndNMEs/gettingStartedGround.webp"/>


To play a short sound once we can use a sound that plays from a fully downloaded buffer:

```javascript
const sound = await BABYLON.CreateSoundAsync("sound", "<sound file URL>");
sound.play();
```

In the example below, *setInterval* is used to play the sound every 3 seconds.

<Playground id="#SFCC74#831" title="Playing Sound Every 3 Seconds" description="Set an interval to play a sound every 3 seconds." image="/img/playgroundsAndNMEs/gettingStartedGround.webp"/>

Since you probably prefer listening to your own music as you work, and repeated sounds can get annoying, the above playground examples are the only ones in this tutorial that load sounds.

Now back to making our world and developing our buildings. Buildings come in varied sizes, positions, and orientations, and that will be true for the world we are creating.


Getting Started - Chapter 2 - Mesh Placement

Place and Scale a Mesh

Size

Position

Orientation

Further reading

Position A Mesh

Learn about positioning meshes in Babylon.js.