Modellen laden

Alle modellen in deze gids zijn van Alvaro Saburido.

3D-modellen zijn beschikbaar in honderden bestandsformaten, elk met verschillende doeleinden, diverse functies en variërende complexiteit.

Voor deze handleiding gaan we ons concentreren op het laden van gLTF-modellen (GL Transmission Format), het meest gebruikelijke formaat voor 3D-modellen op het web.

Er zijn meerdere manieren om modellen te laden in TresJS:

WARNING

Houd er rekening mee dat we in de bovenstaande voorbeelden awaits op het hoogste niveau gebruiken. Zorg ervoor dat dergelijke code wordt verpakt met een Suspense component. Zie Suspense voor meer informatie.

useLoader gebruiken

Met de useLoader composable kunt u elk type three.js-lader en een URL doorgeven waaruit de bron kan worden geladen. Het returned een Promise met de geladen bron.

Voor een gedetailleerde uitleg over het gebruik van useLoader, bekijk de useLoader documentatie.

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

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

Vervolgens kunt u de modelscène doorgeven aan een TresJS primitive component om deze te renderen:

<primitive :object="scene" />

De component <primitive /> is geen op zichzelf staande component in de Tres-broncode. In plaats daarvan maakt het deel uit van de kernfunctionaliteit van Tres. Wanneer u <primitive> gebruikt, wordt dit vertaald naar een createElement-aanroep, die het juiste three.js-object creëert op basis van de opgegeven "object"-prop.

Merk op dat we in het bovenstaande voorbeeld de component Suspense gebruiken om de component TresCanvas te wrappen. Dit komt omdat useLoader een Promise returned en we moeten wachten tot dit is resolved voordat de scène wordt weergegeven.

useGLTF gebruiken

Een gemakkelijkere manier om modellen te laden is het gebruik van de useGLTF composable die beschikbaar is in het pakket @tresjs/cientos.

import { useGLTF } from '@tresjs/cientos'

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

Een voordeel van het gebruik van useGLTF is dat je een draco prop kunt doorgeven om Draco-compressie in te schakelen voor het model. Hierdoor wordt de grootte van het model kleiner en worden de prestaties verbeterd.

import { useGLTF } from '@tresjs/cientos'

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

Als alternatief kunt u eenvoudig objecten binnen het model selecteren met behulp van de eigenschap nodes.

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>

GLTFModel gebruiken

De component GLTFModel is een wrapper rond de useGLTF composable, die beschikbaar is via het pakket @tresjs/cientos.

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

Deze specifieke aanpak is eenvoudiger, maar geeft u minder controle over het model.

useFBX

De useFBX composable is beschikbaar via de @tresjs/cientos package.

import { useFBX } from '@tresjs/cientos'

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

Dan is het net zo eenvoudig als het toevoegen van de scène aan uw scène:

<primitive :object="model" />

FBXModel

De component FBXModel is een wrapper rond de useFBX composable, die beschikbaar is via het pakket @tresjs/cientos. Het is vergelijkbaar in gebruik met 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>