前端代码：轨道式沉浸相册，球面透镜效果

一组照片铺满 3D 球体，可拖拽/滑动自由旋转，形成沉浸式“全景相册”效果。适合旅拍合集、品牌灵感墙或产品素材展示，纯前端实现，开箱可用。

模板亮点

• 球体相册：照片贴合球面，旋转时保持透视一致，形成环绕式观感。
• 手势交互：Hammer.js 监听拖拽/滑动，带惯性减速，鼠标与触控皆可。
• 层级控制：全局变量控制半径、切片分布和旋转偏移，易于增删图片。
• 背景遮罩：渐变遮罩与模糊层让视觉更聚焦，避免干扰。
• 品牌露出：顶部含 “KS主题” 徽章，可替换为自有品牌链接。

适用人群与场景

• 旅游/摄影作品集：沉浸展示多角度作品。
• 品牌/营销：灵感墙、案例墙或团队/产品素材合集。
• 交互演示：教学 Hammer.js 手势、3D transform 与惯性动效的示例。

设计与色彩

• 深色背景衬托照片，半透明遮罩聚焦内容。
• 圆角卡片与柔和光影，保持图片主体突出。

文件结构

• index.html：页面结构与图片列表，内容文案。
• style.css：3D 球体布局、遮罩、排版与品牌样式。
• script.js：旋转/惯性逻辑、懒加载与随机排序、手势绑定（Hammer.js，非 ES6 module）。

使用方式

1. 打开 index.html 预览（需联网加载 Normalize 与 Hammer.js）。
2. 替换图片：在 .item 的 data-src 与 img 标签修改为你的素材。
3. 调整球体参数：在 style.css 修改集中变量 --radius、--segments-x/--segments-y（窄屏已自动缩半径）；在 script.js 可调滑动灵敏度、惯性衰减与过渡时长。