作者: 希彼赫
在线体验 关于项目
FLORA 把世界杯参赛国与它们的代表花卉搬进一座暖光标本馆：阿根廷蓝花楹、荷兰郁金香、日本菊花、哥伦比亚卡特兰……每株花都是 Tripo 出件的 3D 模型，立在旋转展台上供你拖拽端详、双击特写。
液态玻璃质感的档案卡片陈列着每株花的学名、科属、花期、象征意义与文化注记；底部国旗栏一键切换国家，也可以打开摄像头用手势翻页。资产遵循统一出件协议（+Z 朝向、原点在茎根），缺失时自动降级为同协议的程序化占位植物。
体验要点
- 拖拽旋转端详每株标本，双击进入特写镜头
- 底部国旗栏一键切换国家展位，或开摄像头用手势翻页
- 液态玻璃档案卡陈列学名、科属、花期、象征意义与文化注记
- 资产缺失时自动降级为同协议的程序化占位植物，展厅永不空窗
技术解析
3D 标本 · Tripo 文生模型
馆里的六株国花——卡特兰、大丽花、天堂鸟、菊花、蓝花楹、郁金香——都是 Tripo 文生模型的作品，导出成 GLB 后由 GLTFLoader 按需加载进展厅。
每株花都按同一个约定出件：正面朝 +Z、原点在茎根、高约 1 个单位。就算哪株花临时缺席，程序也会按同样的约定生成一株占位植物顶上，展台永远不会空着。
暖光 · RoomEnvironment 环境光照
展厅里其实一盏灯都没摆：暖光效果全部来自 Three.js 的 RoomEnvironment——它生成一张环境贴图，让 Tripo 模型自带的 PBR 材质自然呈现出高光和漫反射的层次。省去了逐灯调参的功夫，一张贴图就把光打好了。
标牌混排 · CSS3DRenderer
展签上的学名、科属、文化注记，其实都是网页里真实的 DOM 元素，靠 CSS3DRenderer 跟着 3D 场景一起转动。好处很实在：文字离多近都清晰、可以选中复制，连液态玻璃的质感都是普通 CSS 写出来的。
手势翻页 · MediaPipe Hands
除了点底部的国旗栏，展馆还支持隔空翻页：MediaPipe Hands 通过摄像头识别手部动作，挥挥手就能切到下一个国家的展位，不碰鼠标也能逛完全馆。
