> For the complete documentation index, see [llms.txt](https://docs.plume.moe/norska/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.plume.moe/norska/getting-started/quick-start.md).

# Quick Start

## Initializing a canvas <a href="#declaring-data" id="declaring-data"></a>

```html
<div x-3.canvas></div>
```

To create a Threejs scene in our document, we need to initialize a Canvas, for this it is possible to use `x-3.canvas` which will create a basic scene, a camera, and a renderer with each of the default parameters that can be adjusted.

## Populating our scene

There are many ways to fill your scene, but we'll keep it simple for now.

Let's start with a cube.

{% hint style="info" %}
The hierarchy of the scene is the same as that of the HTML blocks in `x-3.canvas.` A good way to do this is to use `<div>` for elements with children, and void elements like `<br/>` for the rest.
{% endhint %}

We declare a mesh with `x-3.mesh`, then we can attach a geometry and a material with the corresponding directives.

```html
<div x-data>
    <div x-3.canvas>
        <div x-3.mesh>
            <br         
                x-3.boxGeometry
                x-3.attach.geometry
            />
            <br         
                x-3.meshBasicMaterial="{color: 0xff0000}"
                x-3.attach.material
            />
        </div>
    </div>
</div>
```