Modelle laden

Alle Modelle, die in dieser Anleitung verwendet werden, stammen von Alvaro Saburido.

3D-Modelle sind in Hunderten von Dateiformaten verfügbar, jedes mit unterschiedlichen Zwecken, variierenden Eigenschaften und Komplexität.

In dieser Anleitung konzentrieren wir uns auf das Laden von gLTF-Modellen (GL Transmission Format), dem häufigsten Format für 3D-Modelle im Web.

Es gibt verschiedene Möglichkeiten, Modelle in TresJS zu laden.

WARNING

Bitte beachte, dass wir in den vorherigen Beispielen das "top-level" await verwendet haben. Stelle sicher, dass du es mit einer Suspense-Komponente umgibst.

Verwendung von useLoader

Das Composable useLoader ermöglicht es dir, jeden Typ von three.js-Loader und eine URL zum Laden der Ressource zu übergeben. Es gibt ein Promise mit der geladenen Ressource zurück.

Eine detaillierte Erklärung, wie useLoader verwendet wird, findest du in der Dokumentation von useLoader.

import { useLoader } from '@tresjs/core'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'

const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')

Dann kannst du die Szene des Modells in einer primitive-Komponente von TresJS übergeben, um sie zu rendern:

<primitive :object="scene" />

Die Komponente <primitive /> ist keine eigenständige Komponente im Quellcode von Tres. Stattdessen ist sie Teil der Kernfunktionalität von Tres. Wenn du <primitive> verwendest, wird dies zu einem Aufruf von createElement, der das entsprechende three.js-Objekt basierend auf der bereitgestellten "object"-Eigenschaft erstellt.

Beachte im obigen Beispiel, dass wir die Suspense-Komponente verwenden, um die TresCanvas-Komponente zu umgeben. Dies liegt daran, dass useLoader eine Promise zurückgibt und wir warten müssen, bis sie erfüllt ist, bevor wir die Szene rendern können.

Verwendung von useGLTF

Eine bequemere Möglichkeit, Modelle zu laden, ist die Verwendung des Composables useGLTF, das im Paket @tresjs/cientos verfügbar ist.

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')

Ein Vorteil der Verwendung von useGLTF ist, dass du eine draco-Eigenschaft übergeben kannst, um die Draco-Kompression für das Modell zu aktivieren. Dies wird die Größe des Modells reduzieren und die Performance verbessern.

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })

Alternativ kannst du Objekte innerhalb des Modells leicht mit der Eigenschaft nodes auswählen.

App.vue

<script setup lang="ts">
import Model from './Model.vue'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    alpha
  >
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <Model />
    </Suspense>
  </TresCanvas>
</template>

Model.vue

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

const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
</script>

<template>
  <primitive :object="node.AkuAku" />
</template>

Verwendung von GLTFModel

Die Komponente GLTFModel ist eine Hülle um useGLTF, die im Paket @tresjs/cientos verfügbar ist.

<script setup lang="ts">
import { OrbitControls, GLTFModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <GLTFModel path="/models/AkuAku.gltf" draco />
    </Suspense>
    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>

Dieser Ansatz ist zwar einfacher, bietet aber weniger Kontrolle über das Modell.

Verwendung von useFBX

Das Composable useFBX ist im Paket @tresjs/cientos verfügbar.

import { useFBX } from '@tresjs/cientos'

const model = await useFBX('/models/AkuAku.fbx')

Dann muss man nur das dem primitive das model zuweisen:

<primitive :object="model" />

Verwendung von FBXModel

Die Komponente FBXModel ist eine Hülle um useFBX, die im Paket @tresjs/cientos verfügbar ist. Ihre Verwendung ist ähnlich wie bei GLTFModel:

<script setup lang="ts">
import { OrbitControls, FBXModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
      <Suspense>
        <FBXModel path="/models/AkuAku.fbx" />
      </Suspense>
      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>