← 全部作品
02 · EMOTION OBSERVATORY
02 / 网页 · 三维场景 · 交互
情绪气象台EMOTION OBSERVATORY
把“心情”翻译成天气:喜是晴、怒是雷暴、哀是雨、惊是骤雪。四个场景不是四张背景图,而是四套可以停下来待一会儿的气象系统。
01 / EMOTION OBSERVATORY
为什么是天气
情绪很难被准确描述,但天气一说就懂。晴天让人松弛,雷暴让人紧绷——这套隐喻是公共的,不需要解释。于是整个作品不做“情绪记录工具”,而是做一间可以随时推门进去的气象台:你选一个情绪,天气就为你变一次。
02 / EMOTION OBSERVATORY
四种天气
每种情绪对应一套完整的场景:光、云、降水、声音、以及一句短句。
03 / EMOTION OBSERVATORY
界面逻辑
顶部四个情绪常驻可切换,左侧是当前天气的名字与短句,右下是四段短片的索引,画面里的小人会跟着指针转头——它既是角色,也是被观测的对象。信息层次被刻意压平:只有一层导航、一句文案、一个入口。
04 / EMOTION OBSERVATORY
技术
视觉上最大的难点不是建模,而是让四套完全不同的情绪共用一套可复用的骨架——切换时不能有跳帧,也不能让光与粒子互相打架。
SPEC
实现细节
- 三维场景
- WebGL 渲染天空与地形,随情绪切换光照与雾
- 视频层
- 四段 4K 素材压到 1280 宽,作为云层与降水的底层
- 粒子
- Canvas 2D 绘制雨、雪、雷暴,密度按情绪分档
- 视线跟随
- 指针坐标映射到角色眼球与头部旋转,带阻尼
- 响应式
- 竖屏改为上下分栏,短片索引折叠为横滑
在这台设备上试一下
四段天气可自由切换,短片与粒子实时渲染;建议全屏观看。
※ 在线版本视频已压缩,画质略低于原始 4K 素材。