Skip to content

TresCanvas

TresCanvas 组件是Tres的主要组件。它负责创建ThreeJS WebGLRenderer

vue
<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- 这里是您的场景 -->
  </TresCanvas>
</template>

画布尺寸

TresCanvas 组件将使用父元素的尺寸作为画布的大小。 如果您想使用窗口大小作为画布的大小,可以将 window-size 属性设置为 true.

vue
<template>
  <TresCanvas window-size>
    <!-- 这里是您的场景 -->
  </TresCanvas>
</template>

或者您可以使用CSS来设置画布的尺寸。

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

预设配置

Tres 为 TresCanvas 组件提供了一些预设配置。您可以通过设置 preset 属性来使用它们。

Realistic

realistic 预设可以更容易更逼真的为3D场景设置渲染器。

vue
<template>
  <TresCanvas preset="realistic">
    <!-- 这里是您的场景 -->
  </TresCanvas>
</template>

这相当于:

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

配置项

配置描述默认值
alpha控制默认清除 alpha 值。设置为 true 时,该值为 0,否则为 1。false
antialias是否进行抗锯齿处理。true
camera由渲染器指定相机。
clearColor清除画布后渲染器显示颜色。#000000
context将渲染器附加到现有的 RenderingContext
depth绘图缓冲区是否至少具有16位的深度缓冲区true
failIfMajorPerformanceCaveat在性能较低时,是否检测渲染器创建失败。详细信息请参阅WebGL规范。false
logarithmicDepthBuffer是否使用深度缓冲区。如果在单个场景中处理巨大的比例差异,可能需要使用此选项。请注意,如果使用,此设置将使用gl_FragDepth,这将禁用Early Fragment Test优化,可能会导致性能下降。false
outputColorSpace定义输出编码LinearEncoding
powerPreference用户代理适合此WebGL上下文的GPU配置。可选"high-performance"(高性能), "low-power"(低功耗)或 "default"(默认)。default
precision着色器精度。可选"highp"(高精度), "mediump"(中精度)或 "lowp"(低精度)。"highp" 需要设备支持
premultipliedAlpha渲染器是否假定颜色具有 premultiplied alpha.true
preserveDrawingBuffer是否保留缓冲区直到手动清除或覆盖。false
shadows渲染器是否启用阴影。false
shadowMapType设置阴影映射类型PCFSoftShadowMap
stencil绘图缓冲区是否至少具有8位的 模板缓冲区true
toneMapping定义渲染器使用的色调映射曝光。ACESFilmicToneMapping
toneMappingExposure色调映射的曝光级别。1
useLegacyLights是否使用传统照明模式true
windowSize是否使用窗口大小作为画布大小,否则使用父元素大小。false

默认值

Tres尽量少做主观判断。这就是为什么它几乎不设置 TresCanvas 组件的任何默认值的原因。它使用three.js的默认值。唯一的例外是 antialias 属性,默认设置为 true

公共属性

属性描述
context详情查看 useTresContext