Primitives

De component <primitive /> is een veelzijdige component op laag niveau in TresJS waarmee u elk three.js-object direct kunt gebruiken binnen uw Vue-applicatie zonder abstractie. Het fungeert als een brug tussen het reactiviteitssysteem van Vue en de scènegrafiek van three.js.

Gebruik

<script setup lang="ts">
  // Importeer de benodigde three.js-klassen
  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'

  // Maak een doosgeometrie en een basismateriaal
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshBasicMaterial({ color: 0x00ff00 })

  // Maak een mesh met de geometrie en het materiaal
  const meshWithMaterial = new Mesh(geometry, material)
</script>

<template>
  <TresCanvas>
    <primitive :object="meshWithMaterial" />
  </TresCanvas>
</template>

Props

object: Deze prop verwacht een three.js Object3D of een van de afgeleide klassen ervan. Het is het primaire object dat de component <primitive /> zal weergeven. In het bijgewerkte voorbeeld wordt een Mesh-object met een bijbehorend Materiaal aan dit prop doorgegeven.

Gebruik met modellen

De component <primitive /> is vooral handig voor het renderen van complexe objecten, zoals modellen die vanuit externe bronnen zijn geladen. Het volgende voorbeeld laat zien hoe u een model uit een GLTF-bestand laadt en het rendert met behulp van de <primitive /> component.

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

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

<TresCanvas>
  <Suspense>
    <primitive :object="nodes.AkuAku" />
  </Suspense>
</TresCanvas>