Instanties

Het kernidee van Tres is een autogenerated catalogue van alle ThreeJS-elementen. Deze catalogus wordt gegenereerd op basis van de ThreeJS-broncode en is dus altijd up-to-date.

Wanneer je ThreeJS gebruikt, moet u de elementen importeren die u wilt gebruiken. Als je bijvoorbeeld een PerspectiveCamera wilt gebruiken, moet je deze importeren uit het three-pakket:

import { PerspectiveCamera } from 'three'

const camera = new PerspectiveCamera(45, width / height, 1, 1000)

Met Tres hoef je niets te importeren, omdat Tres automatisch een Vue-component genereert op basis van de drie objecten die je in PascalCase wilt gebruiken met een Tres-voorvoegsel. Als je bijvoorbeeld een PerspectiveCamera wilt gebruiken, gebruikt je de component '<TresPerspectiveCamera />.

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Dit betekent dat je dezelfde documentatie kunt gebruiken als wanneer je gewone ThreeJS gebruikt, maar met de kracht van Vue.

Objecten declareren

Als we dit argument volgen, zou je een instantie als volgt moeten kunnen opmaken: ❌

<template>
  <TresCanvas>
    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

Maar met Tres is dit niet nodig. U kunt eigenschappen declaratief als volgt definiëren: ✅

<template>
  <TresCanvas>
    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

Argumenten

Sommige ThreeJS-objecten hebben argumenten, de constructor PerspectiveCamera heeft bijvoorbeeld de volgende argumenten:

• fov - Camera frustum vertical field of view.
• aspect - Camera frustum aspect ratio.
• near - Camera frustum near plane.
• far - Camera frustum far plane.

Om deze argumenten door te geven aan de TresPerspectiveCamera component, kunt je de args prop gebruiken:

<template>
  <TresCanvas>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Dit is hetzelfde als dit doen:

const camera = new PerspectiveCamera(45, 1, 0.1, 1000)

Eigenschappen

Je kunt ook eigenschappen aan het component doorgeven. De TresAmbientLight heeft bijvoorbeeld een intensity eigenschap, dus je kunt deze als volgt aan de component doorgeven:

<TresAmbientLight :intensity="0.5" />

Set

Alle eigenschappen waarvan het onderliggende object een .set()-methode heeft, hebben een snelkoppeling om de waarde als een array te ontvangen. De TresPerspectiveCamera heeft bijvoorbeeld de eigenschap position, wat een Vector3-object is, dus je kunt deze als volgt aan de component doorgeven:

<TresPerspectiveCamera :position="[1, 2, 3]" />

Om transformatie-eigenschappen zoals positie, rotatie en schaal te specificeren, is er een afkorting beschikbaar waarmee u direct de assen kunt aangeven die u binnen de props wilt instellen. Een soortgelijke afkorting is ook beschikbaar voor de kleureigenschap.

<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
</TresMesh>

WARNING

Wanneer u de rotatie-eigenschap instelt in three.js, wordt standaard de volgorde 'XYZ' gebruikt. Het is belangrijk op te merken dat bij het instellen van de rotatie-eigenschap met de afkorting de volgorde waarin u de hoeken instelt van belang is. Voor meer informatie over dit onderwerp verwijzen wij je naar Euler angles

<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />

<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />

<!-- Merk op dat de volgorde van de rotatie-eigenschappen van belang is, en het verwisselen van de volgorde kan tot verschillende uitkomsten leiden. -->

Scalar

Een andere snelkoppeling die u kunt gebruiken is het doorgeven van een scalar waarde aan een eigenschap die een Vector3-object verwacht, waarbij u dezelfde waarde gebruikt voor de rest van de vector:

<TresPerspectiveCamera :position="5" /> ✅

<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅

Kleuren

Je kan kleuren aan de componenten doorgeven met behulp van de color prop, die een string met de kleurnaam of een hexadecimale waarde accepteert:

<TresAmbientLight color="teal" /> ✅

<TresAmbientLight color="#008080" /> ✅

Methodes

Sommige onderliggende eigenschappen zijn eigenlijk methoden, de TresPerspectiveCamera heeft een lookAt-methode die is overgenomen van Object3d, dus je kan deze de coordinaten naar het component doorgeven als volgt:

<TresPerspectiveCamera :look-at="[1, 2, 3]" />