Je eerste scene

Deze gids zal jou helpen om je eerste Tres scene te maken. 🍩

De Canvas eexperience opzetten

Voordat we een ThreeJS Scene kunnen maken, hebben we ruimte nodig om deze weer te geven. Met gewoon ThreeJS zouden we een canvas HTML-element moeten maken om de WebglRenderer te mounten en de Scène te initialiseren.

Met TresJS hoef je alleen de standaardcomponent <TresCanvas /> te importeren en toe te voegen aan de template van uw Vue-component.

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

<template>
  <TresCanvas window-size>
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

WARNING

Het is belangrijk dat alle componenten die verband houden met de scène zich tussen de component <TresCanvas /> bevinden. Anders worden ze niet weergegeven.

De TresCanvas component gaat achter de schermen wat instellingswerk doen:

• Het creëert een WebGLRenderer die elk frame automatisch bijwerkt.
• Het stelt de render loop in die op elk frame moet worden aangeroepen op basis van de refresh rate van de browser.

Canvas grootte

Standaard neemt de component TresCanvas de parent breedte en hoogte over. Als u een lege pagina ervaart, zorg er dan voor dat het bovenliggende element de juiste grootte heeft.

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

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

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
}
</style>

Als je scène geen deel gaat uitmaken van een UI, dan kun je het canvas ook dwingen de breedte en hoogte van het volledige venster te nemen door de window-size prop als volgt te gebruiken:

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

<template>
  <TresCanvas window-size>
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Een scene maken

We hebben 4 kernelementen nodig om een 3D-ervaring te creëren:

• Een Scene die de camera en objecten samen houd.
• Een Renderer om de scene in de DOM te renderen.
• Een Camera
• Een Object

Met TresJS hoeft u alleen de component <TresCanvas /> toe te voegen aan de template van uw Vue-component en deze zal automatisch een Renderer (canvas DOM-element) en Scene voor u maken.

<template>
  <TresCanvas window-size>
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Vervolgens kunt u een PerspectiveCamera toevoegen met behulp van de <TresPerspectiveCamera /> component.

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
  </TresCanvas>
</template>

WARNING

Een veel voorkomend probleem is dat de standaardpositie van de camera de oorsprong van de scène is (0,0,0). TresJS zal de positie van uw camera automatisch instellen op [3,3,3] als de prop position niet door u is ingesteld. Als er in uw scène geen camera is gedefinieerd, wordt er automatisch een perspectiefcamera toegevoegd.

Een 🍩 toevoegen

Die scène ziet er een beetje leeg uit, laten we een basisobject toevoegen. Als we gewoon ThreeJS zouden gebruiken, zouden we een Mesh object moeten maken, er een Materiaal aan toe moeten voegen en een Geometrie zoals dit:

const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const donut = new THREE.Mesh(geometry, material)
scene.add(donut)

Een Mesh is een basisscèneobject in three.js en wordt gebruikt om de geometrie en het materiaal vast te houden dat nodig is om een vorm in de 3D-ruimte weer te geven.

Laten we nu eens kijken hoe we gemakkelijk hetzelfde kunnen bereiken met TresJS. Om dat te doen gaan we de <TresMesh /> component gebruiken, en tussen de standaard slots gaan we een <TresTorusGeometry /> en een <TresMeshBasicMaterial /> component doorgeven.

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>

INFO

Merk op dat we niets hoeven te importeren, omdat TresJS automatisch een Vue-component genereert op basis van de drie objecten die u in CamelCase wilt gebruiken met een Tres-voorvoegsel. Als u bijvoorbeeld een 'AmbientLight' wilt gebruiken, gebruikt u de component <TresAmbientLight />.

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

<template>
  <TresCanvas
    clear-color="#82DBC5"
    window-size
  >
    <TresPerspectiveCamera
      :position="[3, 3, 3]"
      :look-at="[0, 0, 0]"
    />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

Vanaf hier kunt u beginnen met het toevoegen van meer objecten aan uw scène en beginnen met spelen met de eigenschappen van de componenten om te zien hoe deze de scène beïnvloeden.