晴柒苒

在数字媒体时代，传统的图片展示方式（如轮播图、网格图库）已经难以满足用户对沉浸式视觉体验的需求。本项目的目标是以3D螺旋阶梯为视觉载体，构建一个兼具艺术性与交互性的作品展廊网站，让用户在浏览过程中体验从3D空间流动到2D平面的视觉过渡。项目面向设计师、摄影师等视觉创作者，提供一种新颖的作品展示方式。 详细介绍： 3D螺旋展示模块：使用Three.js构建16张图片沿螺旋线排列的3D场景，支持鼠标拖拽视角倾斜，营造环绕沉浸感。 滚动驱动动画系统：通过GSAP ScrollTrigger实现滚动进度与3D场景状态的精确绑定——随滚动，螺旋自动旋转、图片逐步向下方流动、摄像机视角平滑推移，最终图片"流入"底部平铺画廊。 Canvas粒子背景：全屏Canvas 2D粒子系统，包含大中小三种粒子层级——大型半透明气泡随脉动呼吸、中型彩点带辉光效果、小型星光粒子闪烁飞舞，鼠标滑过时产生推开交互。 瀑布流画廊与灯箱：响应式网格布局展示全部16张图片，鼠标悬停显示标题浮层。点击图片打开全屏灯箱，支持键盘左右切换与ESC关闭。 品牌展示模块：首页"螺旋阶梯"毛玻璃标题、关于区域（含统计数字动态递增动画）、品牌底部（社交链接、快速导航、联系方式）。 业务流程与功能路径描述： 用户进入网站后，首先看到3D螺旋阶梯与毛玻璃标题。向下滚动触发螺旋动画——图片旋转、流动、淡出。经过25vh的玻璃质感过渡区后，进入瀑布流画廊，随滚动渐进显现。继续滚动至关于区域，统计数字从0递增至目标值。底部为品牌信息与导航链接。全程鼠标移动影响3D视角倾斜与粒子运动方向。 网页的配色可快速更换，采用撞色设计