Skip to content
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
完整图层栈
在同一页组合 image、color、shader、particles 四类背景层。
Model3D 前景
Hero 媒体区域使用带边框和阴影的 3D 模型。
浮动覆盖层
卡片、徽章、代码、统计等元素在顶层漂浮。
rgba 粒子颜色
粒子调色板与基础颜色全部使用 rgba，便于直接调参。
图层 Level 6：全元素融合展示
主要关注点：用一个页面同时展示 Hero 的多类渲染能力。
包含的渲染面
| 渲染面 | 配置路径 |
|---|---|
| 图片背景层 | hero.background.layers[].type: image |
| 颜色叠加层 | hero.background.layers[].type: color |
| 着色器动画层 | hero.background.layers[].type: shader |
| 粒子层 | hero.background.layers[].type: particles |
| 模型主视觉 | hero.image.type: model3d |
| 浮动元素层 | hero.floating.* |
演示的 API 键
| 键 | All Config |
|---|---|
hero.background.layers[] | |
layers[].zIndex/opacity/blend | |
layers[].image/color/shader/particles | |
hero.image.model3d | |
hero.floating.* |
说明
- 本页是高密度组合页，用于验证跨模块协同。
- 粒子颜色全部采用
rgba(...)字符串，便于快速修改。 movement.tiltVariance已启用，用于提升小粒子方向变化。