作者: 希彼赫
在线体验 关于项目
「花田 · Bloom」是一片跑在浏览器里的实时花田：挥动鼠标划过田野，或打开摄像头用双手 pinch 手势，花潮便沿着你的轨迹层层盛开。
花朵基于远程加载的 3D 花模型实时渲染，影响半径、开花速度、辉光强度、花朵大小与密度、花潮速度都提供可调参数——既是一件可玩的互动作品，也是一块检验 3D 资产实时表现的试验场。
体验要点
- 挥动鼠标划过田野，花潮沿轨迹层层盛开、向四周蔓延
- 按住左键拖拽旋转视角，滚轮缩放，任意机位端详花田
- 开启摄像头对镜头捏合两下，触发全场花潮齐放
- 辉光、密度、花潮速度与每种花的大小、饱和度全部可调，按 H 键隐藏 UI 录一段干净画面
技术解析
3D 资产 · Tripo 文生模型
田里的六种花——白花、黄花、雏菊、紫花、蓝花、红花——都是用 Tripo 文生模型直接生成的：写一句提示词，拿到带 PBR 材质的 GLB 文件。每朵花的面数控制在 2000–8000 三角面，倒不是苛求美术，而是因为同屏要种下近五千朵花，模型越轻，帧率越稳。
所有花模型都按同一个约定出件：正面朝 +Z、底部落在原点、高度约 1 个单位。这样程序不用为任何一朵花写特殊处理，换上新花也能直接用。
千朵同屏 · InstancedMesh
想在浏览器里同时开出几千朵花，靠的是 Three.js 的 InstancedMesh：每种花只保留一份几何体和材质，剩下的交给实例化复制——默认全场约 4900 朵，一种花只占一次 draw call，性能压力比想象中小得多。
开花动画也不用改模型本身：逐实例更新 instanceMatrix 里的缩放值，每朵花就能从贴地的小芽慢慢长到完全绽放。
花潮传播 · 射线拾取 + 径向波前
鼠标划过时，Raycaster 会把光标位置投射到草地上，落点就是花潮的起点；每朵花看自己离起点有多远，来决定什么时候开——离得近先开，离得远后开，一圈圈往外蔓延。听起来复杂，核心其实只是一次简单的距离计算。
手势触发 · MediaPipe Hands
打开摄像头后，MediaPipe Hands 会实时识别手上的 21 个关键点。程序只盯一件事：拇指和食指有没有捏到一起——捏合两次，全场的花就从你指尖的位置一起绽放。为了不误判，识别只认右手。
辉光氛围 · Bloom 后处理
画面里那层梦幻的光晕来自 UnrealBloomPass 后处理：整场辉光默认开在 0.46，刚好发光又不过曝。每种花还留了独立的辉光和饱和度旋钮，氛围拉满的同时，也不会把每种花自己的颜色盖掉。
