# Your first scene

This guide will help you to create your first Tres scene.

## Setting up the experience Canvas

Before we can create an Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need yo create a `canvas` html element to mount the `WebglRenderer` and initialize the `scene`

With **TresJS** you only need to add the default component `<TresCanvas />` to the template of your Vue component.

```vue
<template>
  <TresCanvas> // Your scene is going to live here </TresCanvas>
</template>
```

::: warning
It's important that all components related to the scene live between the `<TresCanvas />` component. Otherwise, they will be not rendered.
:::

The `TresCanvas` component is going to do some setup work behind the scene:

- It automatically create a [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) and a perspective [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera) by default.
- It creates a [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) that automatically updates every frame.

### Adding a Sphere

That scene looks a litle empty, let's add a basic object. If we where using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:

```ts
const geometry = new THREE.SphereGeometry(2, 32, 16)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)
```

A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.

Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use `<Mesh />` component, and between the default slots, we are going to pass a `<SphereGeometry />` and a `<MeshBasicMaterial />`.

```vue
<template>
  <TresCanvas>
    <Mesh>
      <SphereGeometry />
      <MeshBasicMaterial />
    </Mesh>
  </TresCanvas>
</template>
```

::: info
Notice that we don't need to import anything, thats because **TresJS** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase**. For example, if you want to use a `AmbientLight` you would use `<AmbientLight />
:::

::: warning
We aware that **Volar** sometimes auto import the component from `three` as it was an object, which is going to generate an error. You don't need any import.
:::

<ClientOnly>
<TresCanvas alpha style="width:688px;  aspect-ratio: 16/9;">
<Mesh>
<SphereGeometry :args="[2, 32, 16]" />
<MeshBasicMaterial color="orange"/>
</Mesh>
</TresCanvas>

</ClientOnly>