这是一款基于React、WTC-GL 与 WebGL技术实现的两组图片以棱镜碎片飞散重组的相册。两组风景与抽象图片采用不同画幅,切换时棱镜块随流场飞散、翻转再重组,附缩略图导航。
棱镜相册的画面与交互特点
上方是内容栏宽度的风景相册,下方是全宽抽象相册,中间只用一段文字分隔。切换图片时,棱镜正反面承接前后两张图,碎片受流场驱动离开后重新归位;缩略图与前后按钮可手动选图。
棱镜相册的素材与参数修改位置
script.js 管理两组图片与页面结构,src/PrismGallery.js 负责相册交互,src/PrismWall.js 及 shaders 保存碎片几何和着色器,图片在 img。
棱镜相册的使用场景与适配
支持减少动态效果设置;WebGL 初始化失败时保留普通图片相册。适合摄影与视觉作品展示。