
# 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 the values, look around from over his shoulder. The creation of the *ArcRotateCamera* takes this form:

```javascript
const camera = new BABYLON.ArcRotateCamera("name", alpha_angle, beta_angle, radius, target_position);
```

As with 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.webp)

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, when 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.webp"/>

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 character's movements with a *FollowCamera*.

We give a *FollowCamera* a start position, 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 center of the target;
```javascript
camera.heightOffset = 8;
```

radial distance from target plus height offset;
```javascript	
camera.radius = 1;
```

rotation, in degrees, 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.webp"/>

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 Google Cardboard 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](/features/featuresDeepDive/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. We attach a camera behind our character to get an over-the-shoulder view of the village and look around as he walks. We can also change cameras and follow him like the target of a spy drone. The very last thing is to show you that Babylon.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, 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 appear only when a *ShadowGenerator* object is created, a mesh is set to cast the shadow, and the mesh receiving the shadow is set to receive shadows. 

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
```

The first parameter is the size of the shadow map, and the second is 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 a default value of 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, at the appropriate positions, we need

```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.webp"/>

Putting this into our world, with suitable value adjustments, gives

<Playground id="#KBS9I5#96" title="Shadows in the Village" description="Adding basic shadows to the village." image="/img/playgroundsAndNMEs/gettingStartedShadows2.webp"/>

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 - Follow That Character

Learn the basics of the FollowCamera.

Getting Started - Chapter 8 - Have a Look Around

Learn the basics of the arcRotateCamera.

Getting Started - Chapter 8 - Going Virtual

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