Charger des Modèles

Tous les modèles utilisés dans ce guide proviennent de Alvaro Saburido.

Les modèles 3D sont disponibles dans des centaines de formats de fichiers, chacun ayant des objectifs différents, des fonctionnalités variées et une complexité variable.

Pour ce guide, nous allons nous concentrer sur le téléchargement de modèles gLTF (GL Transmission Format), qui sont le format le plus courant pour les modèles 3D sur le Web.

Il existe plusieurs façons de charger des modèles dans TresJS :

WARNING

Veuillez noter que dans les exemples ci-dessus, nous avons utilisé l'attente de niveau supérieur, assurez-vous de l'envelopper avec un composant Suspense. Voir Suspense pour plus d'informations.

Avec useLoader

Le composable useLoader vous permet de transmettre n'importe quel type de loader three.js et une URL pour charger la ressource. Renvoie une « Promesse » avec la ressource chargée.

Pour une explication détaillée de la façon d'utiliser useLoader, consultez la documentation useLoader.

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

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

Ensuite, vous pouvez transmettre la scène du modèle à un composant primitive de TresJS pour le restituer:

<primitive :object="scene" />

Le composant <primitive /> n'est pas un composant autonome dans le code source de Tres. Au lieu de cela, cela fait partie des fonctionnalités de base de Tres. Lorsque vous utilisez <primitive>, cela se traduit par un appel à createElement, qui crée l'objet three.js approprié en fonction de la propriété "object" fournie.

Notez dans l'exemple ci-dessus que nous utilisons le composant Suspense pour envelopper le composant TresCanvas. En effet, useLoader renvoie une Promesse et nous devons attendre qu'elle soit résolue avant de restituer la scène.

Avec useGLTF

Un moyen plus pratique de charger des modèles consiste à utiliser le composable useGLTF disponible dans le package @tresjs/cientos.

import { useGLTF } from '@tresjs/cientos'

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

Un avantage de l'utilisation de useGLTF est que vous pouvez transmettre une propriété draco pour activer la compression Draco pour le modèle. Cela réduira la taille du modèle et améliorera les performances.

import { useGLTF } from '@tresjs/cientos'

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

Alternativement, vous pouvez facilement sélectionner des objets dans le modèle à l'aide de la propriété 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>

Avec GLTFModel

Le composant GLTFModel est un wrapper autour de useGLTF qui est disponible dans le package @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>

Cette approche particulière est plus simple mais vous donne moins de contrôle sur le modèle.

useFBX

Le composable useFBX est disponible dans le package @tresjs/cientos.

import { useFBX } from '@tresjs/cientos'

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

Ensuite, c'est aussi simple que d'ajouter la scène à votre scène :

<primitive :object="model" />

FBXModel

Le composant FBXModel est un wrapper autour de useFBX qui est disponible dans le package @tresjs/cientos. Son utilisation est similaire à celle de 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>