mirror of
https://github.com/galacean/engine.git
synced 2026-07-02 11:34:21 +08:00
53 lines
3.3 KiB
Plaintext
53 lines
3.3 KiB
Plaintext
---
|
|
order: 2
|
|
title: 纹理
|
|
type: 图形
|
|
group: 背景
|
|
label: Graphics/Background
|
|
---
|
|
|
|
当场景的背景类型设置为纹理时，画布的渲染区域会在相机渲染前会按照填充规则填上对应的纹理。
|
|
|
|
## 设置纹理背景
|
|
|
|
依据路径 **[层级面板](/docs/interface/hierarchy)** -> **选中 Scene** -> **[检查器面板](/docs/interface/inspector)** -> **Background 栏** 设置 **Mode** 为 **Texture**，然后选择期望的纹理，可以看到场景的背景发生实时变化。
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/2673b2a2-a87b-4707-b3fc-9af334231298/2024-07-18%25252017.50.16.gif" />
|
|
|
|
同样的，在脚本中也可通过如下代码进行设置：
|
|
|
|
```typescript
|
|
// 获取当前场景的背景实例
|
|
const background = scene.background;
|
|
// 设置背景类型为纹理
|
|
background.mode = BackgroundMode.Texture;
|
|
// 将一张 2D 纹理设置为背景纹理
|
|
background.texture = await engine.resourceManager.load<Texture2D>({
|
|
url: "XXX.jpg",
|
|
type: AssetType.Texture,
|
|
});
|
|
// 设置填充模式为铺满
|
|
background.textureFillMode = BackgroundTextureFillMode.Fill;
|
|
```
|
|
|
|
## 属性
|
|
|
|
需要注意的是，背景的相关属性都在场景的 `background` 属性中，获取到该属性实例后才修改相关属性才能生效。
|
|
|
|
| 属性 | 作用 |
|
|
| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| texture | 设置背景纹理 |
|
|
| textureFillMode | 设置背景纹理的填充模式，可选 [AspectFitWidth](/apis/core/#BackgroundTextureFillMode-AspectFitWidth), [AspectFitHeight](/apis/core/#BackgroundTextureFillMode-AspectFitHeight) 或 [Fill](/apis/core/#BackgroundTextureFillMode-Fill) , 默认为 `BackgroundTextureFillMode.AspectFitHeight` |
|
|
|
|
### 填充模式
|
|
|
|
通过 `background.textureFillMode = BackgroundTextureFillMode.AspectFitWidth` 设置纹理适配模式。
|
|
|
|
目前纹理适配模式有以下三种：
|
|
|
|
| 填充模式 | 说明 |
|
|
| ----------------------------------------------------------------------- | -------------------------------------------------- |
|
|
| [AspectFitWidth](/apis/core/#BackgroundTextureFillMode-AspectFitWidth) | 保持宽高比，把纹理宽缩放至 Canvas 的宽，上下居中。 |
|
|
| [AspectFitHeight](/apis/core/#BackgroundTextureFillMode-AspectFitHeight) | 保持宽高比，把纹理高缩放至 Canvas 的高，左右居中。 |
|
|
| [Fill](/apis/core/#BackgroundTextureFillMode-Fill) | 把纹理的宽高填满 Canvas 的宽高。 |
|