Votre première scene

Ce guide a pour but de vous aider à construire votre première scène avec Tres. 🍩

Configuration du Canvas

Avant de pouvoir créer un scène, nous avons besoin d'un espace où l'afficher. Avec ThreeJS tel quel, nous aurions besoin de créer un élément HTML canvas pour monter le WebglRenderer afin d'initialiser la scène.

Avec TresJS, il vous faut simplement importer le composant prédéfini <TresCanvas /> et l'ajouter au template de votre composant Vue.

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas window-size>
    <!-- Votre scène ici -->
  </TresCanvas>
</template>

::: Attention : Il est important que tous les composants relatifs à la scène soient à l'intérieur de la balise <TresCanvas />. Dans le cas contraire, ils ne seront pas affichés lors du rendu. :::

Le composant TresCanvas s'occupe de certaines configurations pour vous:

• Il crée un WebGLRenderer qui s'actualise à chaque image.
• Il définit la boucle de rendu à appeler à chaque image en fonction du taux de rafraîchissement du navigateur.

Taille du TresCanvas

Par défaut, le composant TresCanvas prendra la hauteur et la largeur de l'élément parent. Si vous vous retrouvez avec une page blanche, assurez vous que l'élément parent possède bien une taille définie.

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>
    <!-- Votre scène ici -->
  </TresCanvas>
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
}
</style>

Si votre scène ne fait pas partie de votre UI, vous pouvez forcer le canvas à prendre la taille de la fenêtre entière en utilisant window-size comme cela:

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas window-size>
    <!-- Votre scène ici -->
  </TresCanvas>
</template>

Créer une scène

Nous avons besoin de 4 éléments principaux pour créer une expérience 3D:

• Une scène pour contenir la caméra et le/les objet(s).
• Un moteur de rendu pour faire le rendu de la scene dans le DOM.
• Une caméra
• Un Objet

Avec TresJS, il vous suffit d'ajouter le composant <TresCanvas /> au template de votre composant Vue et il créera automatiquement un moteur de rendu (élément DOM canvas) et une scène pour vous.

<template>
  <TresCanvas window-size>
    <!-- Votre scène ici -->
  </TresCanvas>
</template>

Ensuite, vous pouvez ajouter une PerspectiveCamera en utilisant le composant <TresPerspectiveCamera />.

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
  </TresCanvas>
</template>

::: Attention : Un problème commun est que la position par défaut de la caméra se trouve être l'origine de la scène (0,0,0). TresJS va donc automatiquement positionner la caméra en [3,3,3] si la propriété position n'est pas définie. Si aucune caméra n'est définie dans votre scène, il se chargera automatiquement de mettre une PerspectiveCamera. :::

Ajouter un 🍩

Cette scène semble un peu vide, nous allons y ajouter un objet basique. Si nous utilisions du ThreeJS pur, nous aurions besoin de créer un objet Mesh et d'y ajouter un Material et une Geometry comme ceci:

const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const donut = new THREE.Mesh(geometry, material)
scene.add(donut)

Un Mesh est un objet basique de la scène en three.js, son rôle est de contenir la geometry et le material pour représenter une forme dans un espace 3D.

Maintenant, voyons à quel point il peux être simple de faire la même chose avec TresJS. Pour ce faire, nous allons utiliser le composant <TresMesh /> et entre les balises, nous allons y mettre un <TresTorusGeometry /> et un <TresMeshBasicMaterial />.

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>

::: Info : Comme vous l'aurez surement constaté, nous n'avons rien besoin d'importer, car TresJS genère automatiquement un composant Vue basé sur l'objet Three que vous souhaitez en PascalCase avec le préfixe Tres. Par exemple, si vous voulez une AmbientLight, vous pouvez utiliser le composant <TresAmbientLight />. :::

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    window-size
  >
    <TresPerspectiveCamera
      :position="[3, 3, 3]"
      :look-at="[0, 0, 0]"
    />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

À partir de là, vous pouvez commencer à ajouter plus d'objets à votre scène et jouer avec les propriétés des composants pour voir comment ils affectent la scène.