Skip to content

TresCanvas

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

vue
<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.

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

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

css
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.

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

Het is gelijk aan:

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

Props

PropBeschrijvingStandaard
alphaBeheert de standaardwaarde voor duidelijke alfa. Wanneer ingesteld op true, is de waarde 0. Anders is het 1.false
antialiasOf anti-aliasing moet worden uitgevoerd.true
cameraEen handmatige camera die door de renderer moet worden gebruikt.
clearColorDe kleur die de renderer gebruikt om het canvas leeg te maken.#000000
contextDit kan worden gebruikt om de renderer aan een bestaand RenderingContext te koppelen
depthOf de drawing buffer een depth buffer heeft van tenminste 16 bits.true
disableRenderBlokkeer render op requestAnimationFrame, handig voor PostProcessingfalse
failIfMajorPerformanceCaveatEr wordt gedetecteerd of het maken van de renderer zal mislukken bij lage prestaties. Zie WebGL spec for details.false
logarithmicDepthBufferOf 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
outputColorSpaceDefinieert de uitvoercoderingLinearEncoding
powerPreferenceGeeft 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
precisionShader presisie. Kan "highp", "mediump" or "lowp" zijn."highp" als deze is ondersteund door het apparaat
premultipliedAlphaOf de renderer ervan uitgaat dat kleuren premultiplied alpha hebben.true
preserveDrawingBufferOf de buffers moeten worden behouden totdat ze handmatig worden gewist of overschreven..false
shadowsSchakelt shadows in de renderer infalse
shadowMapTypeZet de shadow map typePCFSoftShadowMap
stencilOf de drawing buffer een stencil buffer heeft van tenminste 8 bits.true
toneMappingDefiniërt de tone mapping exposure gebruikt door de renderer.NoToneMapping
toneMappingExposureExposure level van tone mapping.1
useLegacyLightsOf de legacy belichtingsmodus gebruikt moet worden of niettrue
windowSizeOf 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

EigenschapBeschrijving
contextzie useTresContext