YL

SHADER · Vite + three

EffectComposer 泛光后处理Bloom post-processing

用 EffectComposer + UnrealBloomPass 给 emissive 物体加泛光,并说明性能注意点。

旗舰完整演示

可交互场景(拖拽旋转;部分演示支持键盘)。下方提示词用于让 Agent 生成同级成品。

预期产出 · Returns

Vite 工程代码:可开关 bloom,emissive 物体明显发光,帧率可接受。

适合用在哪

科技感 UI、霓虹物体、强调高亮元素的大屏或展示页。

容易踩的坑

  • 未设置 toneMapping 时 bloom 容易过曝发白。
  • composer 尺寸必须随 canvas resize 更新。

提示词 · Prompt

在 Vite + Three.js 项目中加入后处理泛光: 1) 从 three/examples/jsm/postprocessing/ 导入 EffectComposer、RenderPass、UnrealBloomPass; 2) 场景中有 2-3 个 mesh,其中至少一个 meshStandardMaterial.emissive 较强; 3) composer 尺寸随 resize 更新; 4) 提供 bloomStrength / threshold / radius 三个参数的调节方式; 5) 在代码注释中说明:为何 renderer.toneMapping 建议设为 ACESFilmicToneMapping,以及移动端降低 bloom 分辨率的策略。 输出完整相关文件。
Vite project: EffectComposer + UnrealBloomPass, ACES tone mapping notes, tunable bloom params, mobile perf tips in comments.

相关提示词

标签