# Instanties

Het kernidee van **Tres** is een _autogenerated catalogue_ van alle ThreeJS-elementen. Deze catalogus wordt gegenereerd op basis van de ThreeJS-broncode en is dus altijd up-to-date.

Wanneer je ThreeJS gebruikt, moet u de elementen importeren die u wilt gebruiken. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, moet je deze importeren uit het `three`-pakket:

```js
import { PerspectiveCamera } from 'three'

const camera = new PerspectiveCamera(45, width / height, 1, 1000)
```

Met **Tres** hoef je niets te importeren, omdat **Tres** automatisch een **Vue-component genereert op basis van de drie objecten die je in PascalCase wilt gebruiken met een Tres-voorvoegsel**. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, gebruikt je de component '`<TresPerspectiveCamera />`.

```vue
<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>
```
Dit betekent dat je dezelfde [documentatie](https://threejs.org/docs/) kunt gebruiken als wanneer je gewone ThreeJS gebruikt, maar met de kracht van Vue.

## Objecten declareren

Als we dit argument volgen, zou je een instantie als volgt moeten kunnen opmaken: ❌

```vue
<template>
  <TresCanvas>
    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
    <!-- Your scene goes here -->
  </TresCanvas>
</template>
```
Maar met **Tres** is dit niet nodig. U kunt eigenschappen declaratief als volgt definiëren: ✅

```vue
<template>
  <TresCanvas>
    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
    <!-- Your scene goes here -->
  </TresCanvas>
</template>
```

## Argumenten

Sommige ThreeJS-objecten hebben argumenten, de constructor `PerspectiveCamera` heeft bijvoorbeeld de volgende argumenten:

- `fov` - Camera frustum vertical field of view.
- `aspect` - Camera frustum aspect ratio.
- `near` - Camera frustum near plane.
- `far` - Camera frustum far plane.

Om deze argumenten door te geven aan de `TresPerspectiveCamera` component, kunt je de `args` prop gebruiken:

```vue
<template>
  <TresCanvas>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>
```

Dit is hetzelfde als dit doen:

```ts
const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
```

## Eigenschappen

Je kunt ook eigenschappen aan het component doorgeven. De `TresAmbientLight` heeft bijvoorbeeld een `intensity` eigenschap, dus je kunt deze als volgt aan de component doorgeven:

```html
<TresAmbientLight :intensity="0.5" />
```

### Set

Alle eigenschappen waarvan het onderliggende object een `.set()`-methode heeft, hebben een snelkoppeling om de waarde als een array te ontvangen. De `TresPerspectiveCamera` heeft bijvoorbeeld de eigenschap `position`, wat een `Vector3`-object is, dus je kunt deze als volgt aan de component doorgeven:

```html
<TresPerspectiveCamera :position="[1, 2, 3]" />
```

Om transformatie-eigenschappen zoals positie, rotatie en schaal te specificeren, is er een afkorting beschikbaar waarmee u direct de assen kunt aangeven die u binnen de props wilt instellen. Een soortgelijke afkorting is ook beschikbaar voor de kleureigenschap.

<!-- Ik heb de kleursyntaxis gewijzigd van vue naar html, omdat vue defect lijkt en geneste componenten niet kleurt -->
```html
<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
</TresMesh>
```

::: warning
Wanneer u de rotatie-eigenschap instelt in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), wordt standaard de volgorde 'XYZ' gebruikt.
Het is belangrijk op te merken dat bij het instellen van de rotatie-eigenschap met de afkorting de volgorde waarin u de hoeken instelt van belang is. Voor meer informatie over dit onderwerp verwijzen wij je naar [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
:::

```vue
<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />

<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />

<!-- Merk op dat de volgorde van de rotatie-eigenschappen van belang is, en het verwisselen van de volgorde kan tot verschillende uitkomsten leiden. -->
```

### Scalar

Een andere snelkoppeling die u kunt gebruiken is het doorgeven van een scalar waarde aan een eigenschap die een `Vector3`-object verwacht, waarbij u dezelfde waarde gebruikt voor de rest van de vector:

```html
<TresPerspectiveCamera :position="5" /> ✅
```

```html
<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
```

### Kleuren

Je kan kleuren aan de componenten doorgeven met behulp van de `color` prop, die een string met de kleurnaam of een hexadecimale waarde accepteert:

```html
<TresAmbientLight color="teal" /> ✅
```

```html
<TresAmbientLight color="#008080" /> ✅
```

### Methodes

Sommige onderliggende eigenschappen zijn eigenlijk methoden, de `TresPerspectiveCamera` heeft een `lookAt`-methode die is overgenomen van [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), dus je kan deze de coordinaten naar het component doorgeven als volgt:

```html
<TresPerspectiveCamera :look-at="[1, 2, 3]" />
```