照片球画廊:拖动旋转、一键散开、点开大图的照片球

做一个作品集首屏:几十张照片贴满一个球,可以拖动旋转,甩一下会继续转并慢慢停下,球会朝鼠标微微倾斜,平时自己缓慢转动;一个按钮让照片散成一面墙再收回,点一张照片放大查看。SandBase 按 4x4 联系表生成照片,Skill 自动切开,也可以用你自己的照片文件夹。只用 CSS 3D,不用 WebGL。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

照片球画廊:拖动旋转、一键散开、点开大图的照片球

准备好照片的主题(或你自己的照片文件夹),还有品牌、文案、链接和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块、运行脚本和样式、切好的照片,以及开源字体。

使用方法

  1. SandBase 把每 16 张照片画成一张带白色间隔的联系表,Skill 找到间隔,把它切成一张张照片。

  2. 构建脚本写出页面:每张照片是一个图块,从球面上的一个点朝外,用斐波那契分布均匀铺开。

  3. 在浏览器里,拖动设定旋转和倾斜,甩一下会继续滑动,“散开”把每个图块换到墙上的一个位置,点击打开大图。

常见问题

做一个新画廊要花多少钱?

通过 SandBase 每 16 张照片约 $0.075;示例用了两张联系表、32 张照片,花了 $0.15。用你自己的照片不花钱。

能用我自己的照片吗?

可以。把构建脚本指向一个放着 JPEG 或 PNG 的文件夹,就会跳过生成。

需要 WebGL 吗?

不需要,只用 CSS 3D。开启减少动态效果时,球不会自己转,散开时直接切换,没有飞行过程。

为什么这里点链接没反应?

示例运行在沙盒框架里,链接被禁用了。在你自己的页面里,链接会指向你在 site.json 里填的地址。

手机上能用吗?

能。用手指拖动能让球旋转,点一下能打开照片。已在 390 像素宽的手机视口里检查过。

为什么没有在线生成?

生成新场景需要在沙盒里注入模型 Key,后端暂时还不支持。目前请用你自己的 Agent 运行这个 Skill。