用材质区分卡牌的稀有度

箔光图鉴（Holo Archive）是一个以材质呈现稀有度的沉浸式卡牌体验馆：用 three.js 将浏览、聚焦、抽取、翻面与档案查看串联在同一个三维场景中，并让箔面随卡牌法线与相机视角实时流动。

技术构成

Demo 链接: 在线查看
建议在电脑端用鼠标体验。
平台: Web App（three.js + 自定义 GLSL Shader + GSAP）
架构: three.js
交付: 单文件内联打包
Vibe Coding: Claude Code + Codex

主要功能流程

Draw & Reveal

进入档案墙后，卡牌按稀有度呈现不同材质档位，箔面由真实法线与相机方向驱动，静止时也会随相机微动自己流动；聚焦某一组会塌缩成手牌扇，悬停哪张哪张上浮、邻卡让位。点击后卡先卡住停滞 60 毫秒再回弹脱出，一道高光随位移扫过卡面，其余卡同时后撤让位；抽出的卡翻面亮出档案信息，翻转的 1.2 秒里箔面扫过完整色相环，退出则把开合的同一条 timeline 逆向播放，回到档案墙。