Tresjs/docs/es/api/renderer.md

Renderer

El componente Renderer es el componente principal de TresJs. Es eso que crea TresJs WebGLRenderer y define tu escena de TresJs.

<template>
  <TresCanvas shadows>
    <TresPerspectiveCamera />
      <!-- Your scene goes here -->
  </TresCanvas>
</template>

Canvas size

El componente Renderer usará el tamaño del componente su padre. Si deseas usar el total del tamaño disponible del viewport, puedes usar la propiedad window-size

<template>
  <TresCanvas window-size>
    <!-- Tu escena va aquí -->
  </TresCanvas>
</template>

O puedes usar CSS para configurar el tamaño de tu app

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
  background-color: #000;
}

Presets

Tresjs viene con algunas configuraciones listas para ti, y que puedes usar en el renderer. Puedes usarlas configurando el prop preset

Realistic

El realistic preset configura tu renderer para escenas mas realistas en 3D.

<template>
  <TresCanvas preset="realistic">
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

Es equivalente a:

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	Descripción	Defacto
shadows	Habilitar sombras en el Renderer	false
shadowMapType	Poner el tipo del mapa de la sombra	PCFSoftShadowMap
physicallyCorrectLights	Si usará el modo de luz que es físicamente correcto. Ver lights / physical example.	false
outputEncoding	Definer el output encoding	LinearEncoding
toneMapping	Definer la exposición de mapping tone usado por renderer.	NoToneMapping
context	Se puede usar eso para pegar el renderer al RenderingContext que ya existe.
powerPreference	Provee una pista al navegador que indica que configuración de GPU es apto para este contexto WebGL. Puede ser "high-performance", "low-power" o "default".	default
preserveDrawingBuffer	Si preserva los buffers hasta que se despeja manualmente o son sobre escritos.	false
clearColor	El color que el renderer usará para en el canvas.	#000000
windowSize	Si usa el tamaño del viewport como el tamaño del canvas o el elemento padre.	false
disableRender	Deshabilitar el render con requestAnimationFrame API, util para PostProcessing	false
camera	Una cámara configurable de forma manual para el renderer.

Propiedades por defecto

TresJs intenta ser el menos tendencioso que es posible. Eso es porque no se pega casi nada valor de defacto para el componente Renderer. Necesitas pegar los props que quieres usar. La sola excepción es el antialias prop. Se pega a true por defacto.