3D螺旋阶梯交互式作品展廊网站

在数字媒体时代，传统的图片展示方式（如轮播图、网格图库）已经难以满足用户对沉浸式视觉体验的需求。本项目的目标是以3D螺旋阶梯为视觉载体，构建一个兼具艺术性与交互性的作品展廊网站，让用户在浏览过程中体验从3D空间流动到2D平面的视觉过渡。项目面向设计师、摄影师等视觉创作者，提供一种新颖的作品展示方式。

详细介绍：

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

网页页面分成几个板块——最上面是3D螺旋展示区，中间是图片画廊，接着是关于我们，最后是底部导航。用Three.js做3D效果，GSAP做滚动动画，Canvas 2D画粒子背景。不同模块之间通过滚动进度来协调，滚动越多，3D场景变化越大。配色用了紫色和粉色搭配，整体偏淡紫色调。
3D螺旋展示：把16张图片用Three.js放在一个螺旋线上，每张图片绕一圈转4π角度。滚动页面时图片会旋转并且慢慢往下流动，最后消失在画面下方。摄像机也会跟着滚动往后移动，营造出穿梭的感觉。每张图片加了圆角效果和粉紫色的边框线。
粒子背景：用Canvas 2D画了三种不同大小的粒子——大的气泡会呼吸脉动，中等的彩色圆点带发光效果，小的星光粒子一闪一闪的。总共大概四百个粒子，鼠标移上去会把它们推开。
页面交互：点击画廊里的图片可以全屏查看，按键盘左右键切换图片，按ESC关闭。页面滚动时导航栏会自动隐藏，滚动到各个区块会有淡入动画。手机端有汉堡菜单。
遇到的难点和解决方法：图片纹理显示异常：一开始尝试用ShapeGeometry给图片做圆角，结果纹理映射不对，图片显示成一横条一横条的彩色条纹。后来改用普通平面几何体加上自己画的Canvas圆角蒙版贴上去，问题解决了，图片正常显示也有圆角效果。
滚动时图片消失太突然：最开始用图片离中心点的距离来控制透明度，一滚动所有图片突然全没了。改成根据滚动进度（0到1）来逐渐控制淡出，配合缓动曲线，效果就平滑多了。
粒子太多卡顿：一开始粒子数量设得比较高，手机端滚起来有点卡。后来加了个根据屏幕大小动态调整数量的逻辑，大屏幕多一些，小屏幕少一些，基本不卡了。