嘉·阿旭·豪



一张会随角度转动的双图光栅收藏卡,两种形态自由切换
这是一个在浏览器中用 Three.js 实时渲染的数字收藏卡展示页,作品名为《嘉豪 · 雨中操场》。页面中央是竖版 3D 卡片,卡面绘制了雨天校园操场与一位穿黑色连帽卫衣、戴黑色口罩的人物。站点提供雨中伫立与雨中奔跑两种卡面形态,用户既能点击状态按钮切换,也能用鼠标左右拖动卡面,让光栅效果随角度在两态之间过渡。右侧面板可分别调节镭射、粒子与轮廓光三条光效,并提供关闭光效、复位、自动旋转、背面翻转、原画对照与画面保存等操作。右上角的对照视图会把两张原始插画并排展示,方便比较两态差异。
核心亮点
双态光栅卡面
转动角度即切换伫立与奔跑两态
三档光效可调
镭射、粒子、轮廓光实时调整
实时 3D 渲染
可翻面、自动旋转与复位
原画对照视图
并排查看两张原始插画
画面保存导出
一键保存当前卡片画面
如何使用
打开并认识卡面
进入页面后,中央是一张竖版数字收藏卡,右侧为标题与全部控制项,底部显示鼠标与键盘操作提示。拖动卡面前的滑块或在卡片上左右拖动,即可看到卡面随角度变化,这是理解光栅效果的主要方式。
切换两种形态
右侧提供雨中伫立与雨中奔跑两个状态按钮,点击即可直接切到对应卡面。两种形态共用同一人物与背景,差异在姿态,可以配合转动滑杆观察过渡过程。
调节光效
光效区域有镭射、粒子、轮廓光三条滑杆,拖动后画面会立刻更新,粒子表现为漂浮光点,轮廓光勾出人物边缘,镭射影响卡面反光。需要干净画面时可点击关闭光效。
翻面与自动旋转
点击背面按钮可查看卡片另一面,自动按钮会让卡片持续往复旋转,便于观察光栅过渡,复位按钮把角度与状态恢复初始。
对照原画与保存
点击右上角对照原画会打开对比视图,把两张原始插画并排显示并附短句说明,浏览后点关闭返回。想留存当前效果时,点击保存即可导出画面。
相似站点
18幻光典藏 · 嘉豪赛博镭射卡
可拖动转卡、翻面赏背面的赛博朋克全息镭射卡,镭射光泽与视差随视角实时变化。
221无尽绽放 · Infinite Bloom
一朵由 Three.js 程序化生成的牡丹,粒子与光交织的永恒花海。
1嘉·阿旭·豪
一张双图光栅收藏卡:拖动卡面,雨中的他从伫立转为奔跑。
198地球
一个可旋转缩放的 3D 地球展示页,呈现电影感太空场景与大气层效果。
100Raymarching 演示
基于 Three.js 的纯 GLSL Raymarching 渲染演示,包含 SDF 图元、平滑混合与实时光照
101Snowfall
Canvas 2D 飘雪动画,包含雪花飘落、月色光晕、远山剪影



