Skip to content

TresCanvas

El componente TresCanvas es el componente principal de Tres. Es el que crea el WebGLRenderer de ThreeJS.

vue
<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

Tamaño del lienzo

El componente TresCanvas utilizará el tamaño del elemento padre como tamaño del lienzo. Si deseas utilizar el tamaño de la ventana como tamaño del lienzo, puedes establecer la propiedad window-size en true.

vue
<template>
  <TresCanvas window-size>
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

Or you can use CSS to set your canvas size.

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

Presets

Tres viene con algunos presets para el componente TresCanvas. Puedes usarlos estableciendo la propiedad preset.

Realista

El preset realista facilita la configuración del renderizador para escenas 3D más realistas.

vue
<template>
  <TresCanvas preset="realistic">
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

It's equivalent to:

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

PropDescripciónValor por defecto
alphaControla el valor alfa predeterminado. Cuando se establece en true, el valor es 0. De lo contrario, es 1.false
antialiasIndica si se debe realizar el antialiasing.true
cameraUna cámara manual que se utilizará por el renderizador.
clearColorEl color que el renderizador utilizará para borrar el lienzo.#000000
contextEsto se puede usar para adjuntar el renderizador a un RenderingContext existente.
depthIndica si el búfer de dibujo tiene un búfer de profundidad de al menos 16 bits.true
failIfMajorPerformanceCaveatIndica si la creación del renderizador fallará si se detecta un bajo rendimiento. Consulta la especificación de WebGL para más detalles.false
logarithmicDepthBufferIndica si se debe utilizar un búfer de profundidad logarítmico. Puede ser necesario utilizar esto si se manejan diferencias enormes de escala en una sola escena. Ten en cuenta que esta configuración utiliza gl_FragDepth si está disponible, lo cual deshabilita la optimización Early Fragment Test y puede causar una disminución en el rendimiento.false
outputColorSpaceDefine la codificación de salida.LinearEncoding
powerPreferenceProporciona una sugerencia al agente de usuario que indica qué configuración de GPU es adecuada para este contexto WebGL. Puede ser "high-performance", "low-power" o "default".default
precisionPrecisión del shader. Puede ser "highp", "mediump" o "lowp"."highp" si es compatible con el dispositivo
premultipliedAlphaIndica si el renderizador asumirá que los colores tienen alfa premultiplicado.true
preserveDrawingBufferIndica si se deben preservar los búferes hasta que se borren o se sobrescriban manualmente.false
shadowsHabilita las sombras en el renderizador.false
shadowMapTypeEstablece el tipo de mapa de sombras.PCFSoftShadowMap
stencilIndica si el búfer de dibujo tiene un búfer de stencil de al menos 8 bits.true
toneMappingDefine la exposición de mapeo de tonos utilizada por el renderizador.ACESFilmicToneMapping
toneMappingExposureNivel de exposición del mapeo de tonos.1
useLegacyLightsIndica si se debe utilizar el modo de iluminación heredado o no.true
windowSizeIndica si se debe utilizar el tamaño de la ventana como el tamaño del lienzo o el elemento padre.false

Valores predeterminados

Tres intenta ser lo menos opinado posible. Es por eso que no establece casi ningún valor predeterminado para el componente TresCanvas. Utiliza los valores predeterminados de three.js. La única excepción es la propiedad antialias, que se establece en true de forma predeterminada.

Propiedades públicas expuestas

PropiedadDescripción
contextver useTresContext