# BabylonJS Scene

### Overview

We will create our BabylonJS scene on Babylon Playground. Find out more about the editor on [What is playground?](https://www.xrdev.app/mixed-reality-docs/webxr-lessons/babylon.js/concepts/what-is-playground) chapter.

We will implement the 3D concepts we discussed in [How to create a basic 3D scene?](https://www.xrdev.app/mixed-reality-docs/webxr-lessons/3d-on-the-web/project/how-to-create-a-basic-3d-scene) chapter. 

### BabylonJS Code

To create a basic BabylonJS scene, we initialize a **scene**, create **camera,** **light** and a **mesh** and return the scene object.

```typescript
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));

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}
```

{% embed url="<https://playground.babylonjs.com/#KBS9I5#158>" %}
BabylonJS Playground Demo Link
{% endembed %}

{% hint style="info" %}
**Scene** object gets **engine** as the input argument. You don't have to worry about the engine when you are working on the playground but when you are working on your local code sample, we will create the engine as well.
{% endhint %}

### Camera

&#x20;***Arc Rotate Camera***  acts like a satellite in orbit around a target and always points towards the target position. In our case, it is pointing towards the box. Where ever you move your camera, it will still point to towards the box.&#x20;

Arc Rotate Camera parameters are: **name** you want to give to your camera, **alpha**(radians) the longitudinal rotation, **beta** *beta* (radians) the latitudinal rotation, **radius(**&#x74;he distance from the target position), **target position**(center where the box will be created as a default), **scene**(optional argument). In this code example scene is not given as an argument and defaults to the scene object on the playground.&#x20;

![Arc Rotate Camera parameters: alpha, beta, radius and target position.](https://1227696974-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoMjAI1irMPA8c0ezFQ%2F-MM3JxNvr5QP15Z29phi%2F-MM3KLHElgBi8jAmCQsf%2Fcamalphabeta.jpg?alt=media\&token=e815aaa6-e301-4983-89d5-a88130f9882e)

{% hint style="info" %}
&#x20;Setting *beta* to **0** or **PI** can, for technical reasons, **cause problems.**
{% endhint %}

### Light

A **hemispheric light** is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.

Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object. &#x20;

### Box Mesh

We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object. &#x20;

### Exercise

* [ ] Navigate to the code sample playground: <https://playground.babylonjs.com/#KBS9I5#158>
* [ ] Move your mouse over the box and click & drag.
* [ ] Uncomment line 5 and save or play the playground example.&#x20;
* [ ] Again, move mouse over the box and click & drag.
* [ ] On the BABYLON.MeshBuilder.CreateBox method replace the empty object with this object: {width: 4, height: 2}.&#x20;

### Next Steps

Continue exploring **how to create a 3D scene with other libraries**

{% content-ref url="threejs-scene" %}
[threejs-scene](https://www.xrdev.app/mixed-reality-docs/webxr-lessons/3d-on-the-web/project/threejs-scene)
{% endcontent-ref %}

Keep working with **BabylonJS** and **dive deeper into WebXR** on the [Babylon.js chapter](https://www.xrdev.app/mixed-reality-docs/webxr-lessons/babylon.js):

{% content-ref url="../../babylon.js" %}
[babylon.js](https://www.xrdev.app/mixed-reality-docs/webxr-lessons/babylon.js)
{% endcontent-ref %}

Read more on [BabylonJS documentation](https://doc.babylonjs.com/):

{% embed url="<https://doc.babylonjs.com/>" %}

Browse [community BabylonJS demos](https://www.babylonjs.com/community/):

{% embed url="<https://www.babylonjs.com/community/>" %}