TresCanvas

Het onderdeel TresCanvas is de core van Tres. Het is degene die de ThreeJS WebGLRenderer creëert.

<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Canvas grootte

De component TresCanvas gebruikt de grootte van het parent element als canvasgrootte. Als je de window size als canvasgrootte wilt gebruiken, kun je de window-size prop op true zetten.

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

Of je kan CSS gebruiken om jouw canvasgrootte in te stellen.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#canvas {
  height: 100%;
  width: 100%;
}

Presets

Tres wordt geleverd met een paar presets voor de component TresCanvas. Je kunt ze gebruiken door de preset prop in te stellen.

Realistic

De realistic preset maakt het eenvoudig om de renderer in te stellen voor meer realistische 3D-scènes.

<template>
  <TresCanvas preset="realistic">
    <!-- Je scene komt hier -->
  </TresCanvas>
</template>

Het is gelijk aan:

renderer.shadows = true
renderer.physicallyCorrectLights = true
renderer.outputColorSpace = SRGBColorSpace
renderer.toneMapping = ACESFilmicToneMapping
renderer.toneMappingExposure = 3
renderer.shadowMap.enabled = true
renderer.shadowMap.type = PCFSoftShadowMap

Props

Prop	Beschrijving	Standaard
alpha	Beheert de standaardwaarde voor duidelijke alfa. Wanneer ingesteld op true, is de waarde 0. Anders is het 1.	false
antialias	Of anti-aliasing moet worden uitgevoerd.	true
camera	Een handmatige camera die door de renderer moet worden gebruikt.
clearColor	De kleur die de renderer gebruikt om het canvas leeg te maken.	#000000
context	Dit kan worden gebruikt om de renderer aan een bestaand RenderingContext te koppelen
depth	Of de drawing buffer een depth buffer heeft van tenminste 16 bits.	true
disableRender	Blokkeer render op requestAnimationFrame, handig voor PostProcessing	false
failIfMajorPerformanceCaveat	Er wordt gedetecteerd of het maken van de renderer zal mislukken bij lage prestaties. Zie WebGL spec for details.	false
logarithmicDepthBuffer	Of de logarithmic depth buffer gebruikt moet worden. Het kan zijn dat dit noodzakelijk is als je te maken hebt met flinke verschillen in scale in een enkele scene. Merk op dat deze setting gebruik maakt van gl_FragDepth wanneer deze beschikbaar is en deze schakelt Early Fragment Test uit en kan een verlies in prestaties veroorzaken.	false
outputColorSpace	Definieert de uitvoercodering	LinearEncoding
powerPreference	Geeft een hint aan de user-agent die aangeeft welke configuratie van GPU geschikt is voor deze WebGL-context. Kan "high-performance", "low-power" or "default" zijn.	default
precision	Shader presisie. Kan "highp", "mediump" or "lowp" zijn.	"highp" als deze is ondersteund door het apparaat
premultipliedAlpha	Of de renderer ervan uitgaat dat kleuren premultiplied alpha hebben.	true
preserveDrawingBuffer	Of de buffers moeten worden behouden totdat ze handmatig worden gewist of overschreven..	false
shadows	Schakelt shadows in de renderer in	false
shadowMapType	Zet de shadow map type	PCFSoftShadowMap
stencil	Of de drawing buffer een stencil buffer heeft van tenminste 8 bits.	true
toneMapping	Definiërt de tone mapping exposure gebruikt door de renderer.	ACESFilmicToneMapping
toneMappingExposure	Exposure level van tone mapping.	1
useLegacyLights	Of de legacy belichtingsmodus gebruikt moet worden of niet	true
windowSize	Of de window grootte gebruikt moet worden als de canvas grootte of de parent element.	false

Standaard waardes

Tres probeert zo min mogelijk een mening te hebben. Dat is de reden waarom het vrijwel geen standaardwaarde voor de TresCanvas-component instelt. Het gebruikt de standaardinstellingen van three.js. De enige uitzondering is de prop antialias. Die is standaard ingesteld op true.

Blootgestelde public eigenschappen

Eigenschap	Beschrijving
context	zie useTresContext