Skip to content

TresCanvas

Le composant TresCanvas est le composant principal de Tres. C'est celui qui crée le WebGLRenderer ThreeJS.

vue
<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- Votre scène -->
  </TresCanvas>
</template>

Taille du canva

Le composant TresCanvas utilisera la taille de l'élément parent comme taille du canevas. Si vous souhaitez utiliser la taille de la fenêtre comme taille du canevas, vous pouvez définir la propriété « window-size » sur « true »

vue
<template>
  <TresCanvas window-size>
    <!-- Votre scène -->
  </TresCanvas>
</template>

Ou vous pouvez utiliser CSS pour définir la taille de votre canevas.

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

Presets

Tres est livré avec quelques préréglages pour le composant TresCanvas. Vous pouvez les utiliser en définissant la propriété preset.

Réaliste

Le preset réaliste facilite la configuration du moteur de rendu pour des scènes 3D plus réalistes.

vue
<template>
  <TresCanvas preset="realistic">
    <!-- Votre scène -->
  </TresCanvas>
</template>

C'est équivalent à:

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

PropDescriptionValeur par défaut
alphaContrôle la valeur alpha par défaut. Lorsqu'elle est définie sur true, la valeur est 0. Sinon, elle est 1.false
antialiasIndique si un anticrénelage doit être effectué.true
cameraUne caméra manuelle à utiliser par le moteur de rendu.
clearColorLa couleur que le moteur de rendu utilisera pour effacer le canevas.#000000
contextCeci peut être utilisé pour attacher le moteur de rendu à un RenderingContext existente.
depthIndique si le tampon de dessin a une profondeur du tampon de au moins 16 bits.true
failIfMajorPerformanceCaveatIndique si la création du moteur de rendu échouera si de mauvaises performances sont détectées. Voir la spécification WebGL para más detalles.false
logarithmicDepthBufferIndique s’il faut utiliser un tampon de profondeur logarithmique. Il peut être nécessaire de l'utiliser s'il s'agit de différences d'échelle énormes dans une seule scène. Notez que ce paramètre utilise gl_FragDepth s'il est disponible, ce qui désactive l'optimisation Early Fragment Test et peut entraîner une baisse des performances.false
outputColorSpaceDéfinit l'encodage de sortie.LinearEncoding
powerPreferenceFournit un indice à l'agent utilisateur indiquant quelle configuration GPU est appropriée pour ce contexte WebGL. Il peut être « haute performance », « faible consommation » ou « par défaut ».default
precisionPrécision du shader. Il peut être « élevé », « moyen » ou « faible »."highp" si pris en charge par l'appareil
premultipliedAlphaIndique si le moteur de rendu supposera que les couleurs ont alpha prémultiplié.true
preserveDrawingBufferIndique si les tampons doivent être conservés jusqu'à ce qu'ils soient effacés ou écrasés manuellement.false
shadowsActivez les ombres dans le moteur de rendu.false
shadowMapTypeDéfinit le type de carte d'ombrage.PCFSoftShadowMap
stencilIndique si le tampon de dessin possède un tampon de pochoir de au moins 8 bits.true
toneMappingDéfinit l’exposition du mappage de tons utilisée par le moteur de rendu.ACESFilmicToneMapping
toneMappingExposureNiveau d'exposition du mappage de tons.1
useLegacyLightsIndique s’il faut utiliser ou non le mode d’éclairage existant.true
windowSizeIndique s’il faut utiliser la taille de la fenêtre comme taille du canevas ou de l’élément parent.false

Valeurs par défaut

Tres essaie d’être aussi neutre que possible. C'est pourquoi il ne définit presque aucune valeur par défaut pour le composant TresCanvas. Utilisez les valeurs par défaut de Three.js. La seule exception est la propriété « antialias », qui est définie par défaut sur « true ».

Propriétés publiques exposées

PropriétéDescriptif
contextvoir useTresContext