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 |