照片球画廊:拖动旋转、一键散开、点开大图的照片球
做一个作品集首屏:几十张照片贴满一个球,可以拖动旋转,甩一下会继续转并慢慢停下,球会朝鼠标微微倾斜,平时自己缓慢转动;一个按钮让照片散成一面墙再收回,点一张照片放大查看。SandBase 按 4x4 联系表生成照片,Skill 自动切开,也可以用你自己的照片文件夹。只用 CSS 3D,不用 WebGL。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。
准备好照片的主题(或你自己的照片文件夹),还有品牌、文案、链接和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块、运行脚本和样式、切好的照片,以及开源字体。
使用方法
SandBase 把每 16 张照片画成一张带白色间隔的联系表,Skill 找到间隔,把它切成一张张照片。
构建脚本写出页面:每张照片是一个图块,从球面上的一个点朝外,用斐波那契分布均匀铺开。
在浏览器里,拖动设定旋转和倾斜,甩一下会继续滑动,“散开”把每个图块换到墙上的一个位置,点击打开大图。
常见问题
做一个新画廊要花多少钱?
通过 SandBase 每 16 张照片约 $0.075;示例用了两张联系表、32 张照片,花了 $0.15。用你自己的照片不花钱。
能用我自己的照片吗?
可以。把构建脚本指向一个放着 JPEG 或 PNG 的文件夹,就会跳过生成。
需要 WebGL 吗?
不需要,只用 CSS 3D。开启减少动态效果时,球不会自己转,散开时直接切换,没有飞行过程。
为什么这里点链接没反应?
示例运行在沙盒框架里,链接被禁用了。在你自己的页面里,链接会指向你在 site.json 里填的地址。
手机上能用吗?
能。用手指拖动能让球旋转,点一下能打开照片。已在 390 像素宽的手机视口里检查过。
为什么没有在线生成?
生成新场景需要在沙盒里注入模型 Key,后端暂时还不支持。目前请用你自己的 Agent 运行这个 Skill。