三个作品 · 点开就是成品
想法要能被点开。
一塔五境、广州经济看板、87 键键盘——一个讲空间,一个讲数据,一个讲产品结构。 三个都是可以直接在浏览器里操作的东西:不用下载,不用登录,也不用先听我解释。
建议用电脑打开 手机也能看,3D 那个建议横屏 每个页面都能离线运行
作品 / Works
按推荐观看顺序排列
一塔五境 · 广州塔的垂直城市
把广州塔拆成五段真实结构,用滚动驱动一条连续的镜头与爆炸时间线,讲完六个章节。
33 万三角形 · 204 draw calls · 8.6 MB,进去前先看说明
- Three.js
- 滚动叙事
- 移动端适配
广州经济运行监测看板
从统计局公开 PDF 里抽出 1978—2025 年的数据,做 11 区横向对比,再用三张卡片解释「数字为什么反常」。
11 区合计对得上全市 · 8 个工作表 · 单文件离线
- Python
- ECharts
- 数据校验
87 键 TKL 机械键盘 · 爆炸图
十个零件、八十七颗轴,按装配逆序炸开。一套 A3 双页规格图,外加一个可以逐层点开的网页版。
10 个零件 · 87 颗轴 · A3 双页 + 交互页
- Blender
- Cycles
- 版式设计
每个作品,真正难的地方
面试时可以只讲这三段
滚动不能和三维时间线脱节
章节边界最容易硬切:镜头刚到位,文字已经走了。
做法:把 scrollY 归一化成连续进度 f,章内前 54% 保持构图、后段用 smoothstep 过渡;爆炸位移每次都从 baseY 绝对计算,来回滚不会累计误差。
结果:六章可以正着看、倒着看、停在任意一帧,塔的五段始终对得上标签。
官方只给 PDF,没有干净的表
数字抄错一次,后面所有占比和贡献都白算。
做法:用 Python 标准库写了个 PDF 表格提取器;再做三项闭合校验——11 区 GDP 合计 = 全市 32039.46 亿、人口合计 = 1910.10 万、社零合计 = 11032.38 亿,三项精确相等才往下算。
结果:单文件网页 + 8 表 Excel;「固投 −6.7%」被拆到黄埔、番禺、增城三个区,而不是一句「全面下滑」;统局没单独披露的年份留空并标注,不插补。
爆炸图很容易变成一堆零件
炸得太开看不出装配关系,炸得太紧又看不清层次。
做法:十个零件按装配逆序展开,间距按可读性手动调,不按等比放大;网页版把每层做成独立图层,点哪层、哪层浮起来,其余压暗。
结果:A3 双页讲清「轴体—定位板—夹层」的受力关系,网页版可以一层层点开看。
这一页想说明的事
三个项目分别对应三种表达能力:把空间讲清楚、把数据讲清楚、把产品结构讲清楚。共同点是都能真的跑起来——不是效果图,也不是截图。
如果时间有限,建议先看 02(30 秒能看懂结论),再看 01(体验一次滚动),最后看 03 的细节。
把这一页带走
这段二维码就是本页地址:印在简历上、贴在作品集 PPT 里、发在微信里都能扫开。手机上打开后,三个作品都在,不用登录。
portfolio.example.com