Skip to content

TresCanvas

Die TresCanvas Komponente ist die Hauptkomponente von Tres, welche den WebGLRenderer erstellt.

vue
<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- Deine Szene -->
  </TresCanvas>
</template>

Größe des Canvas

Die TresCanvas-Komponente verwendet die Größe des Elternelements als Leinwandgröße. Wenn du die Fenstergröße als Leinwandgröße verwenden möchtest, kannst du die Eigenschaft window-size auf true setzen.

vue
<template>
  <TresCanvas window-size>
    <!-- Deine Szene -->
  </TresCanvas>
</template>

Oder du setzt die canvas-size per CSS:

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

Presets

Tres bietet einige Voreinstellungen für die TresCanvas-Komponente. Du kannst sie nutzen, indem du die Eigenschaft preset verwendest.

Realistic

Das Voreinstellung realistic erleichtert die Konfiguration des Renderers für realistischere 3D-Szenen.

vue
<template>
  <TresCanvas preset="realistic">
    <!-- Deine Szene -->
  </TresCanvas>
</template>

Ist equivalent zu:

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

EigenschaftBeschreibungStandardwert
alphaSteuert den Standard-Alphawert. Wenn auf true gesetzt, ist der Wert 0. Andernfalls ist er 1.false
antialiasGibt an, ob Antialiasing durchgeführt werden soll.true
cameraEine manuelle Kamera, die vom Renderer verwendet wird.
clearColorDie Farbe, die der Renderer verwendet, um die Leinwand zu löschen.#000000
contextKann verwendet werden, um den Renderer an einen vorhandenen RenderingContext anzuhängen.
depthGibt an, ob der Zeichenpuffer einen Tiefenpuffer von mindestens 16 Bit hat.true
failIfMajorPerformanceCaveatGibt an, ob die Erstellung des Renderers fehlschlagen soll, wenn eine geringe Performance festgestellt wird. Siehe die WebGL-Spezifikation für weitere Details.false
logarithmicDepthBufferGibt an, ob ein logarithmischer Tiefenpuffer verwendet werden soll. Dies kann notwendig sein, wenn in einer einzigen Szene enorme Skalendifferenzen gehandhabt werden müssen. Beachte, dass diese Einstellung gl_FragDepth verwendet, wenn verfügbar, was die Optimierung Early Fragment Test deaktiviert und zu einer Performancesverminderung führen kann.false
outputColorSpaceDefiniert die Ausgabekodierung.LinearEncoding
powerPreferenceGibt einen Hinweis an den Benutzeragenten, welche GPU-Konfiguration für diesen WebGL-Kontext geeignet ist. Kann "high-performance", "low-power" oder "default" sein.default
precisionShader-Präzision. Kann "highp", "mediump" oder "lowp" sein."highp" wenn vom Gerät unterstützt
premultipliedAlphaGibt an, ob der Renderer annimmt, dass die Farben vormultipliziertes Alpha haben.true
preserveDrawingBufferGibt an, ob die Puffer erhalten bleiben sollen, bis sie manuell gelöscht oder überschrieben werden.false
shadowsAktiviert Schatten im Renderer.false
shadowMapTypeLegt den Typ der shadowMap fest.PCFSoftShadowMap
stencilGibt an, ob der Zeichenpuffer einen Stencil-Puffer von mindestens 8 Bit hat.true
toneMappingDefiniert das Tone-Mapping-Verfahren, das vom Renderer verwendet wird.ACESFilmicToneMapping
toneMappingExposureBelichtungslevel des Tone-Mappings.1
useLegacyLightsGibt an, ob der Legacy-Beleuchtungsmodus verwendet werden soll oder nicht.true
windowSizeGibt an, ob die Fenstergröße als Leinwandgröße oder die des Elternelements verwendet werden soll.false

Standardwerte

Tres versucht so unvoreingenommen wie möglich zu sein. Deshalb setzt es fast keine Standardwerte für die TresCanvas-Komponente. Es verwendet die Standardwerte von three.js. Die einzige Ausnahme ist die Eigenschaft antialias, die standardmäßig auf true gesetzt ist.

Öffentlich exportierte Properties

PropertyBeschreibung
contextsiehe useTresContext