Deine erste Szene

Dieser Leitfaden hilft dir, deine erste Szene in Tres zu erstellen. 🍩

Das Canvas einrichten

Bevor wir eine Szene erstellen können, benötigen wir einen Ort, um sie anzuzeigen. Würden wir nur reines Three.js verwenden, müssten wir ein HTML-canvas-Element erstellen, um mit dem WebglRenderer eine scene zu initialisieren.

Mit TresJS kannst du direkt die Standardkomponente <TresCanvas /> importieren und sie zum Template deiner Vue-Komponente hinzufügen.

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

<template>
  <TresCanvas window-size>
    <!-- Deine Szene lebt hier -->
  </TresCanvas>
</template>

WARNING

Es ist wichtig, dass alle mit der Szene verbundenen Komponenten innerhalb der -Komponente sind. Andernfalls werden sie nicht gerendert.

Die TresCanvas-Komponente führt einige Konfigurationen im Hintergrund durch:

Sie erstellt einen WebGLRenderer, der sich automatisch bei jedem Frame aktualisiert. Und sie stellt den Rendering-Loop so ein, dass er bei jedem Frame basierend auf der Bildwiederholrate des Browsers aufgerufen wird.

Leinwandgröße

Standardmäßig nimmt die TresCanvas-Komponente die Breite und Höhe des Elternelements an. Wenn du eine leere Seite erhälst, muss das Elternelement eine angemessene Größe haben.

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

<template>
  <TresCanvas>
    <!-- Deine Szene lebt hier -->
  </TresCanvas>
</template>

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

Wenn deine Szene nicht Teil einer Benutzeroberfläche sein wird, kannst du auch die gesamte Breite und Höhe des Fensters mit der Eigenschaft window-size nutzen:

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

<template>
  <TresCanvas window-size>
    <!-- Deine Szene lebt hier -->
  </TresCanvas>
</template>

Eine Szene erstellen

Wir benötigen 4 Hauptelemente, um ein 3D-Erlebnis zu erstellen:

• Eine Szene um die Kamera und Objekte zusammen zu halten.
• Einen Renderer, um die Szene im DOM zu rendern.
• Eine Kamera
• Ein Objekt

Mit TresJS musst du nur die <TresCanvas />-Komponente zum Template deiner Vue-Komponente hinzufügen, und sie erstellt automatisch einen Renderer (DOM-canvas-Element) und eine Szene für dich.

<template>
  <TresCanvas window-size>
    <!-- Hier lebt deine Szene! -->
  </TresCanvas>
</template>

Dann kannst du eine PerspectiveCamera mit der Komponente <TresPerspectiveCamera /> hinzufügen.

WARNING

Ein häufiges Problem ist, dass die Standardposition der Kamera der Ursprung der Szene (0,0,0) ist. TresJS wird die Position deiner Kamera automatisch auf [3,3,3] setzen, wenn die position-Eigenschaft nicht definiert ist. Wenn in deiner Szene keine Kamera definiert ist, wird automatisch eine Perspektivkamera hinzugefügt.

Einen 🍩 hinzufügen

Die Szene sieht ein wenig leer aus, fügen wir also ein Objekt hinzu. Wenn wir reines Three.js verwenden würden, müssten wir ein Mesh-Objekt erstellen und ihm ein Material sowie eine Geometrie wie folgt anhängen:

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)

Ein Mesh ist ein grundlegendes Szenenobjekt in three.js und wird verwendet, um die Geometrie und das Material zu bündeln, die benötigt werden, um eine Form im 3D-Raum darzustellen.

Jetzt sehen wir, wie wir dasselbe mit TresJS erreichen können. Dazu verwenden wir die Komponente <TresMesh /> und fügen im Standard-Slot eine <TresTorusGeometry /> und ein <TresMeshBasicMaterial /> ein.

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

INFO

Beachte, dass wir nichts importieren müssen, da TresJS automatisch eine Vue-Komponente basierend auf dem Three-Objekt, das du verwenden möchtest, im PascalCase mit einem Tres-Prefix generiert. Wenn du zum Beispiel ein AmbientLight verwenden möchtest, würdest du die TresAmbientLight-Komponente nutzen.

<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>

Von hier aus kannst du mehr Objekte zu deiner Szene hinzufügen und mit den Eigenschaften der Komponenten spielen, um zu sehen, wie sie die Szene beeinflussen.