
# Getting Started - Have a Look Around

## Have a Look Around
Currently we are using the *ArcRotateCamera* which has us orbiting the village world from a distance. How about a view from inside the village? Let's parent the camera to the character walking around the village and with a few adjustments to values look around from over his shoulder. The creation of the *ArcRotateCamera* has this form,

```javascript
const camera = new BABYLON.ArcRotateCamera("name", alpha angle, beta angle, radius, target position);
```

As will all cameras in order to move it in response to user input we need to attach it to the canvas.

```javascript
camera.attachControl(canvas, true);
```

Think of this camera as one orbiting its target position, or more imaginatively as a spy satellite orbiting the earth. Its position relative to the target (earth) can be set by three parameters, _alpha_ (radians) the longitudinal rotation, _beta_ (radians) the latitudinal rotation and  _radius_ the distance from the target position.

![arc rotate camera](/img/how_to/camalphabeta.jpg)

In our case we want to have the camera parented to the character

```javascript
camera.parent = dude;
```

and, because the dude is scaled in size we use a large radius which as parented to the dude will be scaled down. To track him we use 

```javascript
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2.5, 150, new BABYLON.Vector3(0, 60, 0));
```

Since the character makes instant turns the camera also does. To make the viewing smoother a smoother track for the character to follow would be needed.

<Playground id="#KBS9I5#97" title="Over The Shoulder" description="Parent the camera to a character for an over the shoulder angle." image="/img/playgroundsAndNMEs/gettingStartedCamera.jpg"/>

We can also use a different type of camera to follow the character another way.




# Getting Started - Follow That Character

## Follow That Character

Without using parenting we can also track the characters movements with a *FollowCamera*.

We give a *FollowCamera* a start position and a target to follow and a goal position from which to view the target. 

We create the *FollowCamera* with a name, start position and the optional scene parameter.
```javascript
const camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(-6, 0, 0), scene);
```

We then set the goal: 
height above the the center of the target;
```javascript
camera.heightOffset = 8;
```

radial distance from target plus height offset;
```javascript	
camera.radius = 1;
```

rotation, in radians, center of target in x y plane;
```javascript
camera.rotationOffset = 0;
```

acceleration in moving from current to goal position;
```javascript
camera.cameraAcceleration = 0.005
```

speed at which acceleration is halted 
```javascript
camera.maxCameraSpeed = 10
```	

Of course we also attach the camera to the canvas
```javascript
    camera.attachControl(canvas, true);
```

Finally we set the target
```javascript
camera.lockedTarget = targetMesh;
```

<Playground id="#KBS9I5#98" title="Follow The Character" description="Use the follow cam to follow the character around the village." image="/img/playgroundsAndNMEs/gettingStartedFollowCam.jpg"/>

Having created a 3D world, albeit just a small village, it would be good to see it in all its 3D glory. All you need is a 3D viewer whether a simple one such as the Google Carboard or a high tech one and the appropriate camera from Babylon.js.



# Getting Started - Going Virtual

## See Our Virtual Village World in XR

It could not be simpler - we remove the current camera and replace it with

```javascript
const xr = scene.createDefaultXRExperienceAsync();
```

This will enable WebXR **in VR immersive mode**, including session init, input sources, the camera, teleportation and scene interactions. All using our [WebXR Default Experience Helper](/divingDeeper/webXR/webXRExperienceHelpers#the-basic-experience-helper).


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


# Getting Started - Adding Shadows

## Adding Shadows
The light we have been using so far, the *HemisphericLight* gives an ambient background light and is not suitable for producing shadows. We could use the lamp spot lights however the shadows they produce can be faint and so we will introduce a directional light.

```javascript
const  light = new BABYLON.DirectionalLight("dir", direction, scene);
```
As usual the direction is a vector3 and the scene parameter is optional.

Setting its position will affect the direction and length of any created shadows.

```javascript
light.position = new BABYLON.Vector3(0, 15, -30);
```

Shadows will only appear when a *ShadowGenerator* object is created, a mesh casting the shadow is given and the mesh on which the shadow will be cast is set to receive shadows. 

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
```

The first parameter is the size of a shadow map and the light generating the shadow.

We also need to add a mesh that will cast the shadow.

```javascript
shadowGenerator.addShadowCaster(casting mesh, true);
```

The optional second parameter, which has default value false, will add any children of the mesh to the shadow caster.

Finally we also have to tell the mesh on which the shadow is cast to receive it.

```javascript
receiving_mesh.receiveShadows = true
```

In our case we need, at appropriate positions

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

shadowGenerator.addShadowCaster(dude, true);

ground.receiveShadows = true;
```
<Playground id="#4G38H4#7" title="Adding Basic Shadows" description="Set up a scene for shadows with the shadow generator." image="/img/playgroundsAndNMEs/gettingStartedShadows1.jpg"/>

Putting this, with suitable value adjustments, in our world gives

<Playground id="#KBS9I5#96" title="Shadows in the Village" description="Adding basic shadows to the village." image="/img/playgroundsAndNMEs/gettingStartedShadows2.jpg"/>

So far we have had only one way to view our village world. There are other possibilities with different cameras.



Getting Started - Chapter 8 - Ways to See The World

Different Points of View

Coming next

Getting Started - Chapter 8 - Have a Look Around

Learn the basics of the arcRotateCamera.

Getting Started - Chapter 8 - Follow That Character

Learn the basics of the FollowCamera.

Getting Started - Chapter 8 - Going Virtual

Learn the simple process of setting a scene up for VR.