作品 关于
← 全部作品

02 / 网页 · 三维场景 · 交互

情绪气象台EMOTION OBSERVATORY

把“心情”翻译成天气:喜是晴、怒是雷暴、哀是雨、惊是骤雪。四个场景不是四张背景图,而是四套可以停下来待一会儿的气象系统。

年份2026
类型网页 · 三维场景 · 交互
职责概念 / 视觉 / 前端实现
工具WebGL · Canvas 粒子 · 视频层
情绪气象台
02 · EMOTION OBSERVATORY
01 / EMOTION OBSERVATORY

为什么是天气

情绪很难被准确描述,但天气一说就懂。晴天让人松弛,雷暴让人紧绷——这套隐喻是公共的,不需要解释。于是整个作品不做“情绪记录工具”,而是做一间可以随时推门进去的气象台:你选一个情绪,天气就为你变一次。

02 / EMOTION OBSERVATORY

四种天气

每种情绪对应一套完整的场景:光、云、降水、声音、以及一句短句。

喜 · 晴 —— 抬头,天就晴了。
N°01喜 · 晴 —— 抬头,天就晴了。
怒 · 雷暴 —— 云压下来之前,先有风。
N°02怒 · 雷暴 —— 云压下来之前,先有风。
哀 · 雨 —— 雨不问理由,只陪你待着。
N°03哀 · 雨 —— 雨不问理由,只陪你待着。
惊 · 骤雪 —— 世界突然安静了一秒。
N°04惊 · 骤雪 —— 世界突然安静了一秒。
03 / EMOTION OBSERVATORY

界面逻辑

顶部四个情绪常驻可切换,左侧是当前天气的名字与短句,右下是四段短片的索引,画面里的小人会跟着指针转头——它既是角色,也是被观测的对象。信息层次被刻意压平:只有一层导航、一句文案、一个入口。

喜 · 晴:暖光穿过云层,草地占去下半屏
实拍喜 · 晴:暖光穿过云层,草地占去下半屏
惊 · 骤雪:冷调压暗,粒子密度最高的一幕
实拍惊 · 骤雪:冷调压暗,粒子密度最高的一幕
04 / EMOTION OBSERVATORY

技术

视觉上最大的难点不是建模,而是让四套完全不同的情绪共用一套可复用的骨架——切换时不能有跳帧,也不能让光与粒子互相打架。

SPEC

实现细节

三维场景
WebGL 渲染天空与地形,随情绪切换光照与雾
视频层
四段 4K 素材压到 1280 宽,作为云层与降水的底层
粒子
Canvas 2D 绘制雨、雪、雷暴,密度按情绪分档
视线跟随
指针坐标映射到角色眼球与头部旋转,带阻尼
响应式
竖屏改为上下分栏,短片索引折叠为横滑

在这台设备上试一下

四段天气可自由切换,短片与粒子实时渲染;建议全屏观看。

※ 在线版本视频已压缩,画质略低于原始 4K 素材。